Create 7.2-Frontend.md

Weekly/2017/7/7.2-Frontend.md

+
+> [前端每周清单第 21 期：JS 项目开发样式指南；基于 Vue 的分角色权限验证；深入 React.js 内部原理](https://zhuanlan.zhihu.com/p/27815800) 为InfoQ中文站特供稿件，首发地址为[前端之巅公众号](https://parg.co/bI2)；如需转载，请与InfoQ中文站联系。从属于笔者的[  Web 前端入门与工程实践](https://github.com/wxyyxc1992/Web-Development-And-Engineering-Practices)的[前端每周清单系列](https://parg.co/bh1)系列；部分文章需要自备梯子。
+
+# 前端每周清单第 21 期：JS 项目开发样式指南；基于 Vue 的分角色权限验证；深入 React.js 内部原理
+
+`前端` `前端每周清单`
+
+[前端每周清单](http://www.infoq.com/cn/FE-Weekly)专注前端领域内容，分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。
+
+## 新闻热点
+
+`国内国外，前端最新动态`
+
+- [Let's Encrypt 宣布将在 2018 年一月提供通配符证书服务](https://parg.co/bIp)：自从 2015 年上线以来，Let's Encrypt 已经服务于数百万的在线站点，并且大幅度提升了整个 Web 的加密流量占比。近日 Let's Encrypt 宣布将会在来年一月份提供通配符证书服务；某个通配符证书能够应用于某个根站点下的任意数目的子站点，从而帮助网站管理者更加方便地使用单证书来为多个子站点添加 HTTPS 部署支持。( https://parg.co/bIp )
+- [百度 Web 生态构建：发布基于 Vue 的 PWA 解决方案 LAVAS；将全面支持 Web AR ](https://parg.co/bIZ)：在 Baidu Create 2017 Web 生态分论坛上，百度搜索正式对外发布基于 Vue 的 PWA 解决方案 LAVAS，同时宣布将全面支持 Web AR，此外，百度还对 MIP 的架构与原理、HTTPS 等技术进行了深度解析。( https://parg.co/bIZ )
+- [Webpack import 即将支持异步导入 CSS](https://parg.co/bI8)：一个月前 Tobias Koppers 撰文讨论了 Webpack 对于 CSS 处理的考虑，计划将 CSS 代码与 JS 同等考虑；即开发者可以利用代码分割插件构建的动态代码块来异步加载 CSS 代码。而本文则是详细讨论了该方案以及对于未来代码分割、首屏加载可能造成的影响，并且提出了目前状态下基于 React Universal Component 与 Webpack Flush Chunks 可以实现的异步 CSS 加载方案。( https://parg.co/bI8 )
+- [MobX 3.2.0 版本发布](https://parg.co/bIk)：MobX 内置了一些全局状态来辅助追踪与调度 Observable 或者 Reaction，在近日发布的 3.2.0 版本中，MobX 能够自动监测应用内是否存在多个 MobX 实例，并且给出响应的告警；更多 MobX 相关资料参考 [ https://parg.co/bVC  ](https://parg.co/bVC)。( https://parg.co/bIk )
+
+## 开发教程
+
+`步步为营，掌握基础技能`
+
+- [Styled-Components 实战](https://parg.co/bev)：Styled-Components 是由 Max Stoiber 与 Glen Maddern 创建的新的 CSS-in-JS 工具库，能够帮你组织 React 或者 React Native 项目中的样式声明。本文则着眼于介绍 Styled-Components 的设计理念与基本用法，首先介绍了 Styled-Components 的设计目标，然后介绍了如何使用 Styled-Components 来创建可复用的组件或者创建全局样式声明。( https://parg.co/bev )
+- [React Redux 概念与工作流清单](https://parg.co/bej)：本文包含了一张关于 Redux 概念与工作流的清单图解以及较为详细地渐进式 Redux 基础概念介绍。本文首先概述了项目开发中使用 Redux 的意义以及 Redux 相关的技术栈，然后介绍了 Reudx 中 Store 的含义与如何与 Immutable 协同使用；接下来本文介绍了 React Redux 应用中组件的层次划分，如何定义使用 Action、ActionCreator、Reducer 等等；更多 Redux 相关资料参考[ https://parg.co/bVQ ](https://parg.co/bVQ)。（ https://parg.co/bej ）
+- [基于 Vue.js 2 的分角色权限验证](https://parg.co/bIs)：本文作者因为 Vue.js 平滑的学习曲线与易于理解的官方文档而倾向于使用 Vue.js 进行前端开发工作，本文即是作者介绍如何利用 Vue.js 2 来为项目添加基于角色的权限控制功能。作者在本文中首先介绍了基于角色的权限控制的概念与设计，然后讨论了如何使用 vue-cli 来构建基础项目架构并且按特征划定目录层次，最后介绍了关键部分的代码实现以及如何使用 Vuex 来管理应用状态；更多 Vue 相关资料参考[ https://parg.co/byL ](https://parg.co/byL)。( https://parg.co/bIs )
+- [试用新的 Angular HTTP Client](https://parg.co/bIV)：在 Angular 4.3.0-rc.0 版本在，HTTP Client API 得到了极大的改造与提升，本文即是介绍新版本的 Angular HTTP Client 的用法。在新版本的 HTTP Client 中，其默认假设以 JSON 格式进行返回值解析，并且引入了灵活的 Interceptor 以动态操作请求头或者响应体；同时新版本的 HTTP Client API 为上传与下载这些耗时操作提供了实时进度反馈回调，以方便开发者进行调试或者反馈给用户。( https://parg.co/bIV  )
+- [基于 Vue.js 与 Laravel 构建实时仪表盘](https://parg.co/bIJ)：本文是来自 Spatie 的工程师，介绍基于 Laravel 与 Vue.js 构建，实时的队伍与事件信息展示面板的实践总结。本文首先介绍了历史项目的不足以及目前项目的设计考量，然后讨论了前端网格布局的解决方案。接下来作者分别介绍了服务端基于 Laravel 与客户端基于 Vue.js 的关键代码的实现；更多 Vue 相关资料参考[ https://parg.co/byL ](https://parg.co/byL)。( https://parg.co/bIJ  )
+
+
+## 工程实践
+
+`立足实践，提示实际水平`
+
+- [接口安全自检清单](https://github.com/shieldfy/API-Security-Checklist)：本文涵盖了项目接口在设计、测试与发布阶段应该注意的安全事项。本清单首先阐述了应该使用标准的权限控制方式 JWT 或者 OAuth 来替代基础的 Basic Auth，然后分别讨论了 JWT 与 OAuth 的设计要点。接下来本清单还列举了对于接入过滤与防 DDoS 攻击、使用合适的 HTTP 方法并且对用户输入进行有效校验、避免关键资源外泄、设置合理的响应头等等内容。( https://github.com/shieldfy/API-Security-Checklist )
+- [JavaScript 项目开发样式指南](https://github.com/wearehive/project-guidelines)：开启新的项目就好像在绿地上肆意撒欢，此时的开发者拥有极大的自由；不过如果缺乏良好的基石，未来的项目维护可能会成为你的梦魇。本文即搜集了来自 [Hive](http://wearehive.co.uk/) 研发团队的 JavaScript 项目开发指南，涵盖了 Git、文档规范、环境变量控制、依赖管理、测试、文件结构与命名、代码样式、日志、API 设计等多个方面；更多 JavaScript 工程实践资料参考[ https://parg.co/bIO  ](https://parg.co/bIO)。( https://github.com/wearehive/project-guidelines  )
+- [大型应用开发中使用 Redux 的五个建议](https://parg.co/bIi)：Redux 是非常优秀的应用状态管理工具，单向数据流结构允许开发者专注于业务逻辑的开发。本文作者从自身实践出发总结出了大型项目中 Redux 的使用建议，包括建立数据索引并且使用选择器来访问数据、将标准状态独立于可变的界面状态与用户编辑状态、在界面之间合理地共享数据、提取公共地 Reducer 函数以及如何较好地连接 React 组件与 Redux 状态树等等；更多 Redux 相关资料参考 [ https://parg.co/bVQ  ](https://parg.co/bVQ)。( https://parg.co/bIi  )
+- [前端 JavaScript 面试问题总结](https://parg.co/bIL)：本文作者发现目前并没有太多令人满意的前端 JavaScript 面试问题列表，因此他基于自己的面试经历与实践总结出了本文。本文主要包含以下部分，首先是基础概念的认知，譬如对于闭包、EventLoop、REST 等概念的介绍；然后是对于编码能力的考量，譬如对于常见的数据结构与算法的实现、代码调试能力与错误定位的评测等等；最后是对于整体系统设计能力的考量，譬如如何设计全栈的 Twitter 实现架构等等。( https://parg.co/bIL )
+
+
+## 深度阅读
+
+`深度思考，升华开发智慧`
+
+- [深入 React.js 内部原理](https://parg.co/be2)：本系列文章详细介绍了 React.js 内部工作原理，作者通过调试整个代码库，分析代码执行调用顺序将整个逻辑以流程图方式清晰地展示出来，并且详细介绍了内部实现中使用到的关键概念与方法。本系列文章会包含 Stack Reconciler 与 Fiber 两个部分，目前完成的 Stack Reconciler 部分分为十五个小节，包含了从渲染函数调用开始介绍 JSX 转化为 DOM 的流程、内部事务处理到组件挂载于与更新流程等等内容；更多 React 相关资料参考[ https://parg.co/bM1 ](https://parg.co/bM1)。 ( https://parg.co/be2 )
+- [利用 WebGL 释放 GPU 的计算潜力](https://parg.co/bIQ)：随着大数据时代的到来，计算能力日渐成为性能的关键瓶颈之一；而众所周知 GPU 相较于 CPU 有着更为强大的计算能力，本系列文章即是介绍如何利用 WebGL 实现 GPGPU（General Purpose Computing on Graphics Processing Units）高性能计算。本系列文章首先讨论了利用 WebGL 进行 GPGPU 计算的可行性，然后介绍了具体的实施步骤；主要步骤包括矩阵初始化、矩阵计算、结果回传、条件控制、不稳定性处理、样例实践等几个部分。( https://parg.co/bIQ  )
+- [Vue 直出内存泄露问题的追查实践](https://parg.co/bIN)：近期，作者遇到了 Vue 直出内存泄露问题，并进行了追查。其项目背景是，作者在一次规模较大的运营活动中正好碰到了内存泄漏的问题，技术背景和业务背景分别如下：技术背景：node直出项目，直出用到了 Vue 的直出方案；业务背景：一次 PV 最高达到 1400W 的运营活动 qps 的压力下，后期使得服务出现一定错误率。本文将回顾整个追查的实践过程。( https://parg.co/bIN )
+- [JavaScript 开发中常用的十大数据结构详解](https://parg.co/bIC)：数据结构是软件开发的重要组成部分之一，也是求职面试中常见的主题之一；本文将回顾介绍 JavaScript 中常用的十大数据结构，并且给出详细的教程与在线实践链接。本文涉及到的数据结构包括链表、栈、队列、集合、映射、哈希表、二叉搜索树、Trie 树、二叉堆、图等；更多数据结构与算法相关资料参考 [ https://parg.co/bIt  ](https://parg.co/bIt)。( https://parg.co/bIC  )
+
+## 开源项目
+
+`乐于分享，共推前端发展`
+
+- [Ink](https://github.com/vadimdemedes/ink)：Ink 允许我们以类似于编写 React 组件的方式编写命令行交互界面，最大的区别在于 Ink 会将组件渲染为输出到标准控制台的字符串。笔者觉得阅读 Ink 的源代码也是不错地了解简化版的 React 内部运行机制的方式，可以了解基本的 JSX 转换、虚拟 DOM 渲染与比较、批次更新等内容。( https://github.com/vadimdemedes/ink )
+- [real-world-react](https://github.com/jeromedalbert/real-world-react)：本仓库搜集了一系列基于 React 开发的真实环境下的开源应用代码库，能够帮助初学者从资深开发者的代码中逐步学习了解 React；应用涵盖了基于 Redux 的各种资讯类应用、常见的音乐播放器等等多个方面。( https://github.com/jeromedalbert/real-world-react )
+- [icaro](https://github.com/GianlucaGuarini/icaro)：icaro 是轻量、高效地 JavaScript 对象观察者实现，能够自动监测 JavaScript 中对象的变化并且进行相应地譬如 DOM 更新等操作。icaro 使用了大量的 ES6 的特性，譬如 Proxies、WeakMaps、Maps 以及 Symbols，是非常不错的可以用来学习利用最新的语言特性实现 JavaScript 响应式框架的开源库。( https://github.com/GianlucaGuarini/icaro )
+- [titanic](https://github.com/icons8/titanic)：titanic 为我们提供了一系列有趣的可变的 SVG 图标，这些图标能随着用户的点击或者其他操作做出相应地动画反馈。titanic 提供的动画图标包括了单选框、邮箱、笑脸等等。( https://github.com/icons8/titanic  )
+- [formik](https://github.com/jaredpalmer/formik)：React 中的表单处理一直是痛点所在，而目前很多的表单处理库添加了太多的抽象，不仅不易于理解而且会造成许多额外的性能损耗。而 Formik 则提供了简便易用的高阶组件来帮你处理将 Props 转化为扁平的 React 状态、自动化字段验证并且进行错误提示、将扁平地 React 状态转化为接口可用的对象这三个任务。( https://github.com/jaredpalmer/formik )
+
+## 巅峰人生
+
+
+
+## 前端之巅
+
+「前端之巅」是InfoQ旗下关注前端技术的垂直社群，加入前端之巅学习群请关注「前端之巅」公众号后回复“加群”。投稿请发邮件到editors@cn.infoq.com，注明“前端之巅投稿”。
+
+![前端之巅微信底图－5.jpg](http://upload-images.jianshu.io/upload_images/1647496-01712a993d2b23de.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)