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插件

首先，定义一个函数func，用户设置的options基本就在这里处理。其次，需要设一个func.prototype.apply函数。

这个函数是提供给webpack运行时调用的。

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

隐约觉得这里好多未来都可能会是webpack暴露给用户的接口，使webpack的定制化功能更强大。Compiler {_plugins:{ compilation: [ [Function], [Function], [Function], [Function] ],’this-compilation’: [ [Function: bound ] ],’should-emit’: [ [Function] ] },outputPath: ”,outputFileSystem: null,inputFileSystem: null,recordsInputPath: null,recordsOutputPath: null,records: {},fileTimestamps: {},contextTimestamps: {},resolvers:{ normal: Tapable { _plugins: {}, fileSystem: null },loader: Tapable { _plugins: {}, fileSystem: null },context: Tapable { _plugins: {}, fileSystem: null } },parser:Parser {_plugins:{ ‘evaluate Literal’: [Object],’evaluate LogicalExpression’: [Object],’evaluate BinaryExpression’: [Object],’evaluate UnaryExpression’: [Object],’evaluate typeof undefined’: [Object],’evaluate Identifier’: [Object],’evaluate MemberExpression’: [Object],’evaluate CallExpression’: [Object],’evaluate CallExpression .replace’: [Object],’evaluate CallExpression .substr’: [Object],’evaluate CallExpression .substring’: [Object],’evaluate CallExpression .split’: [Object],’evaluate ConditionalExpression’: [Object],’evaluate ArrayExpression’: [Object],’expression Spinner’: [Object],’expression ScreenMod’: [Object] },options: undefined },options:{ entry:{‘index’: ‘/Users/mac/web/src/page/index/main.js’ },output:{ publicPath: ‘/homework/features/model/’,path: ‘/Users/mac/web/dist’,filename: ‘js/[name].js’,libraryTarget: ‘var’,sourceMapFilename: ‘[file].map[query]’,hotUpdateChunkFilename: ‘[id].[hash].hot-update.js’,hotUpdateMainFilename: ‘[hash].hot-update.json’,crossOriginLoading: false,hashFunction: ‘md5’,hashDigest: ‘hex’,hashDigestLength: 20,sourcePrefix: ‘\t’,devtoolLineToLine: false },externals: { react: ‘React’ },module:{ loaders: [Object],unknownContextRequest: ‘.’,unknownContextRecursive: true,unknownContextRegExp: /^\.\/.*$/,unknownContextCritical: true,exprContextRequest: ‘.’,exprContextRegExp: /^\.\/.*$/,exprContextRecursive: true,exprContextCritical: true,wrappedContextRegExp: /.*/,wrappedContextRecursive: true,wrappedContextCritical: false },resolve:{ extensions: [Object],alias: [Object],fastUnsafe: [],packageAlias: ‘browser’,modulesDirectories: [Object],packageMains: [Object] },plugins:[ [Object],[Object],[Object],[Object],NoErrorsPlugin {},[Object],[Object] ],devServer: { port: 8081, contentBase: ‘./dist’ },context: ‘/Users/mac/web/’,watch: true,debug: false,devtool: false,cache: true,target: ‘web’,node:{ console: false,process: true,global: true,setImmediate: true,__filename: ‘mock’,__dirname: ‘mock’ },resolveLoader:{ fastUnsafe: [],alias: {},modulesDirectories: [Object],packageMains: [Object],extensions: [Object],moduleTemplates: [Object] },optimize: { occurenceOrderPreferEntry: true } },context: ‘/Users/mac/web/’ }除此以外，compiler还有一些如run, watch-run的方法以及compilation, normal-module-factory对象。我目前用到的，主要是compilation。

其它的等下一篇有机会再说。对比起compiler还有compiler.plugin函数。这个相当于是插件可以进行处理的webpack的运行中的一些任务点，webpack就是完成一个又一个任务而完成整个打包构建过程的。

如make是最开始的起点, complie就是编译任务点，after-complie是编译完成，emit是即将准备生成文件，after-emit是生成文件之后等等，前面几个都是比较生动形象的任务点。至于compilation，它继承于compiler，所以能拿到一切compiler的内容（所以你也会看到webpack的options），而且也有plugin函数来接入任务点。在compiler.plugin(’emit’)任务点输出compilation，会得到大致下面的对象数据，因为实在太长，我只保留了最重要的assets部份：assetsCompilation {assets:{ ‘js/index/main.js’:CachedSource {_source: [Object],_cachedSource: undefined,_cachedSize: undefined,_cachedMaps: {} } },errors: [],warnings: [],children: [],dependencyFactories:ArrayMap {keys:[ [Object],[Function: MultiEntryDependency],[Function: SingleEntryDependency],[Function: LoaderDependency],[Object],[Function: ContextElementDependency],values:[ NullFactory {},[Object],NullFactory {} ] },dependencyTemplates:ArrayMap {keys:[ [Object],[Object],[Object] ],values:[ ConstDependencyTemplate {},RequireIncludeDependencyTemplate {},NullDependencyTemplate {},RequireEnsureDependencyTemplate {},ModuleDependencyTemplateAsRequireId {},AMDRequireDependencyTemplate {},ModuleDependencyTemplateAsRequireId {},AMDRequireArrayDependencyTemplate {},ContextDependencyTemplateAsRequireCall {},AMDRequireDependencyTemplate {},LocalModuleDependencyTemplate {},ModuleDependencyTemplateAsId {},ContextDependencyTemplateAsRequireCall {},ModuleDependencyTemplateAsId {},ContextDependencyTemplateAsId {},RequireResolveHeaderDependencyTemplate {},RequireHeaderDependencyTemplate {} ] },fileTimestamps: {},contextTimestamps: {},name: undefined,_currentPluginApply: undefined,fullHash: ‘f4030c2aeb811dd6c345ea11a92f4f57’,hash: ‘f4030c2aeb811dd6c345’,fileDependencies: [ ‘/Users/mac/web/src/js/index/main.js’ ],contextDependencies: [],missingDependencies: [] }assets部份重要是因为如果你想借助webpack帮你生成文件，你需要像官方教程how to write a plugin在assets上写上对应的文件信息。

除此以外，compilation.getStats()这个函数也相当重要，能得到生产文件以及chunkhash的一些信息，如下：assets{ errors: [],warnings: [],version: ‘1.12.9’,hash: ‘5a5c71cb2accb8970bc3’,publicPath: ‘xxxxxxxxxx’,assetsByChunkName: { ‘index/main’: ‘js/index/index-4c0c16.js’ },assets:[ { name: ‘js/index/index-4c0c16.js’,size: 453,chunks: [Object],chunkNames: [Object],emitted: undefined } ],chunks:[ { id: 0,rendered: true,initial: true,entry: true,extraAsync: false,size: 221,names: [Object],files: [Object],hash: ‘4c0c16e8af4d497b90ad’,parents: [],origins: [Object] } ],modules:[ { id: 0,identifier: ‘multi index/main’,name: ‘multi index/main’,index: 0,index2: 1,size: 28,cacheable: true,built: true,optional: false,prefetched: false,chunks: [Object],assets: [],issuer: null,profile: undefined,failed: false,errors: 0,warnings: 0,reasons: [] },{ id: 1,identifier: ‘/Users/mac/web/node_modules/babel-loader/index.js?presets[]=es2015⪯sets[]=react!/Users/mac/web/src/js/main/index.js’,name: ‘./src/js/index/main.js’,index: 1,index2: 0,size: 193,cacheable: true,built: true,optional: false,prefetched: false,chunks: [Object],assets: [],issuer: ‘multi index/main’,profile: undefined,failed: false,errors: 0,warnings: 0,reasons: [Object],source: ” // 具体文件内容}],filteredModules: 0,children: [] }这里的chunks数组里，是对应会生成的文件，以及md5之后的文件名和路径，里面还有文件对应的chunkhash（每个文件不同，但如果你使用ExtractTextPlugin将css文件独立出来的话，它会与require它的js入口文件共享相同的chunkhash），而assets.hash则是统一的hash，对每个文件都一样。值得关注的是chunks里的每个文件，都有source这一项目，提供给开发者直接拿到源文件内容（主要是js，如果是css且使用ExtractTextPlugin，则请自行打印出来参考）。例子接下来，会以最近我写的一个插件 html-res-webpack-plugin 作为引子，来介绍基本的写插件原理。插件的逻辑就写在index.js里。

首先，将用户输入的参数在定好的函数中处理，HtmlResWebpackPlugin。然后，新增apply函数，在里面写好插件需要切入的webpack任务点。目前HtmlResWebpackPlugin插件只用到emit这个任务点，其它几个仅作为演示。第三步，调用addFileToWebpackAsset方法，写compilation.assets，借助webpack生成html文件。

第四步，在开发模式下(isWatch = true)，直接生成html，但在生产模式下(isWatch = true），插件会开始对静态资源（js，css）进行md5或者内联。第五步，调用findAssets方法是为了通过compilation.getStats()拿到的数据，去匹配对应的静态资源，还有找到对应的哈希(是chunkhash还是hash)。最六步，调用addAssets方法，对静态资源分别做内联或者md5文件处理。内联资源的函数是inlineRes,你会看到我使用了compilation.assets[hashFile].source() 及 compilation.assets[hashFile].children[1]._value。

前者是针对于js的，后者是针对使用了ExtractTextPlugin的css资源。最后一步，即是内联和md5完成后，再更新一下compilation.assets中对应生成html的source内容，才能正确地生成内联和md5后的内容。

自学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

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

springboot菜鸟教程

作为springboot的菜鸟，先了解几个配置：
1、mvc：
spring.mvc.async.request-timeout
设定async请求的超时时间，以毫秒为单位，如果没有设置的话，以具体实现的超时时间为准，比如tomcat的servlet3的话是10秒.
spring.mvc.date-format
设定日期的格式，比如dd/MM/yyyy.
spring.mvc.favicon.enabled
是否支持favicon.ico，默认3: true
spring.mvc.ignore-default-model-on-redirect
在重定向时是否忽略默认model的内容，默认为2、true：
spring.mvc.locale
指定使用的Locale.
spring.mvc.message-codes-resolver-format
指定message codes的格式化策略(PREFIX_ERROR_CODE,POSTFIX_ERROR_CODE)spring.mvc.view.prefix
指定mvc视图的前缀.
spring.mvc.view.suffix
指定mvc视图的后缀.

扩展资料：
JavaConfig 与常见 Annotation
1、JavaConfig
我们知道 bean 是 Spring IOC 中非常核心的概念，Spring 容器负责 bean 的生命周期的管理。在最初，Spring 使用 XML 配置文件的方式来描述 bean 的定义以及相互间的依赖关系。

但随着 Spring 的发展，越来越多的人对这种方式表示不满，因为 Spring 项目的所有业务类均以 bean 的形式配置在 XML 文件中，造成了大量的 XML 文件，使项目变得复杂且难以管理。

2、ComponentScan
@ComponentScan 注解对应 XML 配置形式中的 <context:component-scan>元素，表示启用组件扫描，Spring 会自动扫描所有通过注解配置的 bean，然后将其注册到 IOC 容器中。
我们可以通过 basePackages 等属性来指定 @ComponentScan 自动扫描的范围，如果不指定，默认从声明 @ComponentScan 所在类的 package 进行扫描。

菜鸟教程网的在线工具，请问该功能是用什么技术实现的？

网站网页的功能实现有静态的，也有交互性动态的，前者开发比较简单，而后者相对比较复杂；网站常用的开发语言有：ASP、JSP、PHP、HTML、DIV+CSS、JavaScript、Java等，有些相同的功能可以用不同的程序语言去开发，如果网页要实现的功能越多，那么所运用的开发语言当然随之增加；譬如：开发一个电子商务网站，则主要掌握的程序语言包括：PHP+MySQL、HTML、DIV+CSS、Flash、JavaScript。