前端每周清单半年盘点之JavaScript篇

前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号(ID：frontshow)，及时获取前端每周清单；本文则是对于半年来发布的前端每周清单中的JavaScript相关的教程实践与开源项目的盘点，可以查看这里获得往期清单或者其他盘点篇。

教程实践

• 《2017前端开发手册》：Front-End Developer Handbook 2017 由 Cody Lindley 编写，面向每一个希望学习前端的开发者。该手册概括地讨论了前端工程化的相关实践：在2017年中我们应该使用哪些前端工具以及如何学习去使用这些数据。该手册的内容包含了Web技术的基础：HTML、CSS、DOM以及JavaScript，以及基于这些技术构建的优秀开源项目。

• 《现代JavaScript概念纵览》：现代JavaScript开发在过去几年中经历了迅猛的变迁，并且这种变化的势头毫无停滞的预兆。对于很多前端开发者而言可能还不是很熟悉那些JS博客或者文档中提及的时兴的概念。此文讨论了很多起到媒介作用以及高级的概念，和这些概念是如何被适用于现代JavaScript开发中的。本文我们会讨论Statefulness与Statelessness、Immutability与Mutability、Imperative与Declarative Programming、Higher-order Functions、Observables、以及FP、RP、FPR编程范式。

• 《JavaScript启动性能瓶颈分析与解决方案》：随着现代Web技术的发展与用户交互复杂度的增加，我们的网站变得日益臃肿，也要求着我们不断地优化网站性能以保证友好的用户体验。本文作者则着眼于JavaScript启动阶段优化，首先以大量的数据分析阐述了语法分析、编译等步骤耗时占比过多是很多网站的性能瓶颈之一。然后作者提供了一系列用于在现代浏览器中进行性能评测的工具，还分别从开发者工程实践与JavaScript引擎内部实现的角度阐述了应当如何提高解析与编译速度。

• 《GraphicsJS:轻量级绘图库》：目前Web开发中最常用的创建交互式图片的技术选型当属SVG与Canvas，传统的Flash与Silverlight已经慢慢淡出历史的舞台。而对于 SVG与Canvas 的对比也显示，如果是想创建与操作简单的交互性图片，那么SVG当属首选。SVG本身是基于XML的向量图，任何通过svg标签载入的图片都会成为SVG DOM中可操作的对象。而GraphicsJS正是基于SVG的简单易用的JavaScript绘图库。

• 《理解JavaScript中的作用域》：JavaScript中的作用域、闭包以及上下文绑定一直是令人凌乱的知识，此文作者详细地从函数作用域、块作用域、词法作用域、闭包等进行详细阐述，值得一读做个梳理。

• 《ECMAScript 4背后的故事》:本文是对于1999 ~ 2008年之间JavaScript世界发生的大事件的详细介绍，阐述了ECMAScript 4从提出到角力到流产的前世今生。( http://suo.im/phBiE )

• 《深入了解JavaScript中错误对象与堆栈跟踪》：JavaScript中Error对象的堆栈跟踪信息包含了从异常抛出点到构造函数的所有栈帧信息，而手动地去捕获与操作堆栈跟踪信息有助于我们在开发测试或者异常处理相关的框架时有更好地实践。( http://suo.im/MiMWd )

• 《对比探秘WebAssembly性能优越之谜》:本系列文章通过有趣的漫画介绍了WebAssembly的前世今生，并且与JavaScript就加载、解析、编译、执行等浏览进行了详细对比，从而介绍WebAssembly的性能缘何相较于JavaScript会好上很多。同时作者也强调，WebAssembly与JavaScript各有所长，未来并不会存在太多的竞争，更多的是相辅相成，各司其职。( http://suo.im/3jsTUH )

• 《槽糕的JavaScript框架们》：此文作者Matt Burgess严肃地吐槽批评了几乎所有的现今流行的JavaScript框架，与他上一篇文章伟大的JavaScript框架一起阅读效果更佳。当然，作者并不是想让大家回到茹毛饮血的岁月，而是希望能以辩证地态度去认识与使用框架。( http://6me.us/e9R )

• 《JavaScript图片处理库盘点》：图片处理一直是客户端开发中的常见问题，本文则是对基于JavaScript的常见的进行图片滤镜、裁剪等操作的库进行了盘点；本文横向比较了CamanJS、glfx.js、grafi.js、Jimp以及Filtr2这几个常用的图片处理库，并且给出了不同业务场景下的选用建议。( http://6me.us/ylUyM )

• 《Slack是如何减少其客户端内存占用的》：本文是Slack在其桌面应用的开发过程中探索出的如何减少应用内存开销的经验介绍。Slack最初为用户的每个登录团队都启动了相同的处理进程，而后根据调研发现仅有部分用户会同时使用多个团队；因此Slack从卸载后台团队的DOM树、分拆JavaScript代码进行优雅降级、重构JavaScript代码库等多个方式来优化桌面应用的内存占用。( http://6me.us/z0XSh3 )

• 《流行网站上陈旧的JavaScript库留存调研》：本文是Tobias Laudinger及其合作者对于客户端JavaScript库的使用现状的调研报告；基于对于超过133K个网站的调查结果，它们发现大约37%的站点仍然使用了某些存在已知漏洞的JavaScript客户端脚本，它们建议我们一定要慎重思量网站中引入的外部依赖，特别是对于那些已经运行了很久的站点。( http://6me.us/csu2da )

• 《编写JavaScript框架：客户端路由》：本文是编写JavaScript框架系列的最后一篇，主要着眼于讨论如何实现JavaScript客户端路由及其与服务端路由的区别。( https://parg.co/bOL )

• 《面向“远古” Web开发者的现代JavaScript教程》：本文主要是面向那些从PHP、JSP、Rails占据统治地位时开始进行Web技术的开发者进行常见的现代JavaScript基础概念的介绍。( https://parg.co/bsF )

• 《解密JavaScript异步编程》：JavaScript中异步编程历经了多个大的迭代，从回调到Promise到生成器以及现在的Async/Await；本文作者则是高屋建瓴地介绍了JavaScript异步编程的变迁历史以及简要的内部实现原理。( https://parg.co/bsz )

• 《ES7 Async/Await常见误区》：ECMAScript 6引入的Promise大大简化了JavaScript中异步编程语法，而ES7引入的Async则使其更为优雅；本文作者对于实践中常见的对于Async/Await的语法误用案例进行了解析。( https://parg.co/bsW )

• 《Composing Software》：本系列文章由Eric Elliott大神发布，着眼于介绍JavaScript函数式编程与大型软件项目中的可组织性技术的介绍，包括了函数式编程导论、高阶函数、Reduce、Functors & Categories等几个部分，还在持续更新中。( https://parg.co/bQY )

• 《12个精妙的JavaScript代码片》：本文作者分享了十二个非常不错的JavaScript代码片，这些代码片能够帮你优化现有代码，让代码更加地赏心悦目。( https://parg.co/bhH )

• 《JavaScript中构建响应式引擎》：本系列文章介绍了如何在JavaScript中构建高性能的响应式引擎，对于有兴趣了解MobX底层原理的同学来说也是个不错的教程，目前包含了对于可观测对象的构造解释、属性推导与依赖追踪等内容( https://parg.co/bhR )

• 《深入浅出构建简单的Chess AI》：本文作者介绍了如何基于JavaScript构建一个国际象棋的AI，虽然不属于前端开发范畴，不过还是蛮有意思的一篇文章。本文主要包括移动生成、棋盘可视化、位置评估、基于Minimax算法的搜索树、Alpha-beta修剪等等。( https://parg.co/bCw )

• 《使用JavaScript打造智能咖啡机》：这几年智能家居与IOT的概念非常火热，作者也发挥极客精神改造了一下办公室的咖啡机。文中作者借助了Tessel与Johnny-Five智能硬件平台，自定义了超文本咖啡机控制协议HTCPCP，将咖啡机改造为了能够提供类REST服务的终端，能够远程控制与实时监控。

• 《使用Chrome devtools检视代码覆盖》：近日Chrome Canary版本中新增了执行代码覆盖率检查的特性，其能够反映你的Web应用中的每个JavaScript/CSS文件中的代码覆盖率以及所有的未被执行的行。

• 《JavaScript模块演化史》：当初Brendan Eich草创JavaScript之际估计想不到它会在之后的二十年内起到如此重要的作用，本文则是深度回顾了缺乏模块化带来的困难以及这二十年间从命名空间、依赖注入、CommonJS、AMD、UMD到ES2015 Modules等等十余种不同的模块解决方案。( https://parg.co/bhn )

• 《使用Inline Cache优化动态JavaScript代码》：本文是作者在开发JSIL开源库时使用的一系列优化手段的总结，主要关于如何使用多态在线缓存(Polymorphic Inline Cache)来优化代码执行速度，不过这种方式也有可能造成意外的变化。作者介绍了何谓Inline Cache及其优化原理和带来的性能提升评测等内容。( https://parg.co/b4a )

• 《基于JavaScript构建数据表达式分词器》：本文是一篇挺有意思的文章，介绍如何利用JavaScript解构常见数学表达式并且从中提取出相关实体。本文涉及到的内容包括对于分词器的简单介绍、对于抽象语法树AST的介绍以及最终如何使用代码来实现分词算法。( https://parg.co/bRO )

• 《TypeScript在Slack的实践分享》：维护大型的跨平台的JavaScript代码库是一件非常具有挑战性的工作，无论是从Chrome的JavaScript中传递对象给Objective-C或者单纯的接受来自Node.js中的回调结果，你都需要保证不同的代码对于通讯对象的期望之间的一致性。而本文即是在开发跨平台多终端的应用中，Slack使用TypeScript来约束类型，从而避免意外的类型不一致导致的崩溃的实践经验分享。( https://parg.co/bRR )

• 《2017里JavaScript带给我的感动》：本文作者纵览了在2017年中JavaScript生态圈可能迎来的一系列巨大变革。他首先对比了JavaScript与Reason，浅述了二者的优劣对比。然后介绍了WebAssembly以及另一个新兴语言Rust未来可能在JavaScript生态圈中占据的一席之地。最后，作者还介绍了Docker、Now.sh以及Github Pages等一系列优秀的辅助开发工具，并且畅想了去中心化浪潮下Web的未来发展。( https://parg.co/bRh )

• 《JavaScript中处理undefined的7个技巧》：不同于Python或者Java中仅有null或nil来表示空值，JavaScript为我们提供了undefined与null。本文则是深度分析了undefined与null的区别，讨论了实际工程开发中undefined的使用场景，譬如未初始化对象、不存在的对象属性或者方法、越界访问、无返回值的函数等；作者最后还给出了一些对于undefined的注意点，譬如提高内聚性降低耦合性等。( https://rainsoft.io/7-tips-to-handle-undefined-in-javascript/ )

• 《2017年JavaScript测试技术概述》：本文涵盖了2017年中JavaScript领域流行的测试理念、名词与概念、工具以及测试的方法论。本文介绍了基本的测试类型的划分、常用测试工具的划分、以及Jest、Mocha、Nightwatch这样的常用测试工具的选项与实践技巧。( https://parg.co/bf3 )

• 《Microsoft Edge中的JavaScript性能、WebAssembly以及Shared Memory》：JavaScript的性能表现是Web开发中永恒的话题，而Microsoft Edge团队也在实时接收用户反馈以提升Chakra JavaScript引擎的性能表现。本文首先介绍了Chakra中的新特性，包括了一系列提升JavaScript性能表现的技巧；然后还讨论了WebAssembly、Shared Memory与Atomics等新特性在Edge中的具体实现。( https://parg.co/bfk )

• 《8小时内学习Node.js》：Node.js是基于Google Chrome V8引擎的JavaScript框架，其能够用于开发类似于视频直播、单页应用等IO密集型的Web项目。而本文则是提供了完整的从零到一的Node.js学习路线图，包含了基础的环境构建、Console使用、核心模块使用、基本的Web服务器搭建等等内容。( https://parg.co/bNy )

• 《CSS-in-JavaScript：基于组件的样式组织》：通过使用内联样式，我们能够利用JavaScript带来的可编程性的便利来组织样式代码。它能够为我们提供类似于CSS预处理器、命名空间等多方面的辅助。本文则是介绍了几个常见的适用于CSS-in-JS技术的场景，譬如排版、空格等。( https://parg.co/bNe )

• 《从零开始基于JavaScript构建简单神经网络》：本文不是纯粹的前端开发文章，对于听说过人工智能与神经网络并且有兴趣的开发者不妨一读。而本文则是渐进地介绍神经网络与深度学习理论基础、如何使用JavaScript实现简单的数学公式、如何实现简单的神经网络等内容。( https://parg.co/bNa )

• 《在Web开发中谨慎使用CSS in JavaScript》：CSS是有缺陷的，不过很多项目在选择使用CSS-in-JavaScript来组织样式的时候，却是对于CSS与CSS-in-JS很多的误解。本文以Styled-Component为例，列举出了常见的9个误解，譬如使用CSS-in-JS才能解决命名空间冲突、保证样式的可扩展性、带来了性能提升与样式文件的可组织性等等。( https://parg.co/bNR )

• 《d3.express：集成交互式编码环境》：本文介绍了尚在开发中的d3.express，一个类似于Python Juypter Notebook的交互式编码环境。d3.express允许开发者使用大量d3内置的功能函数，譬如加载远程的CSV文件；并且允许开发者交互地实时预览SVG、Canvas等绘制结果，有人认为d3.express会是一种基于JavaScript的更好的数据可视化解决方案。( https://parg.co/bNi )

• 《V8不再使用基准测试引擎Octane》：JavaScript基准测试引擎是一段不断进化的历史。随着网页从原始静态页面到现在富客户端应用，都需要基准测试引擎能够与时俱进。SunSpider是其中比较早的基准测试引擎，它为快速优化JavaScript提供了基础。但是，随着虚拟机开发者意识到微基准测试的局限性，基准测试引擎随之更新，针对SunSpider的短板进行优化，同时浏览器社区也将SunSpider从推荐基准测试引擎中剔除。Octane基准测试套件最早发布于2012年，旨在减轻早期微基准测试引擎的一些缺陷。它源于V8的早期简单测试用例，最终成为通用网页性能的基准测试。Octane包含17个不同的测试集，以覆盖各种不同的工作场景。Octane的内容代表它创建时度量JavaScript性能的主流方式。( https://parg.co/bN9 )

• 《JavaScript代码风格要素》：本文是Eric Elliott编写的JavaScript代码风格要素指南与建议，其借鉴了1920年的面向英文语言的 “The Elements of Style” 一文。本文介绍的关键要素包括：使用函数最为组合的原子单元并且保证函数的单一职责性、移除不需要的代码、使用更直观具有自解释性的变量命名、根据特性进行代码划分等等。( https://parg.co/bMn )

• 《简短的WebAssembly卡通指南》：现在有很多关于WebAssembly与JavaScript生态圈的讨论，人们往往关注于WebAssembly带来的巨大的性能提升以及它会如何颠覆现代Web开发。不过很多的介绍中并没有详细阐述隐藏在速度提升之后的具体细节，本文则是从整个JavaScript的演化史来介绍WebAssembly巨大性能提升的原因。( https://parg.co/bVa )

• 《基于JavaScript的异步依赖加载》：在Web应用开发中我们经常会将一些首屏不需要的脚本或者样式文件以异步方式加载；而本文则是介绍了多种异步加载网页中依赖资源的方式，作者还将常用的方法整合为了fetchInject这个开源库，方便使用者快速进行脚本地异步加载。( https://parg.co/bkG )

• 《基于Electron构建Github Desktop Beta》：Electron是著名的利用HTML、CSS、JavaScript等Web技术构建桌面应用的辅助工具；本文则是介绍了四个仅有原生应用开发背景的工程师如何利用Electron逐步构建Github Desktop Beta的经验。( https://parg.co/bkK )

• 《编写现代JavaScript代码》：JavaScript被仅用来更新页面元素状态的日子一去不返，我们也需要编写更加现代的JavaScript代码。本文则是介绍了如何利用Linter来格式化代码、如何使用ES2015+特性、如何使用函数式编程等建议来提升JavaScript的代码质量。( https://dev.to/scastiel/writing-modern-javascript-code )

• 《重构Airbnb前端架构》：本文是近日Airbnb开发团队在思索重构代码库中JavaScript部分的经验总结，主要着眼于产品驱动开发以及技术沉淀、从传统的Rails架构中积攒的经验以及新的技术栈的某些特性等方面。本文首先介绍了从Rails迁移过程中的一些经验，譬如将原本完全的服务端渲染界面所需要的数据切分为了API与Non-API两大类，并且使用Hypernova来进行React服务端渲染。然后介绍了如何在应用前端通过引入懒加载与异步加载等方式提升前端性能与用户体验。( https://parg.co/bkA )

• 《最终，JavaScript成为了一流语言》：2003年，保罗·格雷厄姆(Paul Graham)在文中提到，他的公司决定使用Lisp(一门编程语言)，并且指出自己公司相比竞争对手的优势在于Lisp。如果Lisp像法语，那么现如今的JavaScript就像英语一般。尽管二者的语法不一致，但英语是世界上最广泛使用的语言，JavaScript是最广泛应用的计算语言。然而，JavaScript仍未得到与其他语言同等的尊重。尽管它的使用率在创业公司和大型公司中持续增长，但若非必要，人们不会认为它是一门有用的语言。大公司的高级工程师声称它不是一门“真正的”编程语言，许多人并不知道除了操作像素外它还能被用于何处。。( https://parg.co/bkb )

• 《理解WebAssembly的文件格式》：为了保证WebAssembly能够被人们阅读与理解，需要提供对于wasm二进制格式的文本表示。该特性着眼于能够在文本编辑器、浏览器开发者工具等开发工具中浏览WebAssembly文件，而本文则介绍了这种文件格式的规范与工作原理，以及底层的字节码与上层的JavaScript对象之间的关联关系。( https://parg.co/bk6 )

• 《JavaScript单元测试框架大乱斗：Jasmine、Mocha、AVA、Tape以及Jest》：在开始新的前端项目时，我们常常会考虑应该使用哪一个单元测试框架，或者考虑应该为哪些代码添加单元测试。而本文则对于常用的Web开发中的单元测试框架Jasmie、Mocha、AVA、Tape以及Jest进行了横向对比，并且基于自己的经验给出了不同应用场景与需求下不同的单元测试框架选项建议。( https://parg.co/bJ5 )

• 《Web前端开发的未来》：本文作者从自己的实践出发畅想了未来Web前端开发的可能方向；主要包括JavaScript新特性的增强以及对于状态管理的深入、从简单界面逐渐过渡到完整系统、原生与Web之间的边界逐步消失、CSS会逐步模块化并且预处理器会逐步退出历史舞台、性能仍然是关键瓶颈以及URL会变得愈发重要等多个方面。( https://parg.co/bJr )

• 《面向Web设计师与开发者的免费电子书合集》：本文介绍了十数本优秀的面向Web设计师与开发者的免费的电子书，涵盖了CSS&HTML基础、现代JavaScript开发、Git、PHP等多个领域。( https://parg.co/bis )

• 《hyperapp》：hyperapp是仅1KB大小的用于构建前端应用的JavaScript库，它基于Elm架构，支持声明式界面编程与函数式编程，允许使用JSX声明界面并且灵活地分割与合并自定义的标签。hyperapp实现的简洁明了，是不错的可以阅读源码的轻量级框架。( https://github.com/hyperapp/hyperapp )

• 《这WebAssembly，是Mozilla赢了》：Mozilla提出1 asm.js与Google Chrome提出的PNaCI是都是致力于在浏览器中运行原生代码的技术方案。不过PNaCI却存在着自绝于JavaScript以及HTML等问题，并且其他的浏览器厂商很难去支持PNaCI标准。而asm.js则以轻量级的对于标准Web平台扩展的方式实现了这一目标，也就导致了最终WebAssembly决定靠近asm.js而不是PNaCI。( http://robert.ocallahan.org/2017/06/webassembly-mozilla-won.html )

• 《JavaScript模块现状》：近日随着各大浏览器纷纷开始支持ESM(ECMAScript Moduls)，Node.js中也计划引入 *.mjs 作为ESM的文件扩展名，关于JavaScript模块化的未来发展也在社区引发了热切讨论。本文则是首先介绍了ESM在浏览器、Webpack等构件工具以及Node.js中未来的实现，然后讨论了个人对于ESM未来发展以及对于程序开发本身的潜在影响。( https://parg.co/bi0 )

• 《WebAssembly初体验：重构简单游戏引擎》：WebAssembly为我们提供了构建高性能的前端应用的途径，而本文则从零开始介绍如何使用C来覆写简单的JavaScript游戏引擎并且将其编译为WebAssembly。本文依次介绍了如何搭建基础的Emscription工具链、使用JavaScript引入wasm模块、覆写并且优化某个小型游戏引擎、两个引擎的性能评测等等部分。( http://blog.openbloc.fr/webassembly-first-steps/ )

• 《CSS局部作用域变量详解》：CSS自定义属性或者所谓的CSS变量，为我们带来了真正的、不同于SASS等预处理框架中使用的类占位符的动态变量。本文介绍了CSS变量的基本定义语法与使用，以及如何使用JavaScript来动态修改CSS变量值从而动态地进行界面重渲染，最后阐述了目前浏览器对于CSS变量的支持情况以及可以使用的兼容方式。( https://parg.co/bLS )

• 《Flow与TypeScript》：本文主要对比了Flow与TypeScript这两个常用的JavaScript静态类型检测工具，首先介绍了在简单项目中如何使用TypeScript与Flow。然后对比了二者在类型覆盖率上的渐进对比，会发现使用Flow之后因为其较为严格的类型要求会相对较快地实现高覆盖，而TypeScript则相对较为松弛。( http://thejameskyle.com/adopting-flow-and-typescript.html )

• 《JavaScript中类的私有域定义》：目前对于类中的私有域定义已经达到了Stage 2，本文即是详细介绍#private语法的使用以及设计理念。顾名思义，我们可以使用#privateFieldName方式来定义类中的私有域，该私有域仅允许该类的方法访问(包括静态方法)。本文还介绍了使用这种HashTag方式而不是其他语言中常见的private关键字来定义的考量。( http://thejameskyle.com/javascripts-new-private-class-fields.html )

• 《CSS的现状》：毫无疑问我们正在见证着JavaScript社区与生态的极速变化，而与此同时可能很多人没有关注到CSS社区的进展，本文作者则是对于CSS的现状进行了综述并且提出了个人的观点。本文作者主要提出了五个论点：我们可以使用CSS Module来替代原有的BEM等命名方案、使用Flexbox来替代float、使用CSS Grid来替代第三方网格库、使用CSS内置的变量、计算函数等特性来替代SASS等预处理库，乃至于最终我们完全可以使用CSS-in-JS来替代CSS。本文具有极强的主观色彩，请批判性阅读。( https://parg.co/bLZ )

• 《billboard.js》：基于D3 v4+的轻量级可重用的JavaScript图表库，支持IE 9以上浏览器。billboard.js为我们提供了常见的柱状图、时序图、饼图等等多种图表类型。( https://github.com/naver/billboard.js )

• 《如何用好JavaScript console》：JavaScript中最主要的的调试工具之一即是 console.log，而console对象还包含着其他几个常用的调试方法。本文则是介绍了console对象，以及如何使用它进行简单的时间消耗评测、优化数组或者对象输出格式、通过CSS优化输入等等。( https://parg.co/b9o )

• 《现代Web开发魔法书》：本书是对现代JavaScript Web开发中涉及知识的分类与介绍，来源于作者日常工作中发送给全栈Web团队新人的资源；目前已经纳入了超过两千的涵盖了项目、工具、插件、服务、文章、数据、站点等多方面的链接。本书包含了Web平台概述、HTML5，CSS，JS特性介绍、常用的GUI框架与架构介绍、应用开发流程中使用的工具介绍等等栏目。( https://parg.co/bv9 )

• 《基于JavaScript的机器学习》：人工智能与机器学习的浪潮汹涌而来，JavaScript也并非旁观者；可能有很多人认为JavaScript过于缓慢、缺乏大量的科学计算库、仅适用于Web开发，而本文以及系列文章则深入浅出地介绍了如何利用JavaScript进行常见的深度学习操作。本文即以简单的回归拟合为例，从最基础的库安装、数据导入、数据预处理到模型训练、模型预测 介绍了如何使用JavaScript进行简单的机器学习任务。( https://parg.co/b9K )

• 《JavaScript内存管理速成》：本系列文章以漫画的方式生动有趣地介绍了JavaScript中内存管理的相关知识，首先介绍了JavaScript与C这两个风格迥异的语言是如何进行内存管理的，然后讨论了ArrayBuffers与ShardArrayBuffurs存在的意义以及可能引起的临界情况，最后讨论了在未来WebAssembly开发中应该如何使用Atomics来处理并发情况下的临界情况。( https://parg.co/b9p )

• Rust、WebAssembly与Webpack：WebAssembly是新的运行于Web平台的二进制格式，我们能够将C、C++、Rust这些语言编译到.wasm文件格式中然后在浏览器环境下运行他们；通常这些编译后的代码在包体体积与运行速度上都会比JavaScript有明显提升。而本文则着眼于介绍如何在浏览器中执行底层的Rust代码，也可以参考这篇文章( https://parg.co/by4 )来了解更多的关于WebAssembly快速实践的知识。( https://parg.co/byh )

• JavaScript在嵌入式设备与物联网中的应用现状：随着近年来Web的发展与JavaScript的崛起，JavaScript被应用到了许多原本不曾想象到的场景中，从服务端、工作站、数据库、桌面环境到物联网设备中，都可以见到JavaScript的身影。而本文则概括了JavaScript在不同的嵌入式微型设备中的应用现状，并且选择了具有代表性的设备介绍了具体的使用场景与实践方法。( https://parg.co/byr )

• 基于JavaScript的机器学习：深入监督学习算法：本文是基于JavaScript的机器学习系列的第二部分，主要介绍监督学习算法kNN。kNN算法通常被用于分类或者回归问题，本文首先介绍了kNN算法的基础原理，然后介绍了如何利用ml-knn、csvyojson、prompt等库对Iris数据集中的数据进行训练与预测。( https://parg.co/byR )

• JavaScript中存在纯函数吗？：随着函数式编程在前端界面开发中的流行，纯函数的概念相信很多人都很熟悉，不过文本作者认为JavaScript中是否存在真正意义上的纯函数还值得商榷。本文首先介绍了纯函数的基本定义，然后给出了我们熟知的JavaScript中常见的纯函数定义范式。不过作者认为函数是JavaScript中的一等公民，函数变量或者某个Object的属性方法都有可能被重新赋值，因此JavaScript中无法构建真正严格的纯函数。( https://parg.co/by6 )

• 基于Headless Chrome的自动化测试：本文介绍了如何在Headless Chrome环境中使用Karma作为测试驱动运行基于Mocha与Chai的自动化测试用例。Headless Chrome允许我们在无界面环境下，使用特性完备的Chrome来执行JavaScript脚本并且渲染网页。本文首先介绍了使用karma-chrome-launcher来搭建本地启动Chrome环境，然后介绍了使用Mocha与Chai来编写基础测试用例，最后还讨论了如何自定义Headless Chrome启动器并且集成到Travis CI环境下。( https://parg.co/beo )

• Webpack中的作用域提升简介：近日发布的Webpack 3中引入了所谓的Scope Hoisting新特性，从社区的反馈来看该特性已经在很多项目中成功地帮助开发者减少包体大小，提高首屏加载效率；本文则是简要地介绍了Webpack 3中作用域提升的基础原理。本文假设你对于JavaScript中闭包与模块语法有所了解，首先介绍了在老版本Webpack中采用的作用域分割机制及其存在的额外的性能损耗，然后对比呈现了在引入作用域提升机制之后，打包而成的文件的形式，与其带来的性能提升原理。( https://parg.co/beE )

• 为什么我们选择TypeScript：本文是Reddit工程师Niranjan Ramadas记述在前端技术选型时选用TypeScript的考虑过程。作者认为任何语言都有其优缺点，不过合适的语言应该具备如下特点：强类型、完备的工具链支持、能够用于生产环境等。作者还特地比较了TypeScript与Flow，TypeScript是能够编译到JavaScript的超集语言，而Flow则是提供了一系列额外的注解来实现类型系统。Flow能够保证较好的类型覆盖，但是其对于多态性的支持并不是很好，并且TypeScript的社区也相对活跃。( https://parg.co/beb )

• TC39，ECMAScript与JavaScript的未来：本文是Nicolás Bevacqua在腾讯前端大会上发表的同名演讲的总结，介绍了TC39与ECMAScript的含义，概述了ECMAScript中提案的步骤以及部分代表性提案，同时还畅谈了JavaScript的未来发展方向。作者介绍了Stage 0、Stage 1、Stage 2、Stage 3这四个提案处理进度的具体含义与要求，并且列举了Array#includes、Named Captures等具体的例子来阐述JavaScript不断衍化的语法特性；作者还介绍了未来社区会持续关注的代码转译与适配、代码质量保证、代码打包与发布等多个领域。( https://parg.co/bXD )

• JavaScript中的函数式编程就是反模式(*本文仅代表原作者个人意见)：作者在本文中对比讨论了JavaScript与Clojure，并且介绍了ClojureScript的基础用法与优势所在。作者首先讨论了他认为的函数式脚本语言应该包含的特性，包括充分的API、内建的不可变数据结构等；然后阐述了lodash、fp、Rambda这样的单个库存在的不足，譬如ImmutableJS虽然能较好地解决部分问题，但是却会割裂使用者的开发体验。最后笔者介绍了ClojureScripe的特性与优点，包括能够在编辑器中单行运行、内建的大量转化函数、较好地性能与代码可读性保证等等。( https://parg.co/beH )

• JavaScript项目开发样式指南：开启新的项目就好像在绿地上肆意撒欢，此时的开发者拥有极大的自由；不过如果缺乏良好的基石，未来的项目维护可能会成为你的梦魇。本文即搜集了来自 Hive 研发团队的JavaScript项目开发指南，涵盖了Git、文档规范、环境变量控制、依赖管理、测试、文件结构与命名、代码样式、日志、API设计等多个方面；更多JavaScript工程实践资料参考 https://parg.co/bIO 。( https://github.com/wearehive/project-guidelines )

• 前端JavaScript面试问题总结：本文作者发现目前并没有太多令人满意的前端JavaScript面试问题列表，因此他基于自己的面试经历与实践总结出了本文。本文主要包含以下部分，首先是基础概念的认知，譬如对于闭包、EventLoop、REST等概念的介绍；然后是对于编码能力的考量，譬如对于常见的数据结构与算法的实现、代码调试能力与错误定位的评测等等；最后是对于整体系统设计能力的考量，譬如如何设计全栈的Twitter实现架构等等。( https://parg.co/bIL )

• JavaScript开发中常用的十大数据结构详解：数据结构是软件开发的重要组成部分之一，也是求职面试中常见的主题之一；本文将回顾介绍JavaScript中常用的十大数据结构，并且给出详细的教程与在线实践链接。本文涉及到的数据结构包括链表、栈、队列、集合、映射、哈希表、二叉搜索树、Trie树、二叉堆、图等；更多数据结构与算法相关资料参考 https://parg.co/bIt 。( https://parg.co/bIC )

• 代码风格约定与标准：本仓库提供了一系列的各个语言的常用代码风格约定与标准，与JavaScript相关的包含了来自Google、Airbnb等多个公司或者社区的样式规范，还有包括HTML、CSS、SCSS等一系列Web相关的规范。

• ES6中的JavaScript工厂函数实现：本文归属于Eric Elliott发布的Composing Software系列，介绍在JavaScript ES6语法背景下如何实现工厂函数。所谓工厂函数即是非类或者构造函数的，能干会某个新创建对象的函数；工厂函数能够简化我们创建新对象的过程，本文即是详细地介绍了如何实现工厂函数，也是一篇不错的ES6函数语法讲解；更多JavaScript相关资料参考 https://parg.co/bMI 。

• 基于JavaScript的Web应用的端到端测试工具对比：本文回顾了常见的基于JavaScript的，用于对Web应用进行端到端测试的工具，并且对它们进行了简单对比。本文首先探讨了项目中应用端到端测试的意义，然后列举了当前可用的基于JavaScript的界面自动化测试框架，然后比较了不同的端到端测试框架的流行程度与基本的代码片风格；更多Web测试相关资料参考 https://parg.co/bWd 。

• JavaScript Binary AST提案：随着Web应用体积的不断增加，页面启动时间逐渐成为了应用性能的主要瓶颈之一；我们可以通过多种方式来缓存代码，但是对于大型代码库的解析却难以直观解决。譬如在现代的笔记本上，Chrome在加载Facebook.com的时候需要花费10%到15%的时间来解析JavaScript代码。本文介绍了由多位工程师提出的旨在提升JavaScript解析速度的Binary AST方案，本文介绍了当前解析中的瓶颈所在，并且给出了相应的解决建议。

• 自定义基于JavaScript的16位虚拟机：本文介绍了如何利用JavaScript自定义16位虚拟机，主要包括如何设计某个简单的汇编语言、如何构建某个编译器能够将 *.asm 文件编译为可执行格式、如何构建某个能够模拟内存、CPU以及部分IO操作的虚拟机。文章内容依次介绍了虚拟硬件的基础、限制、汇编语言、编译器、调试器、编码与解码等内容；更多JavaScript相关资料参考 https://parg.co/bMI 。

• JavaScript设计模式学习：本书是Addy Osmani著作的开源书籍，主要介绍面向JavaScript语言的经典与现代的常用设计模式。所谓设计模式即是软件设计中常见问题的可复用解决方案，对于任何一门编程语言都是非常值得探索的话题。本文首先概述了设计模式的基础理论，然后介绍了JavaScript中常见的十余种类与对象的设计模式，接下来介绍了JavaScript界面设计相关的 MV* 设计模式，然后还介绍了JavaScript模块化设计以及jQuery中的设计模式等内容；更多JavaScript设计模式相关参考 https://parg.co/bIO 。

• V8新的Turbofan JIT编译器带来的性能特性概述：V8 JavaScript引擎最早是Google为Chrome浏览器开发的JavaScript虚拟机，其设计的初衷就是为了让JavaScript能够高速运行；而这种性能优化的保障就是所谓JIT编译器。本文着眼于介绍V8新的Turbofan JIT编译器提供的新的性能特性能够为应用带来的优化；本文依次介绍了使用delete操作符与设置为undefined这两种不同的去除对象属性的方式在新的编译器下的表现差异、对于Arguments参数不同操作的对比、柯里函数与bind操作符的优化，以及对象遍历、对象创建和对于新旧引擎中对于常见的Winston等日志框架的性能对比等内容。更多JavaScript引擎相关知识参考 https://parg.co/bgp

• JavaScript之路：本书希望为任何对JavaScript有兴趣的开发者提供JavaScript的多领域知识，其兼具了入门简单、对初学者友好、使用ES2015语法以及规范的样式指南等特点。本书主要包含以下章节：JavaScript语法基础、利用DOM接口创建交互性的网页、构建完整的Web应用等内容；更多JavaScript相关资料参考 https://parg.co/bMI 。

• 2017 Web开发趋势：Web开发在2016年里得到了长足的发展与进步，而本文则高屋建瓴地分析了2017年中Web开发可能面临的机遇与挑战。作者首先讨论了人工智能的前景以及Web与之相结合的案例，然后讨论了物联网行业中Web相关的开发案例；接下来作者分析了崛起的JavaScript以及目前流行的项目，然后又从静态网站生成器、虚拟现实、GIFs、Bots等角度讨论其他的发展方向。

• JavaScript中有趣而又无语的例子：JavaScript是一门有趣的语言，它有着简单的语法、庞大的生态系统与社区，不过JavaScript中也有着很多令人无语的地方。本文即是对JavaScript中一些有趣的、出乎意料的用法收集，对于初学者是个不错的深入教程，而对于资深开发者也可以拿来作为面试题目。本文中包含的例子譬如 [] == ![]、NaN的用法注意、try-finally等等；更多JavaScript相关资料参考 https://parg.co/bMI 。

• 基于Proxy的PopUnder库反混淆：本视频通过对某个商用的Chrome 59中PopUnder库，的执行过程解析，来介绍如何利用ES6的Proxy进行，简单的JavaScript混淆代码逆向破解。视频还是挺有意思的，作者首先分析了经过混淆的源代码，发现无法下手；然后利用Proxy监听常见的Windows中createElement等函数的调用来了解该库的执行流程，最后再根据API的调用顺序复现出该库。更多JavaScript设计模式相关参考 https://parg.co/bIO 。

• 三周时间打造全栈JavaScript Web应用：本文记录了某个编程初学者如何用三周时间，循序渐进地从零构建出，基于JavaScript的全栈电子商务应用。本文从最初的产品设计与原型图构建开始，然后介绍了如何选择合适的数据结构与数据库。接下来介绍了如何创建Github仓库并且使用敏捷开发流程，最后介绍了如何利用Express与Firebase搭建服务端、使用React以及Victory.js构建前端应用等内容；更多JavaScript相关学习参考现代JavaScript开发：语法基础与实践技巧。

• 基于CSS与JavaScript的帧动画教程

#开源项目

• 《开源在线代码演示网站Dwitter发布 》：Dwitter是类似于CodePen这样的，不过专注于JavaScript代码片演示的网站，已经有很多开发者在上面贡献了奇妙的基于JavaScript的动画或者小程序。

• 《开源在线代码演示网站Dwitter发布 》：Dwitter是类似于CodePen这样的，不过专注于JavaScript代码片演示的网站，已经有很多开发者在上面贡献了奇妙的基于JavaScript的动画或者小程序。

• 《notie》：这是一个轻量级的、零依赖的面向JavaScript的通知、输入以及选择套件库。它允许弹出警示信息、确认输入框、允许用户输入信息、允许用户进行选择以及进行日期选择等。( https://github.com/jaredreich/notie )

• 《在浏览器中实现自动驾驶汽车》：人工智能与深度学习的浪潮滚滚而来，也给我们带来了很多有趣的应用。该项目利用JavaScript创建了一个完整的自我学习的代理，能够在一个2D环境下控制某个车辆自动规避各种障碍 。用户还可以通过鼠标绘制出新的障碍，而小车可以通过强化学习不断进行自我更新，值得一试。( http://suo.im/4egERz )

• 《UnCSS》：UnCSS能够帮助你从样式表中移除HTML中未被用到的样式，它支持多文件以及JavaScript样式定义，并且提供了接口、命令行、构建插件、POSTCSS插件等多种使用方式。( https://github.com/giakki/uncss )

• 《wasm-loader》：wasm-loader是能够用于Webpack的WASM二进制模块导入工具，其能够允许你在JavaScript代码中导入wasm格式文件并且将二进制文件打包成为JS Bundle的一部分 。( https://github.com/ballercat/wasm -loader )

• 《marky》：marky是基于performance.mark/measure封装的高性能JavaScript计时器，其相较于console.time()以及console.timeEnd()具有更好地性能表现，相较于简单的Date.now()具有更好地准确度。( https://github.com/nolanlawson/marky )

• 《Planck.js》：Planck.js是基于JavaScript的2D物理引擎，能够用于创建跨平台的HTML游戏。( http://piqnt.com/planck.js/ )

• 《Tippy.js》：Tippy.js是基于纯粹的JavaScript的轻量级无添加的ToolTip库。( https://atomiks.github.io/tippyjs/)

• 《Fathom》：Fathom是Firefox开源的用于提取网页中有意义内容的JavaScript框架，其能够有效识别页面中的前进/后退按钮、地址表单以及主文本内容等等。( https://github.com/mozilla/fathom )

• 《k6》：k6是基于Go与JavaScript开发的现代压测工具，它提供了非常清晰简单的JavaScript接口；同时它基于Go提供了分布式的部署方案，支持云端部署与REST接口控制。( https://github.com/loadimpact/k6 )

• 《Mavo》：Mavo是纯粹的基于HTML标记的用来创建富客户端Web应用的框架，它允许开发者在没有服务端或者JavaScript脚本的情况下快速创建动态应用。( https://parg.co/b8n )

• 《Workbox》：Workbox是来自Google Chrome团队的快速将现有应用转化为Progressive Web Apps的JavaScript库；Workbox允许我们通过Webpack插件、Gulp插件以及npm脚本的方式快速地为当前应用的资源创建对应加载ServiceWorker。( https://workboxjs.org/ )

• 《Birdview.js》：Birdview.js是个非常有趣的JavaScript插件，它能将整个页面以鸟瞰图的方式呈现给用户，并且允许用户直接进入选中的点。( http://achrafkassioui.com/birdview/ )

• decaffeinate：CoffeeScript在很长一段时间内帮我们解决了传统JavaScript中存在的痛点，不过随着ES6&ES7的逐步流行，我们还是要从CoffeeScript中回归到JavaScript；decaffeinate正是能够方便地将CoffeeScript代码转化为现代的JavaScript代码。( https://github.com/decaffeinate/decaffeinate )

• golden-layout：golden-layout是非常强大的基于JavaScript的Web布局工具，它支持窗口的拖拽、缩放以及原生式的弹窗，同时golden-layout还提供了丰富的接口以方便动态增删元素、修改布局或者自定义主题。golden-layout官网还提供了与RequireJS、React、Angular等多种其他流行框架协同使用的示例。( http://golden-layout.com/ )

• icaro：icaro是轻量、高效地JavaScript对象观察者实现，能够自动监测JavaScript中对象的变化并且进行相应地譬如DOM更新等操作。icaro使用了大量的ES6的特性，譬如Proxies、WeakMaps、Maps以及Symbols，是非常不错的可以用来学习利用最新的语言特性实现JavaScript响应式框架的开源库。( https://github.com/GianlucaGuarini/icaro )

• Bundle Buddy：Bundle Buddy能够通过分析编译生成的SourceMap来寻找JavaScript代码块之间的源代码冗余情况。该工具能够帮助开发者寻找合适的代码分割点以降低最终发布应用的不稳定性，同时还能提升页面加载性能。

• gpu.js：在上周的前端每周清单中我们介绍过GPGPU(General Purpose Computing on GPUs)的概念与基于WebGL的实现方式，而gpu.js就是提供了浏览器中快速实现GPGPU的单文件JavaScript库。gpu.js能够自动地将某些特定的JavaScript函数编译为中间语言，然后利用WebGLS API使其运行在GPU中；而在某些无法使用GPU的环境下，仍然会将这些函数以正常的JavaScript执行流运行。

• Wade：Wade是轻量级、高性能的JavaScript搜索库，Wade会在构建阶段自动地为输入数组中的每个字符串的字符构建反向索引，然后在搜索时候快速返回用户输入关键字对应地下标；Wade优势在于对于相同的数据集进行多次搜索时能够避免冗余的遍历。

• swagger-decorator：swagger-decorator是旨在一处注解多处使用的JavaScript & Node.js应用中实体类与方法注解库，其能够用于实体类生成与校验、Sequelize ORM实体类生成、面向Koa的路由注解与Swagger文档自动生成的场景。

• Nano ID: Nano ID是轻量级的、支持URL的JavaScript唯一ID生成器，它使用了强力密码加密的随机API，能够保证生成符号分布的平均性。