Web前端技术 Web学习资料 Web学习路线 Web入门宝典

Myth丶恋晨 2022-05-19 03:48 344阅读 0赞

## 学习路线 ##

![这里写图片描述][70]

**第一章 核心**

**1.Node**

Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript  
运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎。相当与JDK。

Github:

[https://github.com/nodejs/node][https_github.com_nodejs_node]

官网教程：

[https://nodejs.org/en/][https_nodejs.org_en]

其他教程：

[http://nqdeng.github.io/7-days-nodejs/][http_nqdeng.github.io_7-days-nodejs]

[http://www.imooc.com/learn/348][http_www.imooc.com_learn_348]

**2.Npm**

NPM（node package  
manager）是 [Node.js][] 的包管理和分发工具。它类似于[PHP][]的Composer，Ruby的gem，[Python][]的pip，[Java][]的Maven……它可以让 [JavaScript][] 开发者能够更加轻松的共享代码和共用代码片段，并且通过npm管理你分享的代码也很方便快捷和简单。截至目前  
最新的稳定版 npm 是 3.3.12。

Github:

[https://github.com/npm/npm][https_github.com_npm_npm]

官方网站：

[https://docs.npmjs.com][https_docs.npmjs.com]

官方教程：

[https://docs.npmjs.com/getting-started][https_docs.npmjs.com_getting-started]

其他教程：

[https://segmentfault.com/a/1190000005799797][https_segmentfault.com_a_1190000005799797]

[http://www.cnblogs.com/kelsen/p/4947859.html][http_www.cnblogs.com_kelsen_p_4947859.html]

[http://www.runoob.com/nodejs/nodejs-npm.html][http_www.runoob.com_nodejs_nodejs-npm.html]

**3.Gulp**

gulp是基于Nodejs的自动任务运行器， 能自动化地完成  
javascript、coffee、sass、less、html/image、css  
等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。

Github:

[https://github.com/gulpjs/gulp][https_github.com_gulpjs_gulp]

官方网站：

[http://gulpjs.com/][http_gulpjs.com]

官方文档：

[https://github.com/gulpjs/gulp/blob/master/docs/API.md][https_github.com_gulpjs_gulp_blob_master_docs_API.md]

其他教程：

[http://www.cnblogs.com/2050/p/4198792.html][http_www.cnblogs.com_2050_p_4198792.html]

[http://www.tuicool.com/articles/FJVNZf][http_www.tuicool.com_articles_FJVNZf]

[https://www.cnblogs.com/Darren\_code/p/gulp.html][https_www.cnblogs.com_Darren_code_p_gulp.html]

**4.Bower**

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。其他一些建立在Bower基础之上的开发工具，如YeoMan和Grunt。

Bower与Npm：

简单的说，npm是进行后端开发中，使用的模块安装工具，而bower，是前端的模块安装工具。比如，在安装express，[socket.io][]时，当然使用的是npm，那么比如bootstrap，jquery等前端框架，需要使用bower，npm  
是伴随 Node.js 出现的一个包管理器，最开始只能支持 Node.js 的模块管理，但是后来，  
npm 官网经过一次改版，打出的口号是，javascript  
的包管理器，所以，其已经不在局限于是Node.js 的模块管理了，已经通用到了所有 js  
的包管理工具了，可以说，前后通吃了。bower  
的话，从一开始，就是专门为前端表现设计的包管理器，一切全部为前端考虑的。npm 和  
bower 的最大区别，就是 npm 支持嵌套地依赖管理，而  
bower只能支持扁平的依赖（嵌套的依赖，由程序员自己解决）。嵌套依赖，指的就是，你依赖的软件包，还有它自己的依赖，好像摘葡萄，一摘一大串。在服务器环境的时候，这并没什么关系，因为存储空间够大，一切代码都是本地运行，只要解决完依赖就行了，但是到了用户产品的浏览器里，就很成问题了，你不能让用户去下载好几M的js代码，那就太糟糕了。在这个情况下，就需要程序员自己手动解决用到的类库的嵌套依赖问题。比如确保各种各样的插件都依赖同一个版本的jQuery。为什么有很多项目  
bower 和 npm 都用呢，那是因为要用 bower 管理前端的包，而用 npm  
去管理一些后端的包和构建工具，例如，yeoman，grunt，gulp，jshint  
等等等等。所有的包管理器，都有自己的弊端，要视需要选用对自己的项目最合适的。

最新更新于2018年1月17日：

Bower已经过时，作者也不在进行维护，包管理工具已经是npm的天下，不过yarn也在快速崛起，值得研究。

Github:

[https://github.com/bower/bower][https_github.com_bower_bower]

官方网站：

[https://bower.io/][https_bower.io]

官方教程：

[https://bower.io/\#getting-started][https_bower.io_getting-started]

其他教程：

[https://segmentfault.com/a/1190000002971135][https_segmentfault.com_a_1190000002971135]

**5.Browserify**

browserify是一个编译工具,通过它可以在浏览器环境下像nodejs一样使用遵循commonjs规范的模块化编程。你可以使用browserify来组织代码,也可以使用第三方模块,不需要会nodejs,只需要用到node来编译,用到npm来安装包.browserify模块化的用法和node是一样的,所以npm上那些原本仅仅用于node环境的包,在浏览器环境里也一样能用。

Github:

[https://github.com/browserify/browserify][https_github.com_browserify_browserify]

官方网站：

[http://browserify.org/][http_browserify.org]

官方教程：

[https://github.com/substack/node-browserify\#usage][https_github.com_substack_node-browserify_usage]

学习资料

[http://www.tuicool.com/articles/IFvQ3qv][http_www.tuicool.com_articles_IFvQ3qv]

[https://segmentfault.com/a/1190000002941361][https_segmentfault.com_a_1190000002941361]

[http://www.cnblogs.com/liulangmao/p/4920534.html][http_www.cnblogs.com_liulangmao_p_4920534.html]

**6.Browsersync**

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是  
Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

Github:

[https://github.com/BrowserSync/browser-sync][https_github.com_BrowserSync_browser-sync]

教程：

[http://www.browsersync.cn/][http_www.browsersync.cn]

**7.Less-.less,Saas-.scss**

Sass,Less 是一门 CSS 预处理语言，它扩展了 CSS  
语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node  
或浏览器端。

less 官网：

[http://lesscss.org/][http_lesscss.org]

less中文网：

[http://lesscss.cn/][http_lesscss.cn]

sass官网：

[http://sass-lang.com/][http_sass-lang.com]

sass中文网：

[https://www.sass.hk/][https_www.sass.hk]

**8.Es6**

ECMAScript 6  
（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript  
2015.也就是说，ES6就是ES2015。

教程：

[http://es6.ruanyifeng.com/][http_es6.ruanyifeng.com]

[https://segmentfault.com/a/1190000004365693\#articleHeader6][https_segmentfault.com_a_1190000004365693_articleHeader6]

**9.Babel**

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。

Github:

[https://github.com/babel/babel][https_github.com_babel_babel]

官方网站：

[http://babeljs.io/][http_babeljs.io]

教程：

[http://babeljs.cn/][http_babeljs.cn]

[10.Q.js][http_babeljs.cn]

Promise是抽象异步处理对象以及对其进行各种操作的组件。JavaScript的异步执行都是以回调函数来执行的。Promise可以简化回调并提供链式异步调用。

Github:

[https://github.com/kriskowal/q][https_github.com_kriskowal_q]

教程：

[http://liubin.org/promises-book/][http_liubin.org_promises-book]

Github:

[https://github.com/kriskowal/q][https_github.com_kriskowal_q]

[11.Express.js][https_github.com_kriskowal_q]

基于 [Node.js][Node.js 1] 平台，快速、开放、极简的 web 后端开发框架。

Github:

[https://github.com/expressjs/express][https_github.com_expressjs_express]

官方网站：

[http://expressjs.com/][http_expressjs.com]

中文网：

[http://www.expressjs.com.cn/][http_www.expressjs.com.cn]

**12.Fontawesome**

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

Github:

[https://github.com/FortAwesome/Font-Awesome][https_github.com_FortAwesome_Font-Awesome]

官方地址：

[http://www.fontawesome.com.cn/][http_www.fontawesome.com.cn]

**13.yarn**

Yarn 是一个依赖管理工具。它能够管理你的代码，并与全世界的开发者分享代码。Yarn  
是高效、安全和可靠的，你完全可以安心使用，与npm属于同一类型的库

中文官方教程：

[https://yarn.bootcss.com/docs/getting-started.html][https_yarn.bootcss.com_docs_getting-started.html]

其他教程：

[http://mp.weixin.qq.com/s/FnCa0wqdHKQN4syrPIPSAA][http_mp.weixin.qq.com_s_FnCa0wqdHKQN4syrPIPSAA]

**14.ESLint**

提供一个插件化的javascript代码检测工具

Github：

[https://github.com/eslint/eslint][https_github.com_eslint_eslint]

官网：

[https://eslint.org/][https_eslint.org]

教程：

[http://eslint.cn/][http_eslint.cn]

**15.typescript**

TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的  
JavaScript 可以运行在任何浏览器上。TypeScript  
编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。

Github：

[https://github.com/Microsoft/TypeScript][https_github.com_Microsoft_TypeScript]

教程：

[https://www.tslang.cn/][https_www.tslang.cn]

[https://ts.xcatliu.com/introduction/what-is-typescript.html][https_ts.xcatliu.com_introduction_what-is-typescript.html]

**第二章 插件库**

<table> 
 <thead> 
  <tr> 
   <th><strong>类别</strong></th> 
   <th><strong>名称</strong></th> 
   <th><strong>Github</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>相册图库切换</td> 
   <td><strong>bootstrap-carousel</strong></td> 
   <td>&nbsp;</td> 
   <td>Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>jpicture</strong></td> 
   <td>&nbsp;</td> 
   <td>一款兼容主流浏览器的基于jQuery的图片切换插件。简单方便，轻松快捷，好用实用</td> 
  </tr> 
  <tr> 
   <td>数学库</td> 
   <td><strong>mathjs</strong></td> 
   <td><a href="https://github.com/silviomoreto/bootstrap-select/" rel="nofollow">https://github.com/</a><strong>josdejong/mathjs</strong></td> 
   <td>是一个广泛应用于JavaScript 和 Node.js的数学库，它的特点是灵活表达式解析器，支持符号计算，内置大量函数与常量，并提供集成解决方案来处理不同的数据类型，如数字，大数字，复数，分数，单位和矩阵。</td> 
  </tr> 
  <tr> 
   <td>下拉框</td> 
   <td><strong>bootstrap-select</strong></td> 
   <td><a href="https://github.com/silviomoreto/bootstrap-select/" rel="nofollow">https://github.com/silviomoreto/bootstrap-select/</a></td> 
   <td>bootstrap风格的下拉框组件，提供丰富的下拉框功能</td> 
  </tr> 
  <tr> 
   <td>加解密</td> 
   <td><strong>crypto-js</strong></td> 
   <td><a href="https://github.com/brix/crypto-js" rel="nofollow">https://github.com/brix/crypto-js</a></td> 
   <td>一个加解密的JavaScript库</td> 
  </tr> 
  <tr> 
   <td>发布/订阅库</td> 
   <td><strong>PubSubJS</strong></td> 
   <td><a href="https://github.com/mroderick/PubSubJS" rel="nofollow">https://github.com/mroderick/PubSubJS</a></td> 
   <td>可以订阅的息，发布消息（通过一个绑定项）和消息退订</td> 
  </tr> 
  <tr> 
   <td>新手指引</td> 
   <td><strong>Intro.js</strong></td> 
   <td><a href="https://github.com/usablica/intro.js/" rel="nofollow">https://github.com/usablica/intro.js/</a></td> 
   <td>新手指引的一个框架库， Step-by-step guide and feature introduction</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>Driver.js</strong></td> 
   <td><a href="https://github.com/kamranahmedse/driver.js" rel="nofollow">https://github.com/kamranahmedse/driver.js</a></td> 
   <td>新手指引的一个框架库</td> 
  </tr> 
  <tr> 
   <td>ajax 异步请求 api</td> 
   <td><strong>isomorphic-fetch</strong></td> 
   <td><a href="https://github.com/matthew-andrews/isomorphic-fetch" rel="nofollow">https://github.com/matthew-andrews/isomorphic-fetch</a></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>fetch-jsonp </strong></td> 
   <td><a href="https://github.com/camsong/fetch-jsonp" rel="nofollow">https://github.com/camsong/fetch-jsonp</a></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>axios</strong></td> 
   <td><a href="https://github.com/axios/axios" rel="nofollow">https://github.com/axios/axios</a></td> 
   <td>类似于jquery的ajax</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>fetch</strong></td> 
   <td><a href="https://github.com/github/fetch" rel="nofollow">https://github.com/github/fetch</a></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>验证</td> 
   <td><strong>async-validator</strong></td> 
   <td><a href="https://github.com/yiminghe/async-validator" rel="nofollow">https://github.com/yiminghe/async-validator</a></td> 
   <td>async-validator 是一个异步验证的库，需要传入要验证的数据和验证规则</td> 
  </tr> 
  <tr> 
   <td>图片查看器</td> 
   <td><strong>viewerjs</strong></td> 
   <td><a href="https://github.com/fengyuanchen/viewerjs" rel="nofollow">https://github.com/fengyuanchen/viewerjs</a></td> 
   <td>Viewer.js 是一款强大的图片查看器，像门户网站一般都会有各自的图片查看器，如果您正需要一款强大的图片查看器，也许 Viewer.js 是一个很好的选择 官方网站： <a href="http://fengyuanchen.github.io/viewerjs/" rel="nofollow">http://fengyuanchen.github.io/viewerjs/</a></td> 
  </tr> 
  <tr> 
   <td>视频播放器</td> 
   <td><strong>video.js</strong></td> 
   <td><a href="https://github.com/videojs/video.js" rel="nofollow">https://github.com/videojs/video.js</a></td> 
   <td>Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器</td> 
  </tr> 
  <tr> 
   <td>弹窗提示插件</td> 
   <td><strong>pnotify </strong></td> 
   <td><a href="https://github.com/sciactive/pnotify" rel="nofollow">https://github.com/sciactive/pnotify</a></td> 
   <td>一个仿桌面弹窗的提示插件</td> 
  </tr> 
  <tr> 
   <td>日期时间选择器插件</td> 
   <td><strong>bootstrap-datepicker</strong></td> 
   <td><a href="https://github.com/uxsolutions/bootstrap-datepicker" rel="nofollow">https://github.com/uxsolutions/bootstrap-datepicker</a></td> 
   <td>bootstrap的日期开源组件 官方文档地址： <a href="http://bootstrap-datepicker.readthedocs.io/en/latest/index.html" rel="nofollow">http://bootstrap-datepicker.readthedocs.io/en/latest/index.html</a> 中文网文档： <a href="http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm" rel="nofollow">http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>datetimepicker</strong></td> 
   <td><a href="http://github.com/smalot/bootstrap-datetimepicker" rel="nofollow">github.com/smalot/bootstrap-datetimepicker</a></td> 
   <td>bootstrap的时间开源组件 官方网站： <a href="http://www.bootcss.com/p/bootstrap-datetimepicker/" rel="nofollow">http://www.bootcss.com/p/bootstrap-datetimepicker/</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>Daterangepicker</strong></td> 
   <td><a href="https://github.com/dangrossman/bootstrap-daterangepicker" rel="nofollow">https://github.com/dangrossman/bootstrap-daterangepicker</a></td> 
   <td>时间区间范围选择插件 官方网站： <a href="http://www.daterangepicker.com/" rel="nofollow">http://www.daterangepicker.com/</a> 其他文档： option文档：<a href="http://bootstrap-datepicker.readthedocs.io/en/latest/options.html" rel="nofollow">http://bootstrap-datepicker.readthedocs.io/en/latest/options.html</a></td> 
  </tr> 
  <tr> 
   <td>城市选择插件</td> 
   <td><strong>City-Picker.js</strong></td> 
   <td><a href="https://github.com/tshi0912/city-picker" rel="nofollow">https://github.com/tshi0912/city-picker</a></td> 
   <td>城市三级联动选择器。</td> 
  </tr> 
  <tr> 
   <td>3D</td> 
   <td><strong>three.js</strong></td> 
   <td><a href="https://github.com/mrdoob/three.js" rel="nofollow">https://github.com/mrdoob/three.js</a></td> 
   <td>JavaScript 3D library 官方网站： <a href="https://threejs.org/" rel="nofollow">https://threejs.org/</a></td> 
  </tr> 
  <tr> 
   <td>数字运算，格式化库</td> 
   <td><strong>numeral</strong></td> 
   <td><a href="https://github.com/adamwdraper/Numeral-js" rel="nofollow">https://github.com/adamwdraper/Numeral-js</a></td> 
   <td>Numeral.js 是一个用于格式化和数字四则运算的js 库，支持包括中文在类的17种语言 官方网站： <a href="http://numeraljs.com/" rel="nofollow">http://numeraljs.com/</a> 相关资料： <a href="https://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828994.html" rel="nofollow">https://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828994.html</a></td> 
  </tr> 
  <tr> 
   <td>数字滚动动画</td> 
   <td><strong>countUp</strong></td> 
   <td><a href="https://github.com/inorganik/countUp.js/" rel="nofollow">https://github.com/inorganik/countUp.js/</a></td> 
   <td>数字滚动插件</td> 
  </tr> 
  <tr> 
   <td>数据模拟</td> 
   <td><strong>mock.js</strong></td> 
   <td><a href="https://github.com/nuysoft/Mock" rel="nofollow">https://github.com/nuysoft/Mock</a></td> 
   <td>方便前端生成模拟数据，它基于 数据模板 生成模拟数据，基于 HTML模板 生成模拟数据，拦截并模拟 ajax 请求。 Github: <a href="https://github.com/nuysoft/Mock" rel="nofollow">https://github.com/nuysoft/Mock</a> 官方地址： <a href="http://mockjs.com/" rel="nofollow">http://mockjs.com</a></td> 
  </tr> 
  <tr> 
   <td>表格插件</td> 
   <td><strong>Datatables.js</strong></td> 
   <td><a href="https://github.com/DataTables/DataTables" rel="nofollow">https://github.com/DataTables/DataTables</a></td> 
   <td>Datatables是一款基于jQuery表格插件。 Github: <a href="https://github.com/DataTables/DataTables" rel="nofollow">https://github.com/DataTables/DataTables</a> 官方网站： <a href="https://www.datatables.net/" rel="nofollow">https://www.datatables.net/</a></td> 
  </tr> 
  <tr> 
   <td>时间插件</td> 
   <td><strong>moment.js</strong></td> 
   <td><a href="https://github.com/moment/moment" rel="nofollow">https://github.com/moment/moment</a></td> 
   <td>JavaScript 日期处理类库。</td> 
  </tr> 
  <tr> 
   <td>图表插件</td> 
   <td><strong>echarts</strong></td> 
   <td><a href="https://github.com/ecomfe/echarts" rel="nofollow">https://github.com/ecomfe/echarts</a></td> 
   <td>图标类控件。 官方地址： <a href="http://echarts.baidu.com/index.html" rel="nofollow">http://echarts.baidu.com/index.html</a></td> 
  </tr> 
  <tr> 
   <td>模板引擎</td> 
   <td><strong>Handlebars.js</strong></td> 
   <td><a href="https://github.com/wycats/handlebars.js/" rel="nofollow">https://github.com/wycats/handlebars.js/</a></td> 
   <td>Handlebars.js是一套js模版引擎，是一款基于Jquery的插件，以json对象为数据源，支持逻辑判断、循环等操作，同时具有非常好的扩展性，体积60KB左右 教程： \http://keenwon.com/992.html <a href="http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine//" rel="nofollow">http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/\</a>&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>jade(pug)</strong></td> 
   <td><a href="https://github.com/pugjs/pug" rel="nofollow">https://github.com/pugjs/pug</a></td> 
   <td>jade是一套js模版引擎，现已改名pug 官方网站： <a href="http://jade-lang.com/" rel="nofollow">http://jade-lang.com/</a> 教程： \http://cnodejs.org/topic/5368adc5cf738dd6090060f2 <a href="https://www.w3cplus.com/html/how-to-use-jade.html/" rel="nofollow">https://www.w3cplus.com/html/how-to-use-jade.html\</a>&gt;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>dot.js</strong></td> 
   <td><a href="https://github.com/olado/doT" rel="nofollow">https://github.com/olado/doT</a></td> 
   <td>一个适用于混合开发的模板引擎</td> 
  </tr> 
  <tr> 
   <td>npm相关</td> 
   <td><a href="https://github.com/kimmobrunfeldt/concurrently" rel="nofollow">concurrently</a></td> 
   <td><a href="https://github.com/kimmobrunfeldt/concurrently" rel="nofollow">https://github.com/kimmobrunfeldt/concurrently</a></td> 
   <td>A CLI tool to run multiple npm-scripts in parallel or sequential.</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>npm-run-all</strong></td> 
   <td><a href="https://github.com/mysticatea/npm-run-all" rel="nofollow">https://github.com/mysticatea/npm-run-all</a></td> 
   <td>A CLI tool to run multiple npm-scripts in parallel or sequential.</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**第三章 gulp自动化构建组件（FEZ项目实践）**

<table> 
 <thead> 
  <tr> 
   <th><strong>名称</strong></th> 
   <th><strong>Github</strong></th> 
   <th><strong>说明</strong></th> 
   <th><strong>相关教程</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>node-hbsfy</strong></td> 
   <td><a href="https://github.com/epeli/node-hbsfy" rel="nofollow">https://github.com/epeli/node-hbsfy</a></td> 
   <td>borwserify 支持 require handlebars模板</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>jadeify</strong></td> 
   <td><a href="https://github.com/domenic/jadeify" rel="nofollow">https://github.com/domenic/jadeify</a></td> 
   <td>jade模板</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>node-glob</strong></td> 
   <td><a href="https://github.com/isaacs/node-glob" rel="nofollow">https://github.com/isaacs/node-glob</a></td> 
   <td>使用glob来返回目录中所有子文件（文件或文件夹）</td> 
   <td><a href="http://www.cnblogs.com/liulangmao/p/4552339.html" rel="nofollow">http://www.cnblogs.com/liulangmao/p/4552339.html</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>glob通配符释义：<a href="http://blog.csdn.net/zhuchuji/article/details/51297819" rel="nofollow">http://blog.csdn.net/zhuchuji/article/details/51297819</a></td> 
  </tr> 
  <tr> 
   <td><strong>gulp-inject</strong></td> 
   <td><a href="https://github.com/klei/gulp-inject" rel="nofollow">https://github.com/klei/gulp-inject</a></td> 
   <td>CSS和WebComponent 注入插件，将它们注入到index.html文件中（官方解释），把css，js这些静态文件注入到html文件中，不需要手动添加。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>main-bower-files</strong></td> 
   <td><a href="https://github.com/ck86/main-bower-files" rel="nofollow">https://github.com/ck86/main-bower-files</a></td> 
   <td>通过读取并分析bower.json文件里override属性里main路径下定义的插件及相关依赖，返回一个文件数组</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>vinyl-buffer</strong></td> 
   <td><a href="https://github.com/hughsk/vinyl-buffer" rel="nofollow">https://github.com/hughsk/vinyl-buffer</a></td> 
   <td>将虚拟的流文件转换为可以使用的的buffer文件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-if</strong></td> 
   <td><a href="https://github.com/robrich/gulp-if" rel="nofollow">https://github.com/robrich/gulp-if</a></td> 
   <td>为功能执行添加条件判断，跟程序语言中的if是相同语义</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>browserify-shim</strong></td> 
   <td><a href="https://github.com/thlorenz/browserify-shim" rel="nofollow">https://github.com/thlorenz/browserify-shim</a></td> 
   <td>browserify-shim 是一个转换工具,它会读取 package.json 文件的 “browserify-shim” 属性，将不遵循node风格的commonjs的输出写法的模块包转换成browserify可以读懂的模块包</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>babel-polyfill</strong></td> 
   <td><a href="https://github.com/babel/babel/tree/master/packages/babel-polyfill" rel="nofollow">https://github.com/babel/babel/tree/master/packages/babel-polyfill</a></td> 
   <td>IE8兼容包</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>vueify</strong></td> 
   <td><a href="https://github.com/babel/babel/tree/master/packages/babel-polyfill" rel="nofollow">https://github.com/babel/babel/tree/master/packages/babel-polyfill</a></td> 
   <td>在browserify中编辑vue代码</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>watchify</strong></td> 
   <td><a href="https://github.com/browserify/watchify" rel="nofollow">https://github.com/browserify/watchify</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp.spritesmith</strong></td> 
   <td><a href="https://github.com/twolfson/gulp.spritesmith" rel="nofollow">https://github.com/twolfson/gulp.spritesmith</a></td> 
   <td>小图（图标）合成精灵图，拼接图片并生成样式表，并且还能输出SASS,Stylus,LESS甚至是JSON</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-filter</strong></td> 
   <td><a href="https://github.com/sindresorhus/gulp-filter" rel="nofollow">https://github.com/sindresorhus/gulp-filter</a></td> 
   <td>在虚拟文件流中过滤特定的文件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-order</strong></td> 
   <td><a href="https://github.com/sirlantis/gulp-order" rel="nofollow">https://github.com/sirlantis/gulp-order</a></td> 
   <td>The gulp plugin gulp-order allows you to reorder a stream of files using the same syntax as of gulp.src，这是官方定义，简单来说，就是按给定的顺序整理需要处理的文件集。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-concat</strong></td> 
   <td><a href="https://github.com/contra/gulp-concat" rel="nofollow">https://github.com/contra/gulp-concat</a></td> 
   <td>合并js文件，比如合并多个js到一个文件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-concat-css</strong></td> 
   <td><a href="https://github.com/mariocasciaro/gulp-concat-css" rel="nofollow">https://github.com/mariocasciaro/gulp-concat-css</a></td> 
   <td>合并css文件，比如合并多个css到一个文件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>rework</strong></td> 
   <td><a href="https://github.com/reworkcss/rework" rel="nofollow">https://github.com/reworkcss/rework</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>del</strong></td> 
   <td><a href="https://github.com/sindresorhus/del" rel="nofollow">https://github.com/sindresorhus/del</a></td> 
   <td>使用glob匹配规则来删除文件或文件夹</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-less</strong></td> 
   <td><a href="https://github.com/stevelacy/gulp-less" rel="nofollow">https://github.com/stevelacy/gulp-less</a></td> 
   <td>编译less文件的gulp插件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-sass</strong></td> 
   <td><a href="https://github.com/dlmanning/gulp-sass" rel="nofollow">https://github.com/dlmanning/gulp-sass</a></td> 
   <td>编译sass文件的gulp插件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-postcss</strong></td> 
   <td><a href="https://github.com/postcss/gulp-postcss" rel="nofollow">https://github.com/postcss/gulp-postcss</a></td> 
   <td>PostCSS把扩展的语法和特性（比如变量，混入，未来css预发，内联图像等）转换成现代的浏览器友好的CSS</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-usemin（不推荐使用）</strong></td> 
   <td><a href="https://github.com/pursual/gulp-usemin" rel="nofollow">https://github.com/pursual/gulp-usemin</a></td> 
   <td>根据预先在html文件（或者其它模板/视图中的文件）中声明好的blocks来执行一系列任务（例如合并文件并重全名、排除一些只在开发过程中引入的脚本以及将css和js中的代码提取出来内嵌在html文件中）来处理未优化的样式和脚本</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-htmlmin</strong></td> 
   <td><a href="https://github.com/jonschlinkert/gulp-htmlmin" rel="nofollow">https://github.com/jonschlinkert/gulp-htmlmin</a></td> 
   <td>压缩html，可以压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-imagemin</strong></td> 
   <td><a href="https://github.com/sindresorhus/gulp-imagemin" rel="nofollow">https://github.com/sindresorhus/gulp-imagemin</a></td> 
   <td>压缩常见的图片格式，比如PNG，JPEG，GIF，甚至是SVG图片</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-clean-css</strong></td> 
   <td><a href="https://github.com/scniro/gulp-clean-css" rel="nofollow">https://github.com/scniro/gulp-clean-css</a></td> 
   <td>压缩css文件，减小文件大小，并给引用url添加版本号避免缓存</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-uglify</strong></td> 
   <td><a href="https://github.com/terinjokes/gulp-uglify" rel="nofollow">https://github.com/terinjokes/gulp-uglify</a></td> 
   <td>专业压缩js文件，减小文件大小</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-rename</strong></td> 
   <td><a href="https://github.com/hparra/gulp-rename" rel="nofollow">https://github.com/hparra/gulp-rename</a></td> 
   <td>修改文件名称，比如有时我们需要把app.js改成app.min.js</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-util</strong></td> 
   <td><a href="https://github.com/gulpjs/gulp-util" rel="nofollow">https://github.com/gulpjs/gulp-util</a></td> 
   <td>gulp工具包，可以打log啊，提示语颜色啊，提示音啊等等一些操作，不过一般就是用来打印日志</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-rev</strong></td> 
   <td><a href="https://github.com/sindresorhus/gulp-rev" rel="nofollow">https://github.com/sindresorhus/gulp-rev</a></td> 
   <td>根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-rev-replace</strong></td> 
   <td><a href="https://github.com/jamesknelson/gulp-rev-replace" rel="nofollow">https://github.com/jamesknelson/gulp-rev-replace</a></td> 
   <td>配合 <a href="https://www.npmjs.com/package/gulp-rev" rel="nofollow">gulp-rev</a> 使用，拿到生成的 manifest。json 后替换对应的文件名称</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-sourcemaps</strong></td> 
   <td><a href="https://github.com/gulp-sourcemaps/gulp-sourcemaps" rel="nofollow">https://github.com/gulp-sourcemaps/gulp-sourcemaps</a></td> 
   <td>处理 JavaScript 时生成 SourceMap</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-svg-symbols</strong></td> 
   <td><a href="https://github.com/Hiswe/gulp-svg-symbols" rel="nofollow">https://github.com/Hiswe/gulp-svg-symbols</a></td> 
   <td>合并SVG图标</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-inject-string</strong></td> 
   <td><a href="https://github.com/mikehazell/gulp-inject-string" rel="nofollow">https://github.com/mikehazell/gulp-inject-string</a></td> 
   <td>在页面中插入内容</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-replace</strong></td> 
   <td><a href="https://github.com/lazd/gulp-replace" rel="nofollow">https://github.com/lazd/gulp-replace</a></td> 
   <td>字符串替换的gulp 插件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-flatten</strong></td> 
   <td><a href="https://github.com/armed/gulp-flatten" rel="nofollow">https://github.com/armed/gulp-flatten</a></td> 
   <td>删除或替换文件的相对路径</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>lazypipe</strong></td> 
   <td><a href="https://github.com/OverZealous/lazypipe" rel="nofollow">https://github.com/OverZealous/lazypipe</a></td> 
   <td>Lazypipe允许您创建一个不可变的、延迟初始化的管道。能在需要重用部分管道的环境中使用，比如gulp。它可以创建一些工厂来把你经常使用的功能 stream 链分离出来，变成一个通用插件功能链，然后放入需要这个链的链路上</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>event-stream</strong></td> 
   <td><a href="https://github.com/dominictarr/event-stream" rel="nofollow">https://github.com/dominictarr/event-stream</a></td> 
   <td>流操作，还不大清楚其原理</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-autoprefixer</strong></td> 
   <td><a href="https://github.com/sindresorhus/gulp-autoprefixer" rel="nofollow">https://github.com/sindresorhus/gulp-autoprefixer</a></td> 
   <td>给CSS添加前缀，解决某些CSS属性不是标准属性，有各种浏览器前缀的情况，灰常有用</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-posthtml</strong></td> 
   <td><a href="https://github.com/posthtml/gulp-posthtml" rel="nofollow">https://github.com/posthtml/gulp-posthtml</a></td> 
   <td>html预处理 html中的rem转换等</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>postcss-pxtorem</strong></td> 
   <td><a href="https://github.com/cuth/postcss-pxtorem" rel="nofollow">https://github.com/cuth/postcss-pxtorem</a></td> 
   <td>CSS 转换 `px` 为 `rem`</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>envify</strong></td> 
   <td><a href="https://github.com/hughsk/envify" rel="nofollow">https://github.com/hughsk/envify</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>vinyl-source-stream</strong></td> 
   <td><a href="https://github.com/hughsk/vinyl-source-stream" rel="nofollow">https://github.com/hughsk/vinyl-source-stream</a></td> 
   <td>在gulp或虚拟文件的流开始使用传统的文本流，对现有的npm流有更好的互操作性</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>babelify</strong></td> 
   <td><a href="https://github.com/babel/babelify" rel="nofollow">https://github.com/babel/babelify</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a href="https://github.com/davidguttman/cssify" rel="nofollow">cssify</a></td> 
   <td><a href="https://github.com/davidguttman/cssify" rel="nofollow">https://github.com/davidguttman/cssify</a></td> 
   <td>borwserify 支持 require css样式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>lessify</strong></td> 
   <td><a href="https://github.com/dstokes/lessify" rel="nofollow">https://github.com/dstokes/lessify</a></td> 
   <td>borwserify 支持 require less样式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>preprocessify</strong></td> 
   <td><a href="https://github.com/bibliolabs/preprocessify" rel="nofollow">https://github.com/bibliolabs/preprocessify</a></td> 
   <td>条件注释/主要区分开发和上线环境，是否加载mock数据</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>lodash</strong></td> 
   <td><a href="https://github.com/lodash/lodash" rel="nofollow">https://github.com/lodash/lodash</a></td> 
   <td>具有一致接口、模块化、高性能等特性的 JavaScript 扩展工具库</td> 
   <td>官方网站：<a href="https://lodash.com/" rel="nofollow">https://lodash.com/</a></td> 
  </tr> 
  <tr> 
   <td><strong>gulp-size</strong></td> 
   <td><a href="https://github.com/sindresorhus/gulp-size" rel="nofollow">https://github.com/sindresorhus/gulp-size</a></td> 
   <td>压缩字体文件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>imagemin-pngquant</strong></td> 
   <td>&nbsp;</td> 
   <td>压缩png图片文件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-rev-delete-original</strong></td> 
   <td><a href="https://github.com/nib-health-funds/gulp-rev-delete-original" rel="nofollow">https://github.com/nib-health-funds/gulp-rev-delete-original</a></td> 
   <td>删除由gulp-rev或gulp-rev-all重写的原始文件</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-rev-css-url</strong></td> 
   <td><a href="https://github.com/galkinrost/gulp-rev-css-url" rel="nofollow">https://github.com/galkinrost/gulp-rev-css-url</a></td> 
   <td>提取样式中的相对路径</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-strip-debug</strong></td> 
   <td><a href="https://github.com/sindresorhus/gulp-strip-debug" rel="nofollow">https://github.com/sindresorhus/gulp-strip-debug</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>gulp-cdnify</strong></td> 
   <td><a href="https://github.com/kaiqigong/gulp-cdnify" rel="nofollow">https://github.com/kaiqigong/gulp-cdnify</a></td> 
   <td>CDN地址替换</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**第四章 React**

<table> 
 <thead> 
  <tr> 
   <th><strong>组件</strong></th> 
   <th><strong>概念</strong></th> 
   <th><strong>标题</strong></th> 
   <th><strong>链接</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>react</strong></td> 
   <td>&nbsp;</td> 
   <td>react官方文档</td> 
   <td><a href="https://reactjs.org/docs/hello-world.html" rel="nofollow">https://reactjs.org/docs/hello-world.html</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>react基础入门</td> 
   <td><a href="http://www.ruanyifeng.com/blog/2015/03/react.html" rel="nofollow">http://www.ruanyifeng.com/blog/2015/03/react.html</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>谈谈 react 中的 key</td> 
   <td><a href="https://juejin.im/post/5a7c04746fb9a063461fe700?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5a7c04746fb9a063461fe700?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>【第1200期】React 是怎样炼成的</td> 
   <td><a href="https://segmentfault.com/a/1190000013365426" rel="nofollow">https://segmentfault.com/a/1190000013365426</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>【第1269期】基于React实战分享WeatherApp</td> 
   <td><a href="https://github.com/alivebao/weather_app" rel="nofollow">https://github.com/alivebao/weather_app</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>【第1273期】React性能优化-虚拟Dom原理浅析</td> 
   <td><a href="http://wuyuying.com/blog/archives/optimizing-react-virtual-dom-explained/" rel="nofollow">http://wuyuying.com/blog/archives/optimizing-react-virtual-dom-explained/</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>【第1281期】React 16 加载性能优化指南</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/37148975" rel="nofollow">https://zhuanlan.zhihu.com/p/37148975</a></td> 
  </tr> 
  <tr> 
   <td><strong>react-route</strong></td> 
   <td>&nbsp;</td> 
   <td>教程</td> 
   <td><a href="https://reacttraining.com/react-router/web/example/basic" rel="nofollow">https://reacttraining.com/react-router/web/example/basic</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>基础入门</td> 
   <td><a href="http://www.ruanyifeng.com/blog/2016/05/react_router.html" rel="nofollow">http://www.ruanyifeng.com/blog/2016/05/react_router.html</a></td> 
  </tr> 
  <tr> 
   <td><strong>react-router-dom</strong></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>react-dnd</strong></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>react-draggable</strong></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><strong>react-redux</strong></td> 
   <td>&nbsp;</td> 
   <td>前面有一个Redux，我们去撩(聊)一下它</td> 
   <td><a href="https://juejin.im/post/5adf0b4df265da0b8070620a?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5adf0b4df265da0b8070620a?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td><strong>nerv</strong></td> 
   <td>一个基于 Virtual DOM 的类 React 组件框架（jd自己的凹凸实验室研发的）</td> 
   <td>官方地址</td> 
   <td><a href="https://nerv.aotu.io/" rel="nofollow">https://nerv.aotu.io/</a></td> 
  </tr> 
  <tr> 
   <td><strong>react-native</strong></td> 
   <td>&nbsp;</td> 
   <td>React-Native从零搭建App</td> 
   <td><a href="https://juejin.im/post/5a9f93d96fb9a028d2077c19?utm_medium=react&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5a9f93d96fb9a028d2077c19?utm_medium=react&amp;utm_source=weixinqun</a></td> 
  </tr> 
 </tbody> 
</table>

**react组件轮子集合（摘自antd）**

<table> 
 <thead> 
  <tr> 
   <th><strong>类型</strong></th> 
   <th><strong>组件</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>UI库</td> 
   <td><a href="https://ant.design/index-cn" rel="nofollow">antd</a></td> 
  </tr> 
  <tr> 
   <td>路由</td> 
   <td><a href="https://github.com/ReactTraining/react-router" rel="nofollow">react-router</a></td> 
  </tr> 
  <tr> 
   <td>布局</td> 
   <td><a href="https://github.com/whoisandy/react-blocks" rel="nofollow">react-blocks</a></td> 
  </tr> 
  <tr> 
   <td>拖拽</td> 
   <td><a href="https://github.com/gaearon/react-dnd" rel="nofollow">react-dnd</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/mzabriskie/react-draggable" rel="nofollow">react-draggable</a></td> 
  </tr> 
  <tr> 
   <td>代码编辑器</td> 
   <td><a href="https://github.com/scniro/react-codemirror2" rel="nofollow">react-codemirror2</a></td> 
  </tr> 
  <tr> 
   <td>富文本编辑器</td> 
   <td><a href="https://github.com/zenoamaro/react-quill" rel="nofollow">react-quill</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/jpuri/react-draft-wysiwyg" rel="nofollow">react-draft-wysiwyg</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/leejaen/react-lz-editor" rel="nofollow">react-lz-editor</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/margox/braft-editor" rel="nofollow">braft-editor</a></td> 
  </tr> 
  <tr> 
   <td>拾色器</td> 
   <td><a href="https://github.com/react-component/color-picker" rel="nofollow">rc-color-picker</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="http://casesandberg.github.io/react-color/" rel="nofollow">react-color</a></td> 
  </tr> 
  <tr> 
   <td>响应式</td> 
   <td><a href="https://github.com/contra/react-responsive" rel="nofollow">react-responsive</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/ReactTraining/react-media" rel="nofollow">react-media</a></td> 
  </tr> 
  <tr> 
   <td>复制到剪贴板</td> 
   <td><a href="https://github.com/nkbt/react-copy-to-clipboard" rel="nofollow">react-copy-to-clipboard</a></td> 
  </tr> 
  <tr> 
   <td>页面 meta 属性</td> 
   <td><a href="https://github.com/nfl/react-helmet" rel="nofollow">react-helmet</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/gaearon/react-document-title" rel="nofollow">react-document-title</a></td> 
  </tr> 
  <tr> 
   <td>图标</td> 
   <td><a href="https://github.com/andreypopp/react-fa" rel="nofollow">react-fa</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/gorangajic/react-icons" rel="nofollow">react-icons</a></td> 
  </tr> 
  <tr> 
   <td>二维码</td> 
   <td><a href="https://github.com/zpao/qrcode.react" rel="nofollow">qrcode.react</a></td> 
  </tr> 
  <tr> 
   <td>可视化图表</td> 
   <td><a href="https://github.com/alibaba/BizCharts" rel="nofollow">BizCharts</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/recharts/recharts/" rel="nofollow">recharts</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/FormidableLabs/victory" rel="nofollow">victory</a></td> 
  </tr> 
  <tr> 
   <td>顶部进度条</td> 
   <td><a href="https://github.com/rstacruz/nprogress" rel="nofollow">nprogress</a></td> 
  </tr> 
  <tr> 
   <td>应用国际化</td> 
   <td><a href="https://github.com/yahoo/react-intl" rel="nofollow">react-intl</a></td> 
  </tr> 
  <tr> 
   <td>代码高亮</td> 
   <td><a href="https://github.com/conorhastings/react-syntax-highlighter" rel="nofollow">react-syntax-highlighter</a></td> 
  </tr> 
  <tr> 
   <td>Markdown 渲染</td> 
   <td><a href="http://rexxars.github.io/react-markdown/" rel="nofollow">react-markdown</a></td> 
  </tr> 
  <tr> 
   <td>无限滚动</td> 
   <td><a href="https://github.com/bvaughn/react-virtualized" rel="nofollow">react-virtualized</a></td> 
  </tr> 
  <tr> 
   <td>地图</td> 
   <td><a href="https://github.com/tomchentw/react-google-maps" rel="nofollow">react-google-maps</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/istarkov/google-map-react" rel="nofollow">google-map-react</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><a href="https://github.com/ElemeFE/react-amap" rel="nofollow">react-amap 高德</a></td> 
  </tr> 
  <tr> 
   <td>Emoji</td> 
   <td><a href="https://github.com/missive/emoji-mart" rel="nofollow">emoji-mart</a></td> 
  </tr> 
 </tbody> 
</table>

**第五章 Vue：**

<table> 
 <thead> 
  <tr> 
   <th><strong>标题</strong></th> 
   <th><strong>链接</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[译] Vue让我喜欢的10个方面</td> 
   <td><a href="https://juejin.im/post/5a7bfbe8f265da4e8b2fcc50?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5a7bfbe8f265da4e8b2fcc50?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>2018 年你需要知道的 Vue.js 组件库，完善你的应用开发</td> 
   <td><a href="http://blog.csdn.net/VhWfR2u02Q/article/details/78859493" rel="nofollow">http://blog.csdn.net/VhWfR2u02Q/article/details/78859493</a></td> 
  </tr> 
  <tr> 
   <td>基于vue的browserify的项目模板</td> 
   <td><a href="https://github.com/keepfool/vue-tutorials/tree/master/05.OfficialTemplates/my-browserify-simple-demo" rel="nofollow">https://github.com/keepfool/vue-tutorials/tree/master/05.OfficialTemplates/my-browserify-simple-demo</a></td> 
  </tr> 
  <tr> 
   <td>手摸手，带你用vue撸后台 系列一</td> 
   <td><a href="https://juejin.im/post/59097cd7a22b9d0065fb61d2" rel="nofollow">https://juejin.im/post/59097cd7a22b9d0065fb61d2</a></td> 
  </tr> 
  <tr> 
   <td>【第1244期】详解vue中的 Object.create(null)</td> 
   <td><a href="https://mp.weixin.qq.com/s/bPpPnzmOJtBdEmdcLeyHQw" rel="nofollow">https://mp.weixin.qq.com/s/bPpPnzmOJtBdEmdcLeyHQw</a></td> 
  </tr> 
  <tr> 
   <td>VUE组件汇总</td> 
   <td><a href="https://juejin.im/post/5af16a2cf265da0b8636353b" rel="nofollow">https://juejin.im/post/5af16a2cf265da0b8636353b</a></td> 
  </tr> 
  <tr> 
   <td>【第1272期】从零开始搭建脚手架</td> 
   <td><a href="https://mp.weixin.qq.com/s/m8atIJzGEGnOV_utpijG2g" rel="nofollow">https://mp.weixin.qq.com/s/m8atIJzGEGnOV_utpijG2g</a></td> 
  </tr> 
  <tr> 
   <td>【第1313期】一个Vue页面的内存泄露分析</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/38448752" rel="nofollow">https://zhuanlan.zhihu.com/p/38448752</a></td> 
  </tr> 
  <tr> 
   <td>【第1322期】Vue CLI 3 配置中 Modern mode 是什么</td> 
   <td><a href="https://mp.weixin.qq.com/s/X_kl6AJ0Q_9BJk0_eRSM1w" rel="nofollow">https://mp.weixin.qq.com/s/X_kl6AJ0Q_9BJk0_eRSM1w</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**第六章 Webpack：**

<table> 
 <thead> 
  <tr> 
   <th><strong>标题</strong></th> 
   <th><strong>链接</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>基础入门</td> 
   <td><a href="http://www.jianshu.com/p/42e11515c10f" rel="nofollow">http://www.jianshu.com/p/42e11515c10f</a></td> 
  </tr> 
  <tr> 
   <td>中文详细文档</td> 
   <td><a href="http://www.jqhtml.com/7626.html" rel="nofollow">http://www.jqhtml.com/7626.html</a></td> 
  </tr> 
  <tr> 
   <td>【第1186期】Webpack v4 beta 版本发布</td> 
   <td><a href="https://mp.weixin.qq.com/s/ZWY_UDxaWvrlgHuIen7AMw" rel="nofollow">https://mp.weixin.qq.com/s/ZWY_UDxaWvrlgHuIen7AMw</a></td> 
  </tr> 
  <tr> 
   <td>【第1203期】webpack 4 发布了！</td> 
   <td><a href="http://www.zcfy.cc/article/x1f3bc-webpack-4-released-today-webpack-medium" rel="nofollow">http://www.zcfy.cc/article/x1f3bc-webpack-4-released-today-webpack-medium</a></td> 
  </tr> 
  <tr> 
   <td>【第1206期】看清楚真正的 Webpack 插件</td> 
   <td><a href="https://zoumiaojiang.com/article/what-is-real-webpack-plugin/" rel="nofollow">https://zoumiaojiang.com/article/what-is-real-webpack-plugin/</a></td> 
  </tr> 
  <tr> 
   <td>【第1215期】基于Webpack4使用懒加载分离打包React代码</td> 
   <td><a href="https://segmentfault.com/a/1190000013654180" rel="nofollow">https://segmentfault.com/a/1190000013654180</a></td> 
  </tr> 
  <tr> 
   <td>【第1241期】webpack4升级完全指南</td> 
   <td><a href="https://segmentfault.com/a/1190000014247030" rel="nofollow">https://segmentfault.com/a/1190000014247030</a></td> 
  </tr> 
  <tr> 
   <td>带你走进webpack世界，成为webpack头号玩家</td> 
   <td><a href="https://juejin.im/post/5ac9dc9af265da23884d5543" rel="nofollow">https://juejin.im/post/5ac9dc9af265da23884d5543</a></td> 
  </tr> 
  <tr> 
   <td>【第1252期】Webpack基本架构浅析</td> 
   <td><a href="http://blog.zxrcool.com/2018/04/19/Webpack%E5%9F%BA%E6%9C%AC%E6%9E%B6%E6%9E%84%E6%B5%85%E6%9E%90/" rel="nofollow">http://blog.zxrcool.com/2018/04/19/Webpack%E5%9F%BA%E6%9C%AC%E6%9E%B6%E6%9E%84%E6%B5%85%E6%9E%90/</a></td> 
  </tr> 
  <tr> 
   <td>【第1263期】我当初为什么写webpack</td> 
   <td><a href="https://zcfy.cc/article/interview-with-webpack-founder-tobias-koppers" rel="nofollow">https://zcfy.cc/article/interview-with-webpack-founder-tobias-koppers</a></td> 
  </tr> 
  <tr> 
   <td>【第1271期】Webpack4+ 多入口程序构建</td> 
   <td><a href="https://futu.im/posts/2018-05-07-webpack4/" rel="nofollow">https://futu.im/posts/2018-05-07-webpack4/</a></td> 
  </tr> 
  <tr> 
   <td>【第1303期】webpack4初探</td> 
   <td><a href="https://blog.shenfq.com/2018/06/09/webpack4%E5%88%9D%E6%8E%A2/" rel="nofollow">https://blog.shenfq.com/2018/06/09/webpack4%E5%88%9D%E6%8E%A2/</a></td> 
  </tr> 
  <tr> 
   <td>从10种现在流行的 CSS 解决方案谈谈我的最爱 （上）</td> 
   <td><a href="https://juejin.im/post/5b39e63ae51d4562aa017c81?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5b39e63ae51d4562aa017c81?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>从10种现在流行的 CSS 解决方案谈谈我的最爱 （中）</td> 
   <td><a href="https://juejin.im/post/5b3c594fe51d45191252d6a2" rel="nofollow">https://juejin.im/post/5b3c594fe51d45191252d6a2</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**第七章 CSS：**

<table> 
 <thead> 
  <tr> 
   <th><strong>标题</strong></th> 
   <th><strong>链接</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>箭头消息提示框样式</td> 
   <td><a href="http://www.cssarrowplease.com/" rel="nofollow">http://www.cssarrowplease.com/</a></td> 
  </tr> 
  <tr> 
   <td>Flex 布局教程：语法篇</td> 
   <td><a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool" rel="nofollow">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool</a></td> 
  </tr> 
  <tr> 
   <td>Flex 布局教程：实例篇</td> 
   <td><a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" rel="nofollow">http://www.ruanyifeng.com/blog/2015/07/flex-examples.html</a></td> 
  </tr> 
  <tr> 
   <td>【第1195期】现代CSS进化史</td> 
   <td><a href="https://segmentfault.com/a/1190000013191860" rel="nofollow">https://segmentfault.com/a/1190000013191860</a></td> 
  </tr> 
  <tr> 
   <td>【第1227期】关于 CSS 变量，你需要了解的一切</td> 
   <td><a href="https://juejin.im/post/5ab835225188255572085af4" rel="nofollow">https://juejin.im/post/5ab835225188255572085af4</a></td> 
  </tr> 
  <tr> 
   <td>CSS工程化演进</td> 
   <td><a href="https://mp.weixin.qq.com/s/1QkGy9UbRF3FtyBllmJdmA" rel="nofollow">https://mp.weixin.qq.com/s/1QkGy9UbRF3FtyBllmJdmA</a></td> 
  </tr> 
  <tr> 
   <td>【第1242期】 开始使用新的 CSS Typed Object Model</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/35029796" rel="nofollow">https://zhuanlan.zhihu.com/p/35029796</a></td> 
  </tr> 
  <tr> 
   <td>前端布局推进剂 - 间距规范化</td> 
   <td><a href="https://juejin.im/post/5ad0a366f265da239b41dbaf?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5ad0a366f265da239b41dbaf?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1183期】这些 CSS 命名规范，将省下你大把调试时间</td> 
   <td><a href="https://github.com/xitu/gold-miner/blob/master/TODO/css-naming-conventions-that-will-save-you-hours-of-debugging.md" rel="nofollow">https://github.com/xitu/gold-miner/blob/master/TODO/css-naming-conventions-that-will-save-you-hours-of-debugging.md</a></td> 
  </tr> 
  <tr> 
   <td>【第1288期】新的 CSS 特性正在改变网页设计</td> 
   <td><a href="https://github.com/xitu/gold-miner/blob/master/TODO1/future-of-web-design.md" rel="nofollow">https://github.com/xitu/gold-miner/blob/master/TODO1/future-of-web-design.md</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

CSS样式库：

<table> 
 <thead> 
  <tr> 
   <th><strong>类别</strong></th> 
   <th><strong>名称</strong></th> 
   <th><strong>Github</strong></th> 
   <th><strong>说明</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>按钮</td> 
   <td><strong>buttons</strong></td> 
   <td><em>* *</em><a href="https://github.com/alexwolfe/Buttons" rel="nofollow">https://github.com/alexwolfe/Buttons</a></td> 
   <td>Buttons 是一个高度可定制的、免费并且开源的按钮 CSS 样式库</td> 
  </tr> 
 </tbody> 
</table>

**第八章 UI：**

<table> 
 <thead> 
  <tr> 
   <th><strong>分类</strong></th> 
   <th><strong>名称</strong></th> 
   <th><strong>资源</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>react</td> 
   <td><strong>Ant Design of React</strong></td> 
   <td>alibaba的蚂蚁金服开发的开箱即用的高质量 React UI组件 官方教程： <a href="https://ant.design/docs/react/introduce-cn" rel="nofollow">https://ant.design/docs/react/introduce-cn</a> Github（star：30001 2018-6-26 ）： <a href="https://github.com/ant-design/ant-design" rel="nofollow">https://github.com/ant-design/ant-design</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>material-ui</strong></td> 
   <td>Material-UI是一个实现了Google’s Material Design设计规范的react组件库，开箱即用，使用它可以快速搭建出赏心悦目的应用界面 官网： <a href="https://material-ui.com/" rel="nofollow">https://material-ui.com/</a> Github（star：38027 2018-6-26 ）： <a href="https://github.com/mui-org/material-ui/" rel="nofollow">https://github.com/mui-org/material-ui/</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>react-desktop</strong></td> 
   <td>如果你对跨平台桌面应用程序的 UI 组件感兴趣，那么 React-Desktop 就是为你而设。你可以在上面找到 Mac OS 和 Windows 10 的均可用 UI 组件。 React-Desktop 可与 <a href="https://link.zhihu.com/?target=http%3A//nwjs.io/" rel="nofollow">NW.js</a> 和 <a href="https://link.zhihu.com/?target=http%3A//electron.atom.io/" rel="nofollow">Electron.js</a> 完美结合，也可用于任何 JavaScript 驱动的项目 官网： <a href="http://reactdesktop.js.org/" rel="nofollow">http://reactdesktop.js.org</a> Github（star：7556 2018-6-26 ）： <a href="https://github.com/gabrielbull/react-desktop" rel="nofollow">https://github.com/gabrielbull/react-desktop</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>Semantic-UI-React</strong></td> 
   <td>React 最好的 UI 框架，Semantic-UI-React 几乎拥有 Semantic-UI 中所有有用的组件，同时也有一个非常好的 Declarative API ，和用于 React 组件的 shorthand props ，并且 jQuery-Free。 文档： <a href="https://react.semantic-ui.com/introduction" rel="nofollow">https://react.semantic-ui.com/introduction</a> Github（star：7222 2018-6-26 ）： <a href="https://github.com/Semantic-Org/Semantic-UI-React" rel="nofollow">https://github.com/Semantic-Org/Semantic-UI-React</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>Blueprint</strong></td> 
   <td>它包含 30+ 的 React 组件，涵盖几乎所有的通用界面元素，从按钮到表单控件到工具提示等等。 它还包括每个组件的 CSS 样式和使用 Sass 和 Less 变量设计自己的组件和应用的工具， 以及一个优雅的调色板和两种尺寸的 300 多个 UI 图标，旨在让你专注于构建产品，针对构建复杂、数据密集的 Web 界面的桌面应用进行了最优化。如果你重度依赖移动互动，并且正在寻找 mobile-first 的 UI 工具包，它可能不适合你 官网： <a href="http://blueprintjs.com/" rel="nofollow">http://blueprintjs.com/</a> Github（star：9652 2018-6-26 ）： <a href="https://github.com/palantir/blueprint" rel="nofollow">https://github.com/palantir/blueprint</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>React-Bootstrap</strong></td> 
   <td>React-Bootstrap 是一个可重复使用的前端组件库。你可以通过 Facebook 的 React.js 框架获得 Twitter Bootstrap 的体验，而且有更为清晰的代码。 简而言之，这是老牌的 Bootstrap 组件，用 React 重新编写。 官网： <a href="https://react-bootstrap.github.io/" rel="nofollow">https://react-bootstrap.github.io/</a> Github（star：13271 2018-6-26 ）： <a href="https://github.com/react-bootstrap/react-bootstrap" rel="nofollow">https://github.com/react-bootstrap/react-bootstrap</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>React-Toolbox</strong></td> 
   <td>一组使用 CSS 模块实现 Google Material Design 的 React 组件，它允许你只使用所需的 CSS ，而不用使用像 Purify-CSS 这样的工具。除此之外，React-Toolbox 是具有30 +组件，开箱即用的，高度可定制的框架。 官网： <a href="http://react-toolbox.com/" rel="nofollow">http://react-toolbox.com/</a> Github（star：7985 2018-6-26 ）： <a href="https://github.com/react-toolbox/react-toolbox" rel="nofollow">https://github.com/react-toolbox/react-toolbox</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>Grommet </strong></td> 
   <td>Grommet 不仅仅是一个 UX 框架，它所包含的东西要比单纯的 UX 框架多得多。Grommet = 用 React 编写的一堆 UX 组件和工具 + 自有的 grommet-cli +“入门” 指南 + 预建模板 + 良好的文档+ 与 Sketch 集成 。 官网： <a href="http://grommet.io/" rel="nofollow">http://grommet.io/</a> Github（star：3381 2018-6-26 ）： <a href="https://github.com/grommet/grommet" rel="nofollow">https://github.com/grommet/grommet</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>Fabric</strong></td> 
   <td>用于构建与 Office 和 Office 365 界面相类似的 Web 应用的 React 组件，Fabric 是用 TypeScript 编写的官方 Office 库，包含“入门”指南、博客、官方调色板和字体，以及构建项目所需的所有组件 官网： <a href="https://developer.microsoft.com/en-us/fabric#/components" rel="nofollow">https://developer.microsoft.com/en-us/fabric#/components</a> Github（star：2822 2018-6-26 ）： <a href="https://github.com/OfficeDev/office-ui-fabric-react" rel="nofollow">https://github.com/OfficeDev/office-ui-fabric-react</a></td> 
  </tr> 
  <tr> 
   <td>vue</td> 
   <td><strong>element</strong></td> 
   <td>Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 官方教程： <a href="http://element-cn.eleme.io/#/zh-CN/component/installation" rel="nofollow">http://element-cn.eleme.io/#/zh-CN/component/installation</a></td> 
  </tr> 
  <tr> 
   <td>通用</td> 
   <td><strong>bootstrap</strong></td> 
   <td>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单 官网： <a href="http://www.bootcss.com/" rel="nofollow">http://www.bootcss.com/</a> Github（star：125581 2018-6-26 ）： <a href="https://github.com/twbs/bootstrap" rel="nofollow">https://github.com/twbs/bootstrap</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong>wired-elements</strong></td> 
   <td>手绘风格的一套很特别的组件 官网： <a href="http://wiredjs.com/" rel="nofollow">wiredjs.com</a> Github（star：5842 2018-6-26 ）： <a href="https://github.com/wiredjs/wired-elements" rel="nofollow">https://github.com/wiredjs/wired-elements</a></td> 
  </tr> 
 </tbody> 
</table>

**第九章 分散技术：**

**1.** \*\*\_\_filename\*\*

在Node.js中，预定义了两个变量：用于获取当前模块文件名的\_\_filename变量与用于获取当前目录名的\_\_dirname变量。在任何模块文件内部，可以使用\_\_filename变量获取当前模块文件的带有完整绝对路径的文件名。

**2.fis**

**3.PostCSS**

**4.Prettier1.0**

JS程序员格式化代码神器！

**5.Swagger**

是一个简单但功能强大的API表达工具，使用Swagger生成API，我们可以得到交互式文档，自动生成代码的SDK以及API的发现特性等

**6.vs code**

一款免费，小巧，好看的编辑器，微软出品

官方教程：

[https://code.visualstudio.com/docs][https_code.visualstudio.com_docs]

**第十章 前端相关文章链接：**

<table> 
 <thead> 
  <tr> 
   <th><strong>标题</strong></th> 
   <th><strong>链接</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>下一代 Web 应用模型 — Progressive Web App</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/25167289?from=timeline&amp;isappinstalled=0" rel="nofollow">https://zhuanlan.zhihu.com/p/25167289?from=timeline&amp;isappinstalled=0</a></td> 
  </tr> 
  <tr> 
   <td>最全的常用正则表达式大全</td> 
   <td><a href="https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html" rel="nofollow">https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html</a></td> 
  </tr> 
  <tr> 
   <td>antV 3.0（G2，F2，G6）发布</td> 
   <td><a href="https://antv.alipay.com/zh-cn/vis/blog/antv-3.0-releasing.html" rel="nofollow">https://antv.alipay.com/zh-cn/vis/blog/antv-3.0-releasing.html</a></td> 
  </tr> 
  <tr> 
   <td>【第1162期】2018 要学习的优秀 JavaScript 库与知识</td> 
   <td><a href="http://mp.weixin.qq.com/s/qyyDZkfjy57njuncq3_i1w" rel="nofollow">http://mp.weixin.qq.com/s/qyyDZkfjy57njuncq3_i1w</a></td> 
  </tr> 
  <tr> 
   <td>【第1154期】2017 年 JavaScript 发展状况回顾</td> 
   <td><a href="http://mp.weixin.qq.com/s/5phdFz4W3Q2cUYiyWgwK9A" rel="nofollow">http://mp.weixin.qq.com/s/5phdFz4W3Q2cUYiyWgwK9A</a></td> 
  </tr> 
  <tr> 
   <td>【第1152期】2017 JavaScript 调查报告概述</td> 
   <td><a href="http://mp.weixin.qq.com/s/SqmFD0VKiP40q8iJzkE4kA" rel="nofollow">http://mp.weixin.qq.com/s/SqmFD0VKiP40q8iJzkE4kA</a></td> 
  </tr> 
  <tr> 
   <td>【第1165期】H5动画：轨迹移动</td> 
   <td><a href="https://mp.weixin.qq.com/s/ySC69C3lIIzRDwmOs-pGYw" rel="nofollow">https://mp.weixin.qq.com/s/ySC69C3lIIzRDwmOs-pGYw</a></td> 
  </tr> 
  <tr> 
   <td>【第1164期】从前端技术到体验科技</td> 
   <td><a href="http://mp.weixin.qq.com/s/cIM4KA-4EaT3wdxLuIpBBg" rel="nofollow">http://mp.weixin.qq.com/s/cIM4KA-4EaT3wdxLuIpBBg</a></td> 
  </tr> 
  <tr> 
   <td>【第1117期】萌新也能懂的现代 JavaScript 开发</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/31044340" rel="nofollow">https://zhuanlan.zhihu.com/p/31044340</a></td> 
  </tr> 
  <tr> 
   <td>【第1167期】npm 2017 JavaScript 框架报告之 React 生态系统分析</td> 
   <td><a href="https://mp.weixin.qq.com/s/Ltw1-SsW4IOHr0HcXtUqDQ" rel="nofollow">https://mp.weixin.qq.com/s/Ltw1-SsW4IOHr0HcXtUqDQ</a></td> 
  </tr> 
  <tr> 
   <td>【第1168期】字符编码的故事</td> 
   <td><a href="http://mp.weixin.qq.com/s/P0PbNjajkILusn533mNqVA" rel="nofollow">http://mp.weixin.qq.com/s/P0PbNjajkILusn533mNqVA</a></td> 
  </tr> 
  <tr> 
   <td>【第1171期】npm 2017 JavaScript 框架报告之后端框架</td> 
   <td><a href="http://mp.weixin.qq.com/s/w5vccN2CnVO82PSOp75-KA" rel="nofollow">http://mp.weixin.qq.com/s/w5vccN2CnVO82PSOp75-KA</a></td> 
  </tr> 
  <tr> 
   <td>解决ajax跨域的方法原理详解</td> 
   <td><a href="http://blog.csdn.net/wuliyun88/article/details/50521725" rel="nofollow">http://blog.csdn.net/wuliyun88/article/details/50521725</a></td> 
  </tr> 
  <tr> 
   <td>Chrome控制台使用详解</td> 
   <td><a href="http://www.codeceo.com/article/chrome-console.html" rel="nofollow">http://www.codeceo.com/article/chrome-console.html</a></td> 
  </tr> 
  <tr> 
   <td>【第1172期】HTML 5.2 有哪些新内容？</td> 
   <td><a href="https://github.com/xitu/gold-miner/blob/master/TODO/whats-new-in-html-5-2.md" rel="nofollow">https://github.com/xitu/gold-miner/blob/master/TODO/whats-new-in-html-5-2.md</a></td> 
  </tr> 
  <tr> 
   <td>【第1173期】npm 2017 JavaScript 框架报告之前端框架</td> 
   <td><a href="https://mp.weixin.qq.com/s/AD_7nOCBBZxmfTKlF0fN2g" rel="nofollow">https://mp.weixin.qq.com/s/AD_7nOCBBZxmfTKlF0fN2g</a></td> 
  </tr> 
  <tr> 
   <td>【第790期】构建可靠的前端异常监控服务-采集篇</td> 
   <td><a href="http://mp.weixin.qq.com/s/LGbMXauSuuGWcvqazjXWjQ" rel="nofollow">http://mp.weixin.qq.com/s/LGbMXauSuuGWcvqazjXWjQ</a></td> 
  </tr> 
  <tr> 
   <td>【第1175期】2017年 JavaScript 明星项目</td> 
   <td><a href="https://risingstars.js.org/2017/zh/#section-framework" rel="nofollow">https://risingstars.js.org/2017/zh/#section-framework</a></td> 
  </tr> 
  <tr> 
   <td>【第1037期】美团点评点餐前后端分离实践</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/28704974" rel="nofollow">https://zhuanlan.zhihu.com/p/28704974</a></td> 
  </tr> 
  <tr> 
   <td>【第1178期】WebSocket：5分钟从入门到精通</td> 
   <td><a href="http://mp.weixin.qq.com/s/rKvoevbSmtAUoCgOH2lZdQ" rel="nofollow">http://mp.weixin.qq.com/s/rKvoevbSmtAUoCgOH2lZdQ</a></td> 
  </tr> 
  <tr> 
   <td>【第1125期】GraphQL 技术栈揭秘</td> 
   <td><a href="http://www.zcfy.cc/article/the-graphql-stack-how-everything-fits-together-apollo-graphql-4549.html" rel="nofollow">http://www.zcfy.cc/article/the-graphql-stack-how-everything-fits-together-apollo-graphql-4549.html</a></td> 
  </tr> 
  <tr> 
   <td>【第362期】最简单实现跨域的方法：使用nginx反向代理</td> 
   <td><a href="http://blog.jobbole.com/90975/" rel="nofollow">http://blog.jobbole.com/90975/</a></td> 
  </tr> 
  <tr> 
   <td>【第1182期】Canvas or SVG？一张好图，两手准备，就在 ECharts 4.0</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/33093211" rel="nofollow">https://zhuanlan.zhihu.com/p/33093211</a></td> 
  </tr> 
  <tr> 
   <td>2018 年最值得关注的 JavaScript 趋势</td> 
   <td><a href="http://blog.csdn.net/VhWfR2u02Q/article/details/78974598" rel="nofollow">http://blog.csdn.net/VhWfR2u02Q/article/details/78974598</a></td> 
  </tr> 
  <tr> 
   <td>【第1184期】滴滴后市场前端技术体系</td> 
   <td><a href="https://juejin.im/post/5a3dd19b6fb9a0452846b159" rel="nofollow">https://juejin.im/post/5a3dd19b6fb9a0452846b159</a></td> 
  </tr> 
  <tr> 
   <td>2018 前端性能优化清单</td> 
   <td><a href="https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-1.md" rel="nofollow">https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-1.md</a></td> 
  </tr> 
  <tr> 
   <td>【第1158期】哔哩哔哩的前端之路</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/32487533" rel="nofollow">https://zhuanlan.zhihu.com/p/32487533</a></td> 
  </tr> 
  <tr> 
   <td>【第1191期】你所忽略的js隐式转换</td> 
   <td><a href="https://juejin.im/post/5a7172d9f265da3e3245cbca" rel="nofollow">https://juejin.im/post/5a7172d9f265da3e3245cbca</a></td> 
  </tr> 
  <tr> 
   <td>【第1194期】手把手教你用 SVG 符号和 CSS 变量做出彩色图标</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/33623303" rel="nofollow">https://zhuanlan.zhihu.com/p/33623303</a></td> 
  </tr> 
  <tr> 
   <td>【第1192期】记“编写babel插件”与“通过语法解析替换小程序路由表”的经历</td> 
   <td><a href="https://segmentfault.com/a/1190000013130489" rel="nofollow">https://segmentfault.com/a/1190000013130489</a></td> 
  </tr> 
  <tr> 
   <td>2018 Web 开发者路线图</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/33565551?utm_source=com.daimajia.gold&amp;utm_medium=social" rel="nofollow">https://zhuanlan.zhihu.com/p/33565551?utm_source=com.daimajia.gold&amp;utm_medium=social</a></td> 
  </tr> 
  <tr> 
   <td>前端每周清单第 51 期: React Context API 与模式变迁, Webpack 与 Web 优化, AI 界面生成</td> 
   <td><a href="https://juejin.im/post/5a81ac8e6fb9a0635c0478fc" rel="nofollow">https://juejin.im/post/5a81ac8e6fb9a0635c0478fc</a></td> 
  </tr> 
  <tr> 
   <td>【第1196期】原生JS数据绑定</td> 
   <td><a href="http://zcfy.cc/article/native-javascript-data-binding" rel="nofollow">http://zcfy.cc/article/native-javascript-data-binding</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript 进阶之深入理解数据双向绑定</td> 
   <td><a href="http://mp.weixin.qq.com/s/CiLa2wjl4VriA-JYRS_o6w" rel="nofollow">http://mp.weixin.qq.com/s/CiLa2wjl4VriA-JYRS_o6w</a></td> 
  </tr> 
  <tr> 
   <td>【第1199期】10 种最常见的 Javascript 错误</td> 
   <td><a href="https://elevenbeans.github.io/2018/02/05/top-10-javascript-errors/" rel="nofollow">https://elevenbeans.github.io/2018/02/05/top-10-javascript-errors/</a></td> 
  </tr> 
  <tr> 
   <td>【第1201期】Node 定时器详解</td> 
   <td><a href="http://www.ruanyifeng.com/blog/2018/02/node-event-loop.html" rel="nofollow">http://www.ruanyifeng.com/blog/2018/02/node-event-loop.html</a></td> 
  </tr> 
  <tr> 
   <td>【第1202期】手淘过年项目中采用到的前端技术</td> 
   <td><a href="https://www.w3cplus.com/css/taobao-2018-year.html" rel="nofollow">https://www.w3cplus.com/css/taobao-2018-year.html</a></td> 
  </tr> 
  <tr> 
   <td>【第999期】从 JavaScript 到 TypeScript</td> 
   <td><a href="http://muyunyun.cn/posts/66a54fc2/index.html" rel="nofollow">http://muyunyun.cn/posts/66a54fc2/index.html</a></td> 
  </tr> 
  <tr> 
   <td>【第1207期】TypeScript 实践分享</td> 
   <td><a href="https://juejin.im/post/5a9c004a6fb9a028b92c9e91" rel="nofollow">https://juejin.im/post/5a9c004a6fb9a028b92c9e91</a></td> 
  </tr> 
  <tr> 
   <td>最受欢迎的五大前端框架比较</td> 
   <td><a href="https://mp.weixin.qq.com/s/A1WM8uJD9p-rpip5SYMOmg" rel="nofollow">https://mp.weixin.qq.com/s/A1WM8uJD9p-rpip5SYMOmg</a></td> 
  </tr> 
  <tr> 
   <td>什么是 PWA</td> 
   <td><a href="https://juejin.im/post/5a9e8ad5f265da23a40456d4?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5a9e8ad5f265da23a40456d4?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1209期】关于 Promise 的 9 个提示</td> 
   <td><a href="http://yanmeng.me/2018/03/02/about-promise/" rel="nofollow">http://yanmeng.me/2018/03/02/about-promise/</a></td> 
  </tr> 
  <tr> 
   <td>【第1210期】前端开发、交互、视觉是怎么合作完成工作的</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/34238597" rel="nofollow">https://zhuanlan.zhihu.com/p/34238597</a></td> 
  </tr> 
  <tr> 
   <td>2018 如何玩转 JavaScript</td> 
   <td><a href="https://juejin.im/entry/5aa0e46d6fb9a028b54775cd?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/entry/5aa0e46d6fb9a028b54775cd?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>用 JavaScript 实现人脸识别</td> 
   <td><a href="http://mp.weixin.qq.com/s/YlpehhbtCnuK3lSt2unffg" rel="nofollow">http://mp.weixin.qq.com/s/YlpehhbtCnuK3lSt2unffg</a></td> 
  </tr> 
  <tr> 
   <td>【第1214期】帆布指纹识别</td> 
   <td><a href="https://www.cnblogs.com/xiezhengcai/p/4252008.html" rel="nofollow">https://www.cnblogs.com/xiezhengcai/p/4252008.html</a></td> 
  </tr> 
  <tr> 
   <td>JS中浮点数精度问题</td> 
   <td><a href="https://juejin.im/post/5aa1395c6fb9a028df223516?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5aa1395c6fb9a028df223516?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1216期】最全最好用的动效落地方法、都帮你总结好了（上）</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/34501702" rel="nofollow">https://zhuanlan.zhihu.com/p/34501702</a></td> 
  </tr> 
  <tr> 
   <td>【第1223期】最全最好用的动效落地方法、都帮你总结好了（下）</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/34815524" rel="nofollow">https://zhuanlan.zhihu.com/p/34815524</a></td> 
  </tr> 
  <tr> 
   <td>JavaScript变量的生命周期：为什么let不被提升</td> 
   <td><a href="https://juejin.im/post/5aa631ab5188255587233214?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5aa631ab5188255587233214?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1054期】高阶函数：利用Filter、Map和Reduce来编写更易维护的代码</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/28835709" rel="nofollow">https://zhuanlan.zhihu.com/p/28835709</a></td> 
  </tr> 
  <tr> 
   <td>从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理</td> 
   <td><a href="http://www.dailichun.com/2018/01/21/js_singlethread_eventloop.html" rel="nofollow">http://www.dailichun.com/2018/01/21/js_singlethread_eventloop.html</a></td> 
  </tr> 
  <tr> 
   <td>【第1218期】DNS：为什么很重要&amp;是如何工作的</td> 
   <td><a href="http://mp.weixin.qq.com/s/jRTmRhAbga5PkgF7QLpHaw" rel="nofollow">http://mp.weixin.qq.com/s/jRTmRhAbga5PkgF7QLpHaw</a></td> 
  </tr> 
  <tr> 
   <td>H5 分层屏幕适配</td> 
   <td><a href="http://hai.li/2018/03/14/h5-screen-adaptation.html" rel="nofollow">http://hai.li/2018/03/14/h5-screen-adaptation.html</a></td> 
  </tr> 
  <tr> 
   <td>简单快速理解js中的this、call和apply</td> 
   <td><a href="https://juejin.im/post/5aab40bef265da23826dba61?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5aab40bef265da23826dba61?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1222期】十倍效能提升——Web 基础研发体系的建立</td> 
   <td><a href="http://www.cnblogs.com/sskyy/p/8613393.html" rel="nofollow">http://www.cnblogs.com/sskyy/p/8613393.html</a></td> 
  </tr> 
  <tr> 
   <td>WebSocket 学习：基于socket.io实现简单多人聊天室</td> 
   <td><a href="https://segmentfault.com/a/1190000011538416" rel="nofollow">https://segmentfault.com/a/1190000011538416</a></td> 
  </tr> 
  <tr> 
   <td>【第729期】什么时候不该使用es6箭头函数</td> 
   <td><a href="https://segmentfault.com/a/1190000007074846" rel="nofollow">https://segmentfault.com/a/1190000007074846</a></td> 
  </tr> 
  <tr> 
   <td>2017前端性能优化清单</td> 
   <td><a href="https://segmentfault.com/a/1190000008132322" rel="nofollow">https://segmentfault.com/a/1190000008132322</a></td> 
  </tr> 
  <tr> 
   <td>2018年3月前端知识集锦</td> 
   <td><a href="https://juejin.im/post/5abb22925188255c4c1050e0?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5abb22925188255c4c1050e0?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1230期】从头实现一个koa框架</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/35040744" rel="nofollow">https://zhuanlan.zhihu.com/p/35040744</a></td> 
  </tr> 
  <tr> 
   <td>【第1231期】热爱 JavaScript，但是讨厌 CSS ？</td> 
   <td><a href="https://juejin.im/post/5aba0d37518825556a72708a" rel="nofollow">https://juejin.im/post/5aba0d37518825556a72708a</a></td> 
  </tr> 
  <tr> 
   <td>【第1234期】前端布局基础概述</td> 
   <td><a href="https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA" rel="nofollow">https://mp.weixin.qq.com/s/-LcNZWFFty2lWuND6uuNNA</a></td> 
  </tr> 
  <tr> 
   <td>Chrome 调试工具使用小技巧</td> 
   <td><a href="http://mp.weixin.qq.com/s/Nyrav5fx_pqgSDEXNRb6Ug" rel="nofollow">http://mp.weixin.qq.com/s/Nyrav5fx_pqgSDEXNRb6Ug</a></td> 
  </tr> 
  <tr> 
   <td>【第1239期】关于Google发布的JS代码规范，你需要了解什么？</td> 
   <td><a href="https://github.com/WhiteYin/translation/issues/10" rel="nofollow">https://github.com/WhiteYin/translation/issues/10</a></td> 
  </tr> 
  <tr> 
   <td>【第1240期】passive 事件监听</td> 
   <td><a href="https://futu.im/posts/2017-06-06-passive-event-listeners/" rel="nofollow">https://futu.im/posts/2017-06-06-passive-event-listeners/</a></td> 
  </tr> 
  <tr> 
   <td>【第1091期】JavaScript：理解同步、异步和事件循环</td> 
   <td><a href="https://manxisuo.github.io/2016/01/18/understanding-async-and-event-loop/" rel="nofollow">https://manxisuo.github.io/2016/01/18/understanding-async-and-event-loop/</a></td> 
  </tr> 
  <tr> 
   <td>【第1243期】一次掌握 JavaScript ES5 到 ES8 数组内容</td> 
   <td><a href="https://hufangyun.com/2017/array-learn/" rel="nofollow">https://hufangyun.com/2017/array-learn/</a></td> 
  </tr> 
  <tr> 
   <td>【第839期】JavaScript 数组方法对比</td> 
   <td><a href="http://jinlong.github.io/2017/02/04/javascript-array-methods-mutating-vs-non-mutating/" rel="nofollow">http://jinlong.github.io/2017/02/04/javascript-array-methods-mutating-vs-non-mutating/</a></td> 
  </tr> 
  <tr> 
   <td>【第1071期】深入 JavaScript 数组：进化与性能</td> 
   <td><a href="http://www.wemlion.com/post/javascript-array-evolution-performance" rel="nofollow">http://www.wemlion.com/post/javascript-array-evolution-performance</a></td> 
  </tr> 
  <tr> 
   <td>聊聊 HTTPS 和 SSL/TLS 协议</td> 
   <td><a href="http://mp.weixin.qq.com/s/vOFTcll3ditYuuVyESN-2A" rel="nofollow">http://mp.weixin.qq.com/s/vOFTcll3ditYuuVyESN-2A</a></td> 
  </tr> 
  <tr> 
   <td>前端每周清单（2018年4月9日）</td> 
   <td><a href="http://www.infoq.com/cn/news/2018/04/arch-weekly-57" rel="nofollow">http://www.infoq.com/cn/news/2018/04/arch-weekly-57</a></td> 
  </tr> 
  <tr> 
   <td>【第1248期】ECMAScript 2016, 2017, 和2018中新增功能</td> 
   <td><a href="https://blog.hypers.io/2018/04/11/es2016-17-18/" rel="nofollow">https://blog.hypers.io/2018/04/11/es2016-17-18/</a></td> 
  </tr> 
  <tr> 
   <td>我是如何在公司项目中使用ESLint来提升代码质量的</td> 
   <td><a href="https://juejin.im/post/5ad367695188255c9323bb30?utm_medium=be&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5ad367695188255c9323bb30?utm_medium=be&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1250期】彻底理解浏览器的缓存机制</td> 
   <td><a href="https://heyingye.github.io/2018/04/16/%E5%BD%BB%E5%BA%95%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6/" rel="nofollow">https://heyingye.github.io/2018/04/16/%E5%BD%BB%E5%BA%95%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5</a> <a href="https://heyingye.github.io/2018/04/16/%E5%BD%BB%E5%BA%95%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6/" rel="nofollow">%99%A8%E7%9A%84%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6/</a></td> 
  </tr> 
  <tr> 
   <td>高阶函数，你怎么那么漂亮呢！</td> 
   <td><a href="https://juejin.im/post/5ad6b34a6fb9a028cc61bfb3?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5ad6b34a6fb9a028cc61bfb3?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>微信小程序之-NBA在线直播小程序开发</td> 
   <td><a href="https://juejin.im/post/5ad614c46fb9a028d7011e7f?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5ad614c46fb9a028d7011e7f?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1251期】玩转HTML5 Video视频WebVTT字幕使用样式与制作</td> 
   <td><a href="http://www.zhangxinxu.com/wordpress/2018/03/html5-video-webvtt-subtitle/" rel="nofollow">http://www.zhangxinxu.com/wordpress/2018/03/html5-video-webvtt-subtitle/</a></td> 
  </tr> 
  <tr> 
   <td>微信小程序也要强行热更代码，鹅厂不服你来肛我呀</td> 
   <td><a href="https://juejin.im/entry/5ad91eda6fb9a07acb3c67f2?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/entry/5ad91eda6fb9a07acb3c67f2?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1255期】超大型 JavaScript 应用的设计哲学</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/35929167" rel="nofollow">https://zhuanlan.zhihu.com/p/35929167</a></td> 
  </tr> 
  <tr> 
   <td>JS 中的设计模式了解一下？</td> 
   <td><a href="https://juejin.im/post/5adea689f265da0b873a212e?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5adea689f265da0b873a212e?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1257期】YAML 语言教程</td> 
   <td><a href="http://www.ruanyifeng.com/blog/2016/07/yaml.html" rel="nofollow">http://www.ruanyifeng.com/blog/2016/07/yaml.html</a></td> 
  </tr> 
  <tr> 
   <td>【第1258期】从JS垃圾回收机制和词源来透视闭包</td> 
   <td><a href="https://mp.weixin.qq.com/s/485GgpEt2c7uS-mY1cbA3w" rel="nofollow">https://mp.weixin.qq.com/s/485GgpEt2c7uS-mY1cbA3w</a></td> 
  </tr> 
  <tr> 
   <td>【第1259期】Nerv实战 - 京东首页改版小结</td> 
   <td><a href="https://aotu.io/notes/2018/04/24/jdindex_2017/" rel="nofollow">https://aotu.io/notes/2018/04/24/jdindex_2017/</a></td> 
  </tr> 
  <tr> 
   <td>【第1260期】图说 ES Modules</td> 
   <td><a href="https://segmentfault.com/a/1190000014318751" rel="nofollow">https://segmentfault.com/a/1190000014318751</a></td> 
  </tr> 
  <tr> 
   <td>【第1261期】那些好玩却尚未被 ECMAScript 2017 采纳的提案</td> 
   <td><a href="https://juejin.im/post/5ae920fd51882567127852e7" rel="nofollow">https://juejin.im/post/5ae920fd51882567127852e7</a></td> 
  </tr> 
  <tr> 
   <td>【第1262期】Jenkins打造强大的前端自动化工作流</td> 
   <td><a href="https://juejin.im/post/5ad1980e6fb9a028c42ea1be" rel="nofollow">https://juejin.im/post/5ad1980e6fb9a028c42ea1be</a></td> 
  </tr> 
  <tr> 
   <td>【第1265期】那些前端MVVM框架是如何诞生的</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/36453279" rel="nofollow">https://zhuanlan.zhihu.com/p/36453279</a></td> 
  </tr> 
  <tr> 
   <td>【第1266期】基于Docker+Consul+Registrator+Nodejs实现服务治理（一）</td> 
   <td><a href="https://github.com/chenchunyong/blog/blob/master/microservice/serviceRegister.md" rel="nofollow">https://github.com/chenchunyong/blog/blob/master/microservice/serviceRegister.md</a></td> 
  </tr> 
  <tr> 
   <td>【第1267期】基于Docker+Consul+Registrator+Nodejs实现服务治理（二）</td> 
   <td><a href="https://github.com/jasonGeng88/blog/blob/master/201704/service_discovery.md" rel="nofollow">https://github.com/jasonGeng88/blog/blob/master/201704/service_discovery.md</a></td> 
  </tr> 
  <tr> 
   <td>面试官：阮一峰版的快速排序完全是错的</td> 
   <td><a href="https://juejin.im/post/5af4902a6fb9a07abf728c40" rel="nofollow">https://juejin.im/post/5af4902a6fb9a07abf728c40</a></td> 
  </tr> 
  <tr> 
   <td>如何加密传输和存储用户密码</td> 
   <td><a href="https://juejin.im/post/5af5711e5188254267261e3b?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5af5711e5188254267261e3b?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1274期】ES6之路之模块详解</td> 
   <td><a href="https://mp.weixin.qq.com/s/bP-hhEm01V63R-hAYsKbpw" rel="nofollow">https://mp.weixin.qq.com/s/bP-hhEm01V63R-hAYsKbpw</a></td> 
  </tr> 
  <tr> 
   <td>console觉醒之路，打印个动画如何</td> 
   <td><a href="https://juejin.im/post/5afafb0c6fb9a07ac65331fe" rel="nofollow">https://juejin.im/post/5afafb0c6fb9a07ac65331fe</a></td> 
  </tr> 
  <tr> 
   <td>手机web前端调试页面的几种方式</td> 
   <td><a href="https://juejin.im/entry/5afd1b276fb9a07acc11ec81" rel="nofollow">https://juejin.im/entry/5afd1b276fb9a07acc11ec81</a></td> 
  </tr> 
  <tr> 
   <td>【第1277期】Google I/O 2018 —— Web 系列参会笔记</td> 
   <td><a href="https://mp.weixin.qq.com/s/EiTQDFPoUBc97gQtwTNWCA" rel="nofollow">https://mp.weixin.qq.com/s/EiTQDFPoUBc97gQtwTNWCA</a></td> 
  </tr> 
  <tr> 
   <td>【第1278期】上课啦！了解下 DDoS攻击方式</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/29784472" rel="nofollow">https://zhuanlan.zhihu.com/p/29784472</a></td> 
  </tr> 
  <tr> 
   <td>【第1279期】无尽滚动的复杂度</td> 
   <td><a href="https://www.jianshu.com/p/4e16b4211d84" rel="nofollow">https://www.jianshu.com/p/4e16b4211d84</a></td> 
  </tr> 
  <tr> 
   <td>【第1280期】如何利用 Chrome 浏览器实现滚动截屏</td> 
   <td><a href="https://weibo.com/ttarticle/p/show?id=2309404241869646237445" rel="nofollow">https://weibo.com/ttarticle/p/show?id=2309404241869646237445</a></td> 
  </tr> 
  <tr> 
   <td>【第1282期】页面可视化搭建工具前生今世</td> 
   <td><a href="https://github.com/CntChen/cntchen.github.io/issues/15" rel="nofollow">https://github.com/CntChen/cntchen.github.io/issues/15</a></td> 
  </tr> 
  <tr> 
   <td>【第1283期】从0开始发布一个无依赖、高质量的npm</td> 
   <td><a href="https://github.com/simbawus/blog/issues/12" rel="nofollow">https://github.com/simbawus/blog/issues/12</a></td> 
  </tr> 
  <tr> 
   <td>【第1285期】我知道的HTTP请求</td> 
   <td><a href="https://juejin.im/post/5a757d2f5188254e5c6c404a" rel="nofollow">https://juejin.im/post/5a757d2f5188254e5c6c404a</a></td> 
  </tr> 
  <tr> 
   <td>【第1286期】滑向未来：现代 JavaScript 与 CSS 滚动实现指南</td> 
   <td><a href="https://www.zcfy.cc/article/scroll-to-the-future" rel="nofollow">https://www.zcfy.cc/article/scroll-to-the-future</a></td> 
  </tr> 
  <tr> 
   <td>【第1287期】深入浅出 SVG</td> 
   <td><a href="https://juejin.im/post/5ad84f296fb9a045e8011be1" rel="nofollow">https://juejin.im/post/5ad84f296fb9a045e8011be1</a></td> 
  </tr> 
  <tr> 
   <td>【第1289期】W3C工作备忘 – 布局</td> 
   <td><a href="https://cloud.tencent.com/developer/article/1138992" rel="nofollow">https://cloud.tencent.com/developer/article/1138992</a></td> 
  </tr> 
  <tr> 
   <td>【第1290期】 一个安卓设备管理操作平台-STF</td> 
   <td><a href="http://ju.outofmemory.cn/entry/199455" rel="nofollow">http://ju.outofmemory.cn/entry/199455</a></td> 
  </tr> 
  <tr> 
   <td>【第1292期】GitHub 的用法与礼仪</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/37599617" rel="nofollow">https://zhuanlan.zhihu.com/p/37599617</a></td> 
  </tr> 
  <tr> 
   <td>【第1293期】浏览器之美，你知道多少？</td> 
   <td><a href="https://juejin.im/post/5b0a085f6fb9a07aa048774e" rel="nofollow">https://juejin.im/post/5b0a085f6fb9a07aa048774e</a></td> 
  </tr> 
  <tr> 
   <td>【第1294期】JS Linter 进化史</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/34656263" rel="nofollow">https://zhuanlan.zhihu.com/p/34656263</a></td> 
  </tr> 
  <tr> 
   <td>【第1295期】浅谈 instanceof 和 typeof 的实现原理</td> 
   <td><a href="https://tinycat2017.github.io/2018/05/28/%E6%B5%85%E8%B0%88-instanceof-%E5%92%8C-typeof-%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86/" rel="nofollow">https://tinycat2017.github.io/2018/05/28/%E6%B5%85%E8%B0%88-instanceof-%E5%92%8C-typeof-%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86/</a></td> 
  </tr> 
  <tr> 
   <td>【第1297期】HTTPS 的故事</td> 
   <td><a href="https://juejin.im/post/5b10aa22e51d4506c5568f1d" rel="nofollow">https://juejin.im/post/5b10aa22e51d4506c5568f1d</a></td> 
  </tr> 
  <tr> 
   <td>【第710期】HTTPS是如何工作的</td> 
   <td><a href="https://www.zcfy.cc/article/how-does-https-work-1280.html" rel="nofollow">https://www.zcfy.cc/article/how-does-https-work-1280.html</a></td> 
  </tr> 
  <tr> 
   <td>【第1298期】宋小菜生鲜 B2B 的前端团队搭建</td> 
   <td><a href="https://mp.weixin.qq.com/s/kl107B5j6VDIkNr_IdHu-Q" rel="nofollow">https://mp.weixin.qq.com/s/kl107B5j6VDIkNr_IdHu-Q</a></td> 
  </tr> 
  <tr> 
   <td>【第1299期】浅谈混合应用的演进</td> 
   <td><a href="https://mp.weixin.qq.com/s/Ui5TKoBWteDORx5CEswx5w" rel="nofollow">https://mp.weixin.qq.com/s/Ui5TKoBWteDORx5CEswx5w</a></td> 
  </tr> 
  <tr> 
   <td>【第1300期】多端统一开发框架 - Taro</td> 
   <td><a href="https://aotu.io/notes/2018/06/07/Taro/" rel="nofollow">https://aotu.io/notes/2018/06/07/Taro/</a></td> 
  </tr> 
  <tr> 
   <td>【第1301期】如何阅读大型前端开源项目的源码</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/36996225" rel="nofollow">https://zhuanlan.zhihu.com/p/36996225</a></td> 
  </tr> 
  <tr> 
   <td>谁说前端不需要懂-Nginx反向代理与负载均衡</td> 
   <td><a href="https://juejin.im/post/5b01336af265da0b8a67e5c9?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5b01336af265da0b8a67e5c9?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1304期】聊一聊Redux的前身Flux</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/38050036" rel="nofollow">https://zhuanlan.zhihu.com/p/38050036</a></td> 
  </tr> 
  <tr> 
   <td>精读《React 八种条件渲染》</td> 
   <td><a href="https://juejin.im/post/5b285c0d5188257494641d0b" rel="nofollow">https://juejin.im/post/5b285c0d5188257494641d0b</a></td> 
  </tr> 
  <tr> 
   <td>一套比较完整的前端技术选型，需要规整哪些东西，你知道不？</td> 
   <td><a href="https://juejin.im/post/5b28d4fbe51d45587b47fd43?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5b28d4fbe51d45587b47fd43?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>如何利用vw+rem进行移动端布局</td> 
   <td><a href="https://juejin.im/post/5b29f476e51d455892718380?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5b29f476e51d455892718380?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>【第1312期】Node.js开发之父：十个Node.js的设计错误以及其终极解决办法</td> 
   <td><a href="https://medium.com/m/global-identity?redirectUrl=https://m.oursky.com/node-js-%E9%96%8B%E7%99%BC%E4%B9%8B%E7%88%B6-%E5%8D%81%E5%80%8Bnode-js-%E7%9A%84%E8%A8%AD%E8%A8%88%E9%8C%AF%E8%AA%A4-%E4%BB%A5%E5%8F%8A%E5%85%B6%E7%B5%82%E6%A5%B5%E8%A7%A3%E6%B1%BA%E8%BE%A6%E6%B3%95-f0db0afb496e" rel="nofollow">https://medium.com/m/global-identity?redirectUrl=https://m.oursky.com/node-js-%E9%96%8B%E7%99%BC%E4%B9%8B%E7%88%B6-%E5%8D%81%E5%80%8Bnode-js-%E7%9A%84%E8%A8%AD%E8%A8%88%E9%8C%AF%E8%AA%A4-%E4%BB%A5%E5%8F%8A%E5%85%B6%E7%B5%82%E6%A5%B5%E8%A7%A3%E6%B1%BA%E8%BE%A6%E6%B3%95-f0db0afb496e</a></td> 
  </tr> 
  <tr> 
   <td>【第1311期】浅析前端安全之 XSS</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/38327058" rel="nofollow">https://zhuanlan.zhihu.com/p/38327058</a></td> 
  </tr> 
  <tr> 
   <td>大型网站的 HTTPS 实践：协议层以外的实践</td> 
   <td><a href="https://mp.weixin.qq.com/s/hy0qauQ_hvAJNMYOHvnxLg" rel="nofollow">https://mp.weixin.qq.com/s/hy0qauQ_hvAJNMYOHvnxLg</a></td> 
  </tr> 
  <tr> 
   <td>关于PWA，你需要注意这9点</td> 
   <td><a href="https://mp.weixin.qq.com/s/3JgScJUbEPWL0wRDn28kkA" rel="nofollow">https://mp.weixin.qq.com/s/3JgScJUbEPWL0wRDn28kkA</a></td> 
  </tr> 
  <tr> 
   <td>【第1314期】JavaScript 引擎基础：Shapes 和 Inline Caches</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/38202123" rel="nofollow">https://zhuanlan.zhihu.com/p/38202123</a></td> 
  </tr> 
  <tr> 
   <td>【第1315期】GraphQL 基于 SPA 架构的工程实践</td> 
   <td><a href="https://mp.weixin.qq.com/s/etnLUbok8BUZBAMr3bKWGg" rel="nofollow">https://mp.weixin.qq.com/s/etnLUbok8BUZBAMr3bKWGg</a></td> 
  </tr> 
  <tr> 
   <td>【第1316期】大前端时代前端监控的最佳实践</td> 
   <td><a href="https://mp.weixin.qq.com/s/YiKRY_LDURY0uONtEhkUfg" rel="nofollow">https://mp.weixin.qq.com/s/YiKRY_LDURY0uONtEhkUfg</a></td> 
  </tr> 
  <tr> 
   <td>【第1317期】在 web 上使用 JavaScript 模块</td> 
   <td><a href="https://zhuanlan.zhihu.com/p/38581901" rel="nofollow">https://zhuanlan.zhihu.com/p/38581901</a></td> 
  </tr> 
  <tr> 
   <td>【第1318期】深入浅出 JavaScript 关键词 – this</td> 
   <td><a href="https://juejin.im/post/5aefe76e6fb9a07abc29d4a1" rel="nofollow">https://juejin.im/post/5aefe76e6fb9a07abc29d4a1</a></td> 
  </tr> 
  <tr> 
   <td>【第1319期】deno深入揭秘及未来展望</td> 
   <td><a href="https://www.cnblogs.com/accordion/p/9247016.html" rel="nofollow">https://www.cnblogs.com/accordion/p/9247016.html</a></td> 
  </tr> 
  <tr> 
   <td>我看完掘金上的227篇文章，总结出一份Flutter入门教程</td> 
   <td><a href="https://juejin.im/post/5b3c8a4be51d4519935860d5?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5b3c8a4be51d4519935860d5?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**第十一章 面试相关：**

<table> 
 <thead> 
  <tr> 
   <th>标题</th> 
   <th>链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>50道 CSS 基础面试题（附答案）</td> 
   <td><a href="https://juejin.im/entry/5ad2d3bff265da237a4d75dd?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/entry/5ad2d3bff265da237a4d75dd?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>前端笔试题面试题记录</td> 
   <td><a href="https://juejin.im/post/5aad40e4f265da237f1e12ed?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5aad40e4f265da237f1e12ed?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>分享收集的一大波前端面试题和答案</td> 
   <td><a href="https://juejin.im/entry/5a9d0f05f265da239b40eb7c?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/entry/5a9d0f05f265da239b40eb7c?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>前端基础面试题(JS部分)</td> 
   <td><a href="https://juejin.im/entry/598c003c6fb9a03c367d054e" rel="nofollow">https://juejin.im/entry/598c003c6fb9a03c367d054e</a></td> 
  </tr> 
  <tr> 
   <td>2018前端面试总结js部分【中】</td> 
   <td><a href="https://juejin.im/post/5b2f4eb9e51d4558cc35c289?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5b2f4eb9e51d4558cc35c289?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>2018年6月前端面试经历(中)</td> 
   <td><a href="https://juejin.im/post/5b3b70ea6fb9a04fe91a5039?utm_medium=fe&amp;utm_source=weixinqun" rel="nofollow">https://juejin.im/post/5b3b70ea6fb9a04fe91a5039?utm_medium=fe&amp;utm_source=weixinqun</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**第十二章 其他文章链接：**

<table> 
 <thead> 
  <tr> 
   <th><strong>标题</strong></th> 
   <th><strong>链接</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>【第1170期】如何看待员工跳槽</td> 
   <td><a href="https://mp.weixin.qq.com/s/r8f_p0nSbV2ZAXI7xLeCOg" rel="nofollow">https://mp.weixin.qq.com/s/r8f_p0nSbV2ZAXI7xLeCOg</a></td> 
  </tr> 
  <tr> 
   <td>超火的漫画线稿上色AI——style2paints 2.0出新版了</td> 
   <td><a href="http://blog.csdn.net/yH0VLDe8VG8ep9VGe/article/details/78933351" rel="nofollow">http://blog.csdn.net/yH0VLDe8VG8ep9VGe/article/details/78933351</a></td> 
  </tr> 
  <tr> 
   <td>掘金翻译计划，包含各种英文版精彩的技术文章的中文译文（热门）</td> 
   <td><a href="https://github.com/xitu/gold-miner" rel="nofollow">https://github.com/xitu/gold-miner</a></td> 
  </tr> 
  <tr> 
   <td>首个围棋10段诞生！是10连胜柯洁的国产阿法狗（腾讯绝艺）</td> 
   <td><a href="http://mp.weixin.qq.com/s/qGnh4hShKHI992Bfh15hOQ" rel="nofollow">http://mp.weixin.qq.com/s/qGnh4hShKHI992Bfh15hOQ</a></td> 
  </tr> 
  <tr> 
   <td><a href="http://blog.csdn.net/lu_embedded/article/details/78779266" rel="nofollow">关于2018年 九大改变世界的技术趋势</a></td> 
   <td><a href="http://blog.csdn.net/lu_embedded/article/details/78779266" rel="nofollow">http://blog.csdn.net/lu_embedded/article/details/78779266</a></td> 
  </tr> 
  <tr> 
   <td>揭秘前端字符的戏精之路</td> 
   <td><a href="http://mp.weixin.qq.com/s/jTSws4W-PDxVgDvePvMO2g" rel="nofollow">http://mp.weixin.qq.com/s/jTSws4W-PDxVgDvePvMO2g</a></td> 
  </tr> 
  <tr> 
   <td>谷歌大脑2017总结（Jeff Dean执笔，干货满满，值得收藏）</td> 
   <td><a href="http://mp.weixin.qq.com/s/a0HFS95ZXiZXNh5qXbmUBA" rel="nofollow">http://mp.weixin.qq.com/s/a0HFS95ZXiZXNh5qXbmUBA</a></td> 
  </tr> 
  <tr> 
   <td>谷歌大脑2017总结 第二弹（Jeff Dean执笔，干货满满，值得收藏）</td> 
   <td><a href="https://mp.weixin.qq.com/s/RazWCsBY_dF1VR0JTYIjsw" rel="nofollow">https://mp.weixin.qq.com/s/RazWCsBY_dF1VR0JTYIjsw</a></td> 
  </tr> 
  <tr> 
   <td>Git使用入门</td> 
   <td><a href="https://mp.weixin.qq.com/s/xoyQ4TzVKLQb2VjZJLUqFQ" rel="nofollow">https://mp.weixin.qq.com/s/xoyQ4TzVKLQb2VjZJLUqFQ</a></td> 
  </tr> 
  <tr> 
   <td>【第1169期】如何有效地做算法题</td> 
   <td><a href="http://mp.weixin.qq.com/s/Zf__tGoVB_iONKL0lTg1Ew" rel="nofollow">http://mp.weixin.qq.com/s/Zf__tGoVB_iONKL0lTg1Ew</a></td> 
  </tr> 
  <tr> 
   <td>DeepMind提出可微分逻辑编程，结合深度学习与符号程序优点</td> 
   <td><a href="http://mp.weixin.qq.com/s/lPAcNayqcz1sh8xNVklzEA" rel="nofollow">http://mp.weixin.qq.com/s/lPAcNayqcz1sh8xNVklzEA</a></td> 
  </tr> 
  <tr> 
   <td>一张图道尽程序员的出路</td> 
   <td><a href="https://juejin.im/entry/5a9b51d06fb9a028c71dea51" rel="nofollow">https://juejin.im/entry/5a9b51d06fb9a028c71dea51</a></td> 
  </tr> 
  <tr> 
   <td>【第1229期】程序员如何在技术浪潮的更迭中保持较高的成长速度 ？</td> 
   <td><a href="https://halfrost.com/halfrost_2017/" rel="nofollow">https://halfrost.com/halfrost_2017/</a></td> 
  </tr> 
  <tr> 
   <td>【第1238期】如何做一名有能力的专业人士</td> 
   <td><a href="https://zcfy.cc/article/my-manager-who-i-loved-recently-left-my-company-i-summarized-some-of-my-notes-from-our-many-conversations-here-they-are-i-wish-someone-wrote-this-for-me-when-i-started-startups" rel="nofollow">https://zcfy.cc/article/my-manager-who-i-loved-recently-left-my-company-i-summarized-some-of-my-notes-from-our-many-conversations-here-they-are-i-wish-someone-wrote-this-for-me-when-i-started-startups</a></td> 
  </tr> 
  <tr> 
   <td>【第1305期】Hubble 见证 Vue 与 React 突破 10 万 GitHub Stars!</td> 
   <td><a href="https://seven.ooo/hubble-congrats-react-and-vue-100k-stars/#Hubble" rel="nofollow">https://seven.ooo/hubble-congrats-react-and-vue-100k-stars/#Hubble</a></td> 
  </tr> 
  <tr> 
   <td>【第1321期】SVG滤镜对图片调色</td> 
   <td><a href="https://github.com/sundway/blog/issues/14" rel="nofollow">https://github.com/sundway/blog/issues/14</a></td> 
  </tr> 
 </tbody> 
</table>

[70]: /images/20220519/4d5e9851f9894945a932c386bdc03e38.png
[https_github.com_nodejs_node]: https://github.com/nodejs/node
[https_nodejs.org_en]: https://nodejs.org/en/
[http_nqdeng.github.io_7-days-nodejs]: http://nqdeng.github.io/7-days-nodejs/
[http_www.imooc.com_learn_348]: http://www.imooc.com/learn/348
[Node.js]: http://lib.csdn.net/base/nodejs
[PHP]: http://lib.csdn.net/base/php
[Python]: http://lib.csdn.net/base/python
[Java]: http://lib.csdn.net/base/java
[JavaScript]: http://lib.csdn.net/base/javascript
[https_github.com_npm_npm]: https://github.com/npm/npm
[https_docs.npmjs.com]: https://docs.npmjs.com/
[https_docs.npmjs.com_getting-started]: https://docs.npmjs.com/getting-started
[https_segmentfault.com_a_1190000005799797]: https://segmentfault.com/a/1190000005799797
[http_www.cnblogs.com_kelsen_p_4947859.html]: http://www.cnblogs.com/kelsen/p/4947859.html
[http_www.runoob.com_nodejs_nodejs-npm.html]: http://www.runoob.com/nodejs/nodejs-npm.html
[https_github.com_gulpjs_gulp]: https://github.com/gulpjs/gulp
[http_gulpjs.com]: http://gulpjs.com/
[https_github.com_gulpjs_gulp_blob_master_docs_API.md]: https://github.com/gulpjs/gulp/blob/master/docs/API.md
[http_www.cnblogs.com_2050_p_4198792.html]: http://www.cnblogs.com/2050/p/4198792.html
[http_www.tuicool.com_articles_FJVNZf]: http://www.tuicool.com/articles/FJVNZf
[https_www.cnblogs.com_Darren_code_p_gulp.html]: https://www.cnblogs.com/Darren_code/p/gulp.html
[socket.io]: http://socket.io/
[https_github.com_bower_bower]: https://github.com/bower/bower
[https_bower.io]: https://bower.io/
[https_bower.io_getting-started]: https://bower.io/#getting-started
[https_segmentfault.com_a_1190000002971135]: https://segmentfault.com/a/1190000002971135
[https_github.com_browserify_browserify]: https://github.com/browserify/browserify
[http_browserify.org]: http://browserify.org/
[https_github.com_substack_node-browserify_usage]: https://github.com/substack/node-browserify#usage
[http_www.tuicool.com_articles_IFvQ3qv]: http://www.tuicool.com/articles/IFvQ3qv
[https_segmentfault.com_a_1190000002941361]: https://segmentfault.com/a/1190000002941361
[http_www.cnblogs.com_liulangmao_p_4920534.html]: http://www.cnblogs.com/liulangmao/p/4920534.html
[https_github.com_BrowserSync_browser-sync]: https://github.com/BrowserSync/browser-sync
[http_www.browsersync.cn]: http://www.browsersync.cn/
[http_lesscss.org]: http://lesscss.org/
[http_lesscss.cn]: http://lesscss.cn/
[http_sass-lang.com]: http://sass-lang.com/
[https_www.sass.hk]: https://www.sass.hk/
[http_es6.ruanyifeng.com]: http://es6.ruanyifeng.com/
[https_segmentfault.com_a_1190000004365693_articleHeader6]: https://segmentfault.com/a/1190000004365693#articleHeader6
[https_github.com_babel_babel]: https://github.com/babel/babel
[http_babeljs.io]: http://babeljs.io/
[http_babeljs.cn]: http://babeljs.cn/
[https_github.com_kriskowal_q]: https://github.com/kriskowal/q
[http_liubin.org_promises-book]: http://liubin.org/promises-book/
[Node.js 1]: http://nodejs.org/
[https_github.com_expressjs_express]: https://github.com/expressjs/express
[http_expressjs.com]: http://expressjs.com/
[http_www.expressjs.com.cn]: http://www.expressjs.com.cn/
[https_github.com_FortAwesome_Font-Awesome]: https://github.com/FortAwesome/Font-Awesome
[http_www.fontawesome.com.cn]: http://www.fontawesome.com.cn/
[https_yarn.bootcss.com_docs_getting-started.html]: https://yarn.bootcss.com/docs/getting-started.html
[http_mp.weixin.qq.com_s_FnCa0wqdHKQN4syrPIPSAA]: http://mp.weixin.qq.com/s/FnCa0wqdHKQN4syrPIPSAA
[https_github.com_eslint_eslint]: https://github.com/eslint/eslint
[https_eslint.org]: https://eslint.org/
[http_eslint.cn]: http://eslint.cn/
[https_github.com_Microsoft_TypeScript]: https://github.com/Microsoft/TypeScript
[https_www.tslang.cn]: https://www.tslang.cn/
[https_ts.xcatliu.com_introduction_what-is-typescript.html]: https://ts.xcatliu.com/introduction/what-is-typescript.html
[https_code.visualstudio.com_docs]: https://code.visualstudio.com/docs