20170222 前端开发日报

   <p>12行 JS 代码 的DoS攻击分析及防御；2017 年前端工程师应该学习什么；也许是史上最全的前端资源大汇总；6 个值得好好学习的 JavaScript 框架；javascript DOM编程艺术2笔记之数组与对象；前端工程师手册；Google 是如何开发 web 框架的； Vue 原理解析之 observer 模块</p>    <p>1. <a href="/misc/goto?guid=4959738837193588841" rel="nofollow,noindex">12行JS代码的DoS攻击分析及防御</a> <a href="/misc/goto?guid=4959738837286637574" rel="nofollow,noindex"> </a> ​​​ 有一段12行的JavaScript代码，可以让Firefox、Chrome、Safari浏览器崩溃，而且还能让 iphone 重启、安卓闪退，本文作者对这12行代码进行了分析解读并且提出了相应的防御办法，欢迎大家一同探讨。这里有一篇关于这12行js代码的文章：这十二行代码是如何让浏览器爆炸的？ <a href="/misc/goto?guid=4959738837372508532" rel="nofollow,noindex">ajax</a> 与pjax Ajax即“Asynchronous Javascript And XML...</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d28ab23daf058c57edc11f7f2797186b.jpg"></p>    <p>2. <a href="/misc/goto?guid=4959667423000922088" rel="nofollow,noindex">前端开发</a> 那些事#【 <a href="/misc/goto?guid=4959738837480532538" rel="nofollow,noindex">2017 年前端工程师应该学习什么</a> 】详见： <a href="/misc/goto?guid=4959738837577123019" rel="nofollow,noindex"> </a> 作为前端攻城狮，2017 年你打算学习什么呢？在本文中，作者将给大家一些推荐，它们会帮助你了解计算机科学中应该学习哪些知识。（译者：胡子大哈）欢迎朋友们投稿至——>>【前端开发那些事】专辑： <a href="/misc/goto?guid=4959734768314803486" rel="nofollow,noindex"> </a> ​​​ 作者：Artem Sapegin 编译：胡子大哈 翻译原文：http://huzidaha.com/posts/detail?postId=58aaa33bfc5b7f63e8c23f68 英文原文：https://medium.freecodecamp.com/what-to-learn-in-2017-if-youre-a-frontend-developer-b6cfef46eff...</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/1d8a5cb23b8c7bef3bbd22871236823a.jpg"></p>    <p>3. @胡子大哈 在 @稀土掘金 掘金分享： 也许是史上最全的前端资源大汇总 - 最近有很多朋友问有没有相关的书籍推荐，希望能够自学一下前端。这里列出了学习前端所需要的，几乎所有的知识，分享给大家。 <a href="/misc/goto?guid=4959738837680475285" rel="nofollow,noindex"> </a> ​​​</p>    <p>6 .<a href="/misc/goto?guid=4959738837766537812" rel="nofollow,noindex"> 个值得好好学习的 JavaScript 框架</a> <a href="/misc/goto?guid=4959738837853065572" rel="nofollow,noindex"> </a> » 译者:GHLandy 当一个新手开发者想要学习 JavaScript 时，他常常会被各种 JavaScript 框架所吸引，也幸亏有为数众多的社区，任何开发者都可以轻易地通过在线教程或者其他资源来学… ​​​</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/916ee6b764645adbbba1208632cedac0.jpg"></p>    <p>7. #JavaScript DOM2#【 <a href="/misc/goto?guid=4959738837921864330" rel="nofollow,noindex">javascript DOM编程艺术2笔记之数组与对象</a> 】数组数组可用一句话概括，多个数据的储存；在js中，数组可以用Array声明、创建。声明数组的同时可以指定数组初始元素个数，也就是数组的长度（length）:var arr = Arr..</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/29bb219b5cbb3987492cb8c7cbb88a47.jpg"></p>    <p>8. #前端技术#【 <a href="/misc/goto?guid=4959738838010165567" rel="nofollow,noindex">前端工程师手册</a> 】详见： <a href="/misc/goto?guid=4959738838090585822" rel="nofollow,noindex"> </a> 《前端工程师手册》一个从基础到进阶的前端学习资料，涉及 <a href="/misc/goto?guid=4958879020687701845" rel="nofollow,noindex">HTML</a> + <a href="/misc/goto?guid=4959734766667478708" rel="nofollow,noindex">CSS</a> 基础，JS基础到进阶，前端自动化以及前端面试等内容。[二哈] ​​​</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/62678beb6fa0217891a84cb1ec445487.jpg"></p>    <p>9. [译] <a href="/misc/goto?guid=4959738838239443191" rel="nofollow,noindex">Google 是如何开发 Web 框架的</a> <a href="/misc/goto?guid=4959738838322407764" rel="nofollow,noindex"> </a> by 胡子大哈 作者：Filip Hracek 编译：胡子大哈 翻译原文：http://huzidaha.com/posts/detail?postId=58abfab1204d50674934c3a9 英文原文：https://medium.freecodecamp.com/how-google-builds-a-web-framework-5eeddd691dea#.po4mnzs0m 转载请注明出处，保留原文链接以及作者信息 ...</p>    <p>10. #前端技术#【 <a href="/misc/goto?guid=4959738838393322658" rel="nofollow,noindex">Vue 原理解析之 observer 模块</a> 】详见： <a href="/misc/goto?guid=4959738838480164050" rel="nofollow,noindex"> </a> observer 是 Vue 核心中的最重要的一个模块，它能够实现视图与数据的 响应式 更新。在本文中，作者将深入的分享关于 observer 模块的各个方面，帮助你更好的了解它。[喵喵] ​​​ 本文是针对Vue@2.1.8进行分析 observer是Vue核心中最重要的一个模块（个人认为），能够实现视图与数据的响应式更新，底层全凭observer的支持。 observer模块在Vue项目中的代码位置是src/core/observer，模块共分...</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/bdacb08ce6cdca87cce95cc07a7cfb99.jpg"></p>    <p>11.【 <a href="/misc/goto?guid=4959738838564082576" rel="nofollow,noindex">使用 GitHub Pages 与 Cloudflare 免费托管网站</a> 】用 <a href="/misc/goto?guid=4959734767365367063" rel="nofollow,noindex">github</a> Pages托管静态页面、纯js的single page app；用Cloudflare做DNS解析，免费https。后台怎么办？最近流行serverless ：） | 简评： <a href="/misc/goto?guid=4959738838708030514" rel="nofollow,noindex"> </a> 原链： <a href="/misc/goto?guid=4959738838782388532" rel="nofollow,noindex"> </a> #湾区日报# ​​​</p>    <p>12. create-react-boilerplate： <a href="/misc/goto?guid=4959738838868735160" rel="nofollow,noindex">面向 React 技术栈的工程项目脚手架</a> <a href="/misc/goto?guid=4959738838949424532" rel="nofollow,noindex"> </a> 最近笔者在逐步将之前的项目升级为 Webpack2 + ReactRouter4，同时优化 MobX/Redux 搭配的状态管理模式，以及将通用组件抽取到 <a href="/misc/goto?guid=4959738839028189055" rel="nofollow,noindex">React</a> Storybook 中切向所谓组件驱动开发。对于其中浅薄的工程化的思考可以参考2016-我的前端之路:工具化与工程化,对于模板中配置的详解参考详细的从零到一的 React 及其技术栈使用教程]，这...</p>    <p>13. VSCode 拓展插件推荐： <a href="/misc/goto?guid=4959738839110562936" rel="nofollow,noindex">提高 Node 和 Vue 开发效率</a> <a href="/misc/goto?guid=4959738839195560107" rel="nofollow,noindex"> </a> by varHarrie 插件列表 Auto Close Tag 自动闭合HTML标签 Auto Rename Tag 修改HTML标签时，自动修改匹配的标签 Bookmarks 添加行书签 Can I Use <a href="/misc/goto?guid=4958879020080002186" rel="nofollow,noindex">HTML5</a> 、 <a href="/misc/goto?guid=4958879027600396002" rel="nofollow,noindex">css3</a> 、SVG的浏览器兼容性检查 Code Runner 运行选中代码段（支持大量语言，包括Node） CodeBing 在VSCode中弹出浏览器并搜索，可编辑搜索引擎 Color Highlight 颜色值...</p>    <p>14. IT技术分享#【 <a href="/misc/goto?guid=4959738839342979207" rel="nofollow,noindex">《HTTP权威指南》概念手册</a> 】详见： <a href="/misc/goto?guid=4959738839449475539" rel="nofollow,noindex"> </a> 一个关于《 <a href="/misc/goto?guid=4959734766538914077" rel="nofollow,noindex">HTTP</a> 权威指南》书籍中每章知识点提炼的列表。你可以跟随作者的总结来了解，或是重温这本经典图书。[哆啦A梦微笑] ​​​</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/a04f90c1287175d73c8c835c01049c0d.jpg"></p>    <p>15. #CSS#【 <a href="/misc/goto?guid=4959738839626477936" rel="nofollow,noindex">21条CSS高级技巧</a> 】CSS高级技巧: 21个有用的CSS小技巧，来帮你把CSS技能提高到高级水平 [Github上有8000多个star]。包括Flexbox、 <a href="/misc/goto?guid=4959738839717482259" rel="nofollow,noindex">rem</a> 、:not()选择器、负的nth-child等。 <a href="/misc/goto?guid=4959738839795984810" rel="nofollow,noindex"> </a> #前端开发博客# ​​​</p>    <p>16. <a href="/misc/goto?guid=4959738839886379750" rel="nofollow,noindex">如何评价阿里开源的企业级 Node.js 框架 egg</a> ？ <a href="/misc/goto?guid=4959738839968253406" rel="nofollow,noindex"> </a> 谢 @朴灵 老师邀请。 利益相关： egg 团队成员，NingJS - JSConf China 2016 的 egg topic 的演讲者。 本文较长，包含以下内容，比较忙的同学可以跳阅： Node.js 在阿里的定位 我们面对的挑战与机遇 egg 在阿里的定位 / 发展史 / 开发者 egg 的...</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/48833b409410eb53dafa65e86655fb02.jpg"></p>    <p>17. #前端技术#【 <a href="/misc/goto?guid=4959738840065957288" rel="nofollow,noindex">Angular2 新人常犯的 5 个错误</a> 】详见： <a href="/misc/goto?guid=4959738840147848468" rel="nofollow,noindex"> </a> 本文为一篇译文。在文中，作者将与大家分享新人在使用 Angular2 过程中常触犯的一些错误，让你有所警醒。 ​​​ 看到这儿，我猜你肯定已经看过一些博客、技术大会录像了，现在应该已经准备好踏上angular2这条不归路了吧！那么上路后，哪些东西是我们需要知道的？ 下面就是一些新手常见错误汇总，当你要开始自己的angular2旅程...</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2dbcd8a612b27cec8f4c564233aa8231.jpg"></p>    <p>18.《 <a href="/misc/goto?guid=4959738840230971330" rel="nofollow,noindex">高性能移动端开发</a> 》众所周知，网页不仅应该被快速加载，同时还应该流畅运行，比如快速响应的交互，如丝般顺滑的动画…… <a href="/misc/goto?guid=4959738840333704135" rel="nofollow,noindex"> </a> （by 陈被单 <a href="/misc/goto?guid=4959734767964112109" rel="nofollow,noindex"> </a> ） ​​​</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8788008f4f199d0788c450cd1347e124.jpg"></p>    <p>19. <a href="/misc/goto?guid=4959738840461436181" rel="nofollow,noindex">Jsoup 学习笔记</a> <a href="/misc/goto?guid=4959738840571697700" rel="nofollow,noindex"> </a> by code4craft Jsoup是Java世界的一款HTML解析工具，它支持用CSS Selector方式选择DOM元素，也可过滤HTML文本，防止XSS攻击。 学习Jsoup是为了更好的开发我的另一个爬虫框架webmagic，为了学的比较详细，就强制自己用很规范的方式写出这部分文章。 代码部分来自https://github.com/jhy/jsoup，添加了一些中文注释以及示例...</p>    <p>20.《 <a href="/misc/goto?guid=4959738840724318562" rel="nofollow,noindex">微信小程序开发知识点总结</a> 》使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束…… <a href="/misc/goto?guid=4959738840852524557" rel="nofollow,noindex"> </a> （by 故事的小黄花 <a href="/misc/goto?guid=4959734767964112109" rel="nofollow,noindex"> </a> ） ​​​</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/ed5a496d561ce862e0e62833d943b62e.jpg"></p>    <p>21. #前端头条#【 <a href="/misc/goto?guid=4959738840956553633" rel="nofollow,noindex">chrome如何设置断点调试</a> 】你是怎么调试 JavaScript 程序的？最原始的方法是用 alert() 在页面上打印内容，稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~，用这两种土办法确实解决...请戳→ <a href="/misc/goto?guid=4959738841082190561" rel="nofollow,noindex"> </a> #前端开发博客# ​​​</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/237b682db9b936707353e294a4f3d4b9.jpg"></p>    <p> </p>    <p> </p>    <p>来自：http://caibaojian.com/fe-daily-20170222.html</p>    <p> </p>