2020年Web前端自学之路指南

2020年Web前端自学之路指南

今天小编要跟大家分享的文章是关于2020年Web前端自学之路指南。许多人可能跟着网络上的各种教程就入了前端这行的门，但大多数都只是机械的学习着资料中的内容。

俗话说，选择要比努力重要。

那么学习开发，首先应该要有一个清晰的学习路线。希望这篇文章，能为大家在选择未来的发展方向时提供一些参考和帮助。下面来和小编一起看一看吧！1、基础学习●HTML+CSS基础：HTML进阶、CSS进阶、div+css布局、排版、html+css整站开发，样式美化和浏览器兼容●JavaScript基础：掌握Js基本语法、条件、语句和循环、js内置对象常用方法、ECMAscript、DOM、BOM、定时器和焦点图，并学习增强逻辑的常用算法，实现木马、拖放、放大镜等常见的网络特效。●JavaScript高级特性：正则表达式与JSON、正则表达式案例、JavaScript原理与库封装、闭包、函数节流、作用域链、面向对象基础、事件与运动框架封装●JQuery基础使用：DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件的基本使用，开发复杂的交互功能和效果，并能熟悉JQuery的插件开发机制。

2、HTML5+CSS3和移动Web开发●HTML5：HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket●CSS3：CSS3新选择器、伪元素、颜色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作●图像学：Canvas、Canvas游戏、数据可视化、Heighcharts.js●Bootstrap：响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS●移动Web开发：跨终端WEB和主流设备简介、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、商城页面、滚屏3、HTTP服务和AJAX编程●WEB服务器基础：服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍●PHP基础：PHP基础语法，使用PHP处理简单的GET/POST请求●AJAX上篇：Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用●AJAX下篇：JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI用法、使用Ajax实现瀑布流案例4、面向对象进阶●面向对象终极篇：从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器●面向对象三大特征：继承性、多态性、封装性、接口●设计模式：面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程5、封装一个属于自己的框架●框架封装基础：事件流、冒泡、捕获、事件对象、事件框架、选择框架●框架封装中级：运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装●框架封装高级和补充：JQuery框架雏形、可扩展性、模块化6、模块化组件开发●面向组件编程：面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序●面向模块编程：AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS、CommonJS、ES6Modules7、工程化&构建、主流的框架●Web开发工作流：GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack、打包案例●MVC/MVVM/MVW框架：Vue.js、React、Angular.js、Backbone.js、Knockout/Ember、项目驱动8、Node.js全栈开发●快速入门：Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试;掌握node.js全栈的解决方案和在服务器端JS高效开发●核心模块和对象：全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO●Web开发基础：HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。●快速开发框架：Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。●数据库：mongoose/mongoDB、MYSQL●Node.js开发电子商务实战：需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块9、微信系列●微信公众号JS-SDK配置、定制菜单、回调、定制分享内容、扫一扫、地理位置、微信音频、图像、语音识别功能、服务器端curl库、支付、卡券、微店、微信开发模式与公众号分析、统计分析●微信小程序小程序项目、uni-app、mpvue10、移动APP(Web/Native/Hybrid)●ReactNative简介、ReactNative环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API●Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)11、其他●职业素养沟通表达、团队合作、目标管理、时间管理、心态管理●就业指导简历&投递技巧、面试&笔试技巧12、推荐一些编程学习网站01、哔哩哔哩这个网站如果让我评价，可谓是上边的视频都是非常高质量的，你可以去搜索看一下。

02、菜鸟教程这个网站虽然不是视频网站，一听名字就知道适合菜鸟的，但是基础的知识写的非常详细，很清晰易懂，非常适合刚开始学习编程的小伙伴。03、W3School之前刚开始学WEB开发时，经常在该网站，就是结合w3school学习前端，开发时，如果遇到记不清的标签，就去w3school搜索，平常有时间，就来慕课看前端视频。类似这样的学习网站还有很多，该开始入门的话上面的网站足矣。

其他的网站推荐还有腾讯课堂、实验楼、果壳MOOC学院等、知乎、掘金……以上就是小编今天为大家分享的关于2020年Web前端自学之路指南的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。

如何写一个webpack插件

前言最近由于用着html-webpack-plugin觉得很不爽，于是乎想自己动手写一个插件。原以为像gulp插件一样半天上手一天写完，但令人郁闷的是完全找不到相关的文章。

一进官方文档却是被吓傻了。

首先是进入 how to write a plugin 看了一页简单的介绍。然后教程会告诉你，你需要去了解compiler和compilation这两个对象，才能更好地写webpack的插件，然后作者给了github的链接给你，让你去看源代码，我晕。不过幸好最后给了一个plugins 的API文档，才让我开发的过程中稍微有点头绪。how to write a plugin这个教程还是可以好好看看的，尤其是那个simple example，它会教你在compilation的emit事件或之前，将你需要生成的文件放到webpack的compilation.assets里，这样就可以借助webpack的力量帮你生成文件，而不需要自己手动去写fs.writeFileSync。

主要就是这段代码compilation.assets[‘filelist.md’] = { source: function() { return filelist; }, size: function() { return filelist.length; }};基本特性介绍首先，定义一个函数func，用户设置的options基本就在这里处理。其次，需要设一个func.prototype.apply函数。这个函数是提供给webpack运行时调用的。

webpack会在这里注入compiler对象。输出complier对象，你会看到这一长串的内容，初步一看，我看出了两大类（有补充的可以告诉我）。一个webpack运行时的参数，例如_plugins，这些数组里的函数应该是webpack内置的函数，用于在compiltion，this-compilation和should-emit事件触发时调用的。

另一个是用户写在webpack.config.js里的参数。隐约觉得这里好多未来都可能会是webpack暴露给用户的接口，使webpack的定制化功能更强大。

如何学习web前端

学习最重要的是找到正确的方向，否则，付出再多的努力也是与成功背道而驰。
很多时候，成功除了需要勇气、坚持外，更需要正确的方向。

也许有了一个正确的方向，成功来得比想象中更快。

如果在错误的路上奔跑，再怎么努力也是无济于事。学习Web前端也是如此，首先明确自己的学习路线。以下讲述一下学习web前端的4个阶段怎么做：
1.HTML
首先，学习HTML。HTML(Hyper Text Mark-up Language，超文本标记语言)是一个网页的骨架，无论是静态网页还是动态网页，最终返回到浏览器端的都是HTML代码，浏览器将HTML代码解释渲染后呈现给用户。

因此，我们必须掌握HTML的基本结构和常用标记及属性。
HTML的学习是一个记忆和理解的过程，在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果，在“代码”视图中学本质，将各种视图的优势发挥到极致，这种对照学习的方法弥补了单纯识记HTML标签和属性的枯燥乏味，想必对各位初学web前端开发的菜鸟们来说是一个很好的方法。

学习了HTML后，只是掌握了各种“原材料”的制作方法，要想盖一幢楼房，还要把这些“原材料”按照我们设计的方案组合布局在一起，并进行一些样式的美化。
　　2.CSS
接着来学习CSS。CSS（Cascading Style Sheets，层叠样式表），是能够真正做到网页表现与内容分离的一种样式设计语言。

相对于传统HTML的表现而言其样式是可以复用的，这样就极大地提高了我们开发的速度，降低了维护的成本。
同时CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习可以顺利完成“一幢楼房”的建设了。

“楼房”建设完成后，就可以交给用户使用了，但如果想让用户获得更佳的体验，还可以对“楼房”进行更深一步的“装修”，让它看起来更“豪华”一些。
　　3.Javascript
JavaScript是一种被广泛用于客户端的脚本语言，JavaScript为我们提供了一些内置函数、对象和DOM操作，借助这些内容可以实现一些客户端的特效、验证、交互等，使页面看起来更加活泼。
尽管JavaScript有很多优点，让你惊喜不已，但当项目经理对你说“这个效果在××浏览器下不兼容，重做！”时，你肯定懵了：“不兼容？那可是花了我一个晚上写了几百行代码的啊！”
的确，JavaScript的兼容性和复杂性有时真的很让人头疼，幸好有“大神”帮我们做了封装。
　　4.jQUery
最后学习jquery。

jQuery是一个免费、开源的轻量级的JavaScript库，并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持)，同时有很多基于jQuery的插件可供选择，这样，在实现一些丰富的动态效果时更方便快捷，大大节省了开发时间，提高了开发速度，这也充分体现了其“writeless，domore”（写更少的代码，做更多的事情）的核心宗旨。
“豪华大楼”至此拔地而起，但是如此日复一日，年复一年的盖楼，好繁琐！如果可以将大楼里面每一个单独部件模块化，当需要盖楼时就像堆积木一样组合在一起，这样就简便、快捷了。
这种思想也适用于Web前端开发中，于是出现了各种前端框架，下面介绍的是Bootstrap。
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包，是一个CSS/HTML框架，并且支持响应式布局。

一经推出后颇受欢迎，一直是GitHub上的热门开源项目。
在项目开发过程中，借助Bootstrap提供的CSS样式、组件、JavaScript插件等，可以快速地完成页面布局和样式设置，然后有针对性地微调样式，这样基于框架进行开发大大缩短了开发周期。
二、关于学习Web前端的建议
最后给大家讲一下在学习Web前端过程中的一些建议。
在CSS布局时，需要注意一个问题：很多同学缺乏对页面布局进行整体分析，不能从宏观上对页面中盒子间的嵌套关系进行把握，就急于动手去做，导致页面中各元素间的关系很混乱，容易出现盒子在浮动时错位等情况。

所以在布局时采用“自顶向下，逐步细化”的思想，先用几个盒子将页面从整体上划分，然后逐步在盒子中继续嵌套盒子。
“君子生非异也，善假于物也”，在学习过程中还要多浏览一些优秀的网站，善于分析、借鉴其设计思路和布局方法，见多方能识广，从而融汇贯通，取他人之长、为己所用。
同时还要善于使用Firebug这个利器。

Firebug一方面可以帮助我们调试自己的页面，另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码。
随着移动互联网热潮的到来，移动开发越来越受到大家的欢迎，响应式布局、微网站等需求量不断增加，也是Web前端未来的发展方向之一。对web前端开发感兴趣的同学可以多点学习这方面的知识。

自学web前端开发,请问从何入手呢？

学习前端，要从学习HTML和CSS开始着手。关于这部分的学习，网上可选择的资料就太多了，这里不一一列举，题主百度搜索栏搜索 HTML 教程，或者css 教程，就可找到相关资料。

接着是学习前端的一个难点、也是重点，就是JavaScript。

首先，初学一门语言，要秉承一个原则：“能动手的，尽量别吵吵”
另外，你需要一个能够从简到难的知识体系，一步一步跟下来。
下面是干货。
体系：上图。

说明一下这张图，题主提问如何有效学习JS，我这里理解为JS原生，所以关于框架、工作流的内容，没有具体展开，题主有兴趣可以自行搜索。

一、文档资料

红宝书(基础)：https://book.douban.com/subject/10546125/
蝴蝶书(进阶)：https://book.douban.com/subject/11874748/
阮一峰老师ES6: http://es6.ruanyifeng.com/
权威官方文档MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/

二、学习步骤

语法和基本类型
控制流
循环
表达式和操作符
日期对象
正则表达式
对象

上面这些搞定，就已经掌握了ES5的最基本的内容了，接着，我们就可以来操作页面了。毕竟这是一个看脸的社会，我们在搞页面的同时，还要注意一下页面的样式。
8.DOM操作
1>DOM树的概念
2>从DOM树取节点
3>操作这个DOM树(节点的添加、删除、修改)
4>访问节点(parentNode, children, 等等)
5>属性操作(id, className)
9. 事件处理
1>鼠标事件(mouseove)
2>键盘事件(keyup)
3>浏览器事件(load)
好，到这里，基本上静态页面，你就可以随意玩耍了。

这里我们最好降上面思维导图提到的例子，都撸一遍。一是加深上面知识点印象，二是锻炼一下编程的逻辑思维能力。具体实现，网上有一堆堆的。

（这里让题主自己搜索，是因为编码的一项重要能力，就是搜索）一定要谨记，多敲代码。
10. 面向对象：原型式继承、原型链
11. ES6：
ES6跟ES5还是有较大的区别，所以建议你能系统的过一遍，将上面的练习，改为使用ES6再来一遍
三、调试
1、JS编程的调试非常简单，打开浏览器控制台(我个人比较钟爱Chrome)。如图：
1> console标签：这个标签，可以打印我们开发时，JS引擎为我们抛出的异常。

我们可以根据这个异常的信息，来分析错误原因。另外，我们也可以在代码中使用console.log() 输出程序运行时的环境变量信息。
2> 右红框1：错误提示。说明当前页有一个error发生，点击他，可以跳转到console来查看错误具体信息
3>右红框2：警告信息。

提示了我们程序潜在的危险。
4> source，我们进行单步调试的地方。具体见下图

（四）、工作流(跟JS原生关系不大，不详细展开了)

webpack
gulp

上面的内容结束后，就可以进入前端框架的海洋中畅游了。

怎么解决webpack@1

sp1没有安装成功？可能是系统有问题了，直接换个验证过的系统盘重装系统就行了，这样就可以全程自动、顺利解决 win7系统sp1安装失败 的问题了。用u盘或者硬盘这些都是可以的，且安装速度非常快。

但关键是：要有兼容性好的（兼容ide、achi、Raid模式的安装）并能自动永久激活的、能够自动安装机器硬件驱动序的系统盘，这就可以全程自动、顺利重装系统了。

方法如下：1、U盘安装：用ultraiso软件，打开下载好的系统安装盘文件（ISO文件），执行“写入映像文件”把U盘插到电脑上，点击“确定”，等待程序执行完毕后，这样就做好了启动及安装系统用的u盘，用这个做好的系统u盘引导启动机器后，即可顺利重装系统了；2、硬盘安装：前提是，需要有一个可以正常运行的Windows系统，提取下载的ISO文件中的“*.GHO”和“安装系统.EXE”到电脑的非系统分区，然后运行“安装系统.EXE”，直接回车确认还原操作，再次确认执行自动安装操作。(执行前注意备份C盘重要资料！)；3、图文版教程：有这方面的详细图文版安装教程怎么给你？不能附加的。会被系统判为违规的。

如何在webpack中打包jquery的第三方插件，类似jtemplates

手头的两个例子, 比如我们用到 Pen 这个模块,这个模块对依赖一个 window.jQuery, 可我手头的 jQuery 是 CommonJS 语法的而 Pen 对象又是生成好了绑在全局的, 可是我又需要通过 require(‘pen’) 获取变量最终的写法就是做 Shim 处理直接提供支持:{test: require.resolve(‘jquery’), loader: ‘expose?jQuery’},{test: require.resolve(‘pen’), loader: ‘exports?window.Pen’},基本的使用安装 webpack 模块之后, 可是使用 webpack 这个命令行工具可以使用参数, 也可以配置 webpack.config.js 文件直接运行 webpack 调用建议按照 Peter Hunt 给的教程走一遍, 基本的功能都会用到了https://github.com/petehunt/webpack-howto简单的例子就是这样一个文件, 可以把 ./main.js 作为入口打包 bundle.js:// webpack.config.js