金融壹账通前端H5技术周报(第六期)

本期导读: 原创专题带来诗沂微信js-sdk调试的分享，以及本人对前端开发热更新原理的一些解读。语言基础紧随牛人的脚步，对js的启动性能瓶颈进行分析，以及css基本图形和路径、“蝉原则”的探索。工具框架带来令人咂舌的"40行代码实现react.js"，霸气侧漏。文末贴上翻纸牌和刮刮卡两个运营常用特效，欢迎赏鉴

原创专题

1) part1-微信js-sdk接口对接 @胡诗沂

微信官方提供了丰富的接口文档，但是开发接入的时候还是调到很多坑里面找不到原因。这里整理下H5接入微信的方法详细方法，在每一步中要注意的事项。

2) 前端开发热更新原理解读 @曾文富

猿类创造的原始动力多来源于偷懒。前端的同学们在搭建自己的开发环境的时候，为了避免手动刷新浏览器的繁复，使用起了热更新工具。browserSync 和 webpack-dev-server是其中的代表作品

语言基础

1) JavaScript 启动性能瓶颈分析与解决方案 @王下邀月熊

在 Web 开发中，随着需求的增加与代码库的扩张，我们最终发布的 Web 页面也逐渐膨胀。不过这种膨胀远不止意味着占据更多的传输带宽，其还意味着用户浏览网页时可能更差劲的性能体验。浏览器在下载完某个页面依赖的脚本之后，其还需要经过语法分析、解释与运行这些步骤。

2) CSS中的基本图形和路径 @大漠

在CSS中有些属性是允许CSS绘制图形形状，比如常见的是使用border或者box-shadow来绘制图形或者形状。除此之外，在CSS中还有类似circle()函数也可以绘制圆形。除此之外，在CSS中有一些形状是为CSS其它属性服务，比如clip-path为mask服务和在shape-outside让文本围绕形状排版。

3）“蝉原则”与CSS3随机多背景随机圆角等效果@张鑫旭

“蝉原则”，英文称作“cicada principle”，是一种让事物的重复出现符合“自然随机性”的规则，为什么这么说呢？

工具框架

1) 40 行代码内实现一个 React.js @胡子大哈

本文的目的是：揭开对初学者看起来很很难理解的 React.js 的组件化形式的外衣，让你有更多的精力和注意力去学习 React.js 精髓的地方。如果你刚开始学习 React.js 并且感觉很迷茫，那么看完这篇文章以后就能够解除一些疑惑。

2) 总结持续集成在 Web 研发中的应用 @王集鹄

个人理解：持续集成是通过平台串联各个开发环节，实现和沉淀工作自动化的方法。
持续集成在敏捷开发中运用得非常广泛，几乎成了各种项目的标配。
我认为持续集成是研发团队负责人必须了解和掌握的方法。

3) Node.js 这个反序列化的漏洞到底有多大？ @寸志

外刊君还在考虑在公司内做一些Node.js的尝试，正要撸起袖子写几行代码，就被这个漏洞给吓尿了，【漏洞分析】利用Node.js反序列化的漏洞执行远程代码（含演示视频） - 安全客 - 有思想的安全新媒体关于Node.js存在反序列化远程代码执行漏洞的安全公告Node.js惊爆重大漏洞。妈啊，这种惊天大漏洞，外刊君今年试点Node.js的kpi是不是完不成了？

前端视界

pc端查看可直接点击链接，手机端查看请识别二维码

1) 翻纸牌@徐海洋

2) 刮刮卡@胡诗沂、张艳