talkingdata / fsd Goto Github PK

首先讲解一下数据双向绑定的基本原理，介绍对比一下三大框架的不同实现方式，同时会一步步完成一个简单的mvvm示例

深入理解 JavaScript 数据双向绑定

主要从初始化的数据层面上分析了Vue是如何管理依赖来到达数据的动态响应。
initState的过程中，将props,computed,data等属性通过Object.defineProperty来改造其getter/setter属性，并为每一个响应式属性实例化一个observer观察者。这个observer内部dep记录了这个响应式属性的所有依赖。
当响应式属性调用setter函数时，通过dep.notify()方法去遍历所有的依赖，调用watcher.update()去完成数据的动态响应。

https://segmentfault.com/a/1190000010014281

iView 一周年了，同时发布了 2.0 正式版
一周年，两个大版本，很值得称赞的成绩！能跟梁灏这样优秀的前端生态贡献者共事，我感到非常荣幸！
正如标题所言，2.0正式版将会是一个全新的开始，她将随着Vue社区的进步而快速迭代。
期待vue社区和iView能有更好的发展，iView不会止于组件库，更期待iView deign、iView mobile…和更多优秀的开发者参与到开源生态的共建！

前端框架丰富多彩的今天，快速学习新的框架是每个前端程序员的必备技能。

https://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652975196&idx=1&sn=7775588a3e5a9cd44090f379766d2354&chksm=bd4ae37f8a3d6a69d00df95143c477440c4c494df56a101e4e076911a615e75f5b194cd4e182&mpshare=1&scene=1&srcid=0720soS6N4MjqELSisDoyamI#rd

五种事件驱动的API架构
本文会介绍 5 种事件驱动的 API 架构：WebSockets、WebHooks、REST Hooks、Pub-Sub， 以及 Server Sent Events，并分别介绍这几种架构的基础功能、使用方式以及各自的优缺点。
对于 Node.js 开发者来说，我们天生就在使用事件驱动的架构，业界也越来越认可事件驱动架构和异步系统的优势，了解本文介绍的 5 种事件驱动API 架构

文章整理了GitHub入门，搭建发布个人博客及个人项目发布，还介绍了一些工具，插件及开源项目；内容比较丰富。
GitHub —— 你不得不上的交友网站

理解 async/await

async 函数是 Generator 函数的语法糖。使用 关键字 async 来表示，在函数内部使用 await 来表示异步。

想较于 Generator，Async 函数的改进在于下面四点：

• 内置执行器。

  Generator 函数的执行必须依靠执行器，而 Aysnc 函数自带执行器，调用方式跟普通函数的调用一样

• 更好的语义。

  async 和 await 相较于 * 和 yield 更加语义化

• 更广的适用性。

  co 模块约定，yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值（Number，string，boolean，但这时等同于同步操作）

• 返回值是 Promise。

  async 函数返回值是 Promise 对象，比 Generator 函数返回的 Iterator 对象方便，可以直接使用 then() 方法进行调用

阐述了做单元测试的必要性，
着重介绍了Jasmine的常用语法，
并对其他流行测试框架和工具做了介绍。
关于前端开发谈谈单元测试

彻底搞清楚javascript中的require、import和export
通过介绍CMD、AMD、ES6的模块规范，来引申出平时业务中经常用到require、import和export的用法以及含义。

浅谈 JS 对象之扩展、密封及冻结三大特性
由浅入深讨论JS中对象的扩展、密封及冻结特性，从三种不同的冻结程度介绍了 js 冻结对象的方法。

扩展特性:

• Object.isExtensible 方法
• Object.preventExtensions 方法

密封特性:

• Object.isSealed 方法
• Object.seal 方法

冻结特性

• Object.isFrozen 方法
• Object.freeze 方法

介绍了RESTful API的实现**，并从http请求方式和相应内容等方面给出详细示例。
在项目接口设计和接口对接中可做实质性参考。
RESTful API 实践

• 一劳永逸的搞定flex布局
  你是否还在使用浮动布局？写各种line-height实现居中？不妨试试flexBox布局，它简单易用的写法可以轻松实现各种布局，让你的布局更快速高效。

Edit: 重复提交了，忽略这篇吧。。。
阮一峰的文章最大的好处就是解释的清楚，很多大牛工程师不善表达，自己会但不一定能教得会。
三篇系列文章介绍了：js模块花的基本概念，AMD规范以及require.js的实践

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
http://www.ruanyifeng.com/blog/2012/11/require_js.html

文章通过对那些『延迟』执行的函数思考，深入的对event loop和task进行了拆分讲解，通过实例与图示详细讲解了整个执行渲染过程。
深入探究 eventloop 与浏览器渲染的时序问题

Server-Sent Events 教程
开发实时web应用的基础协议，基于http协议适用范围更广、性能更好、更轻量。缺点是IE不支持，需要降级为其它方式，但对于一些面向大屏、手机端的应用尤其适合。

WebSocket 教程
相比SSE，WebSocket会更重一些，需要自己实现协议的部分。这两篇文章一起读，就可以很全面的了解现代浏览器和服务器通信技术。

比较系统简介koa2使用，包含一些例子，可以让人更快上手。
koa2从起步到填坑

深入vue2.0底层**–模板渲染

Vue 2.0 中模板渲染与 Vue 1.0的区别，1.0 中采用的 DocumentFragment （想了解可以观看这篇文章），而 2.0 中借鉴 React 的 Virtual DOM。基于 Virtual DOM，2.0 还可以支持服务端渲染（SSR），也支持 JSX 语法。

使用svg文件显示小图标已经成为趋势，随之而来地，svg文件合并也成为必然需求。文中介绍了svg sprite的使用原理，并介绍了多种生成svg sprite的方式来满足偏前端、偏命令、偏设计各类coder的需求。
SVG Sprite技术介绍

文章把学习Three.js需要掌握的基本概念和知识点讲解的很详细。并且结合代码实现了一个demo。对于Three.js有兴趣的同学，是一篇不错的入门文章。
初识Three.js

排序算法可以分为内部排序和外部排序，内部排序是数据记录在内存中进行排序，而外部排序是因排序的数据很大，一次不能容纳全部的排序记录，在排序过程中需要访问外存。常见的内部排序算法有：插入排序、希尔排序、选择排序、冒泡排序、归并排序、快速排序、堆排序、基数排序等
https://github.com/hustcc/JS-Sorting-Algorithm

ES6的rest参数和扩展运算符
rest参数和扩展运算符都是ES6新增的特性。
rest参数的形式为：...变量名；扩展运算符是三个点（...）。

rest参数

rest参数用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

扩展运算符

扩展运算符可以看做是 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3]) // 1 2 3

console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5

• 靠谱程序员必备技能——重构
  当项目变得难以维护，重构便便迫在眉睫，但很多所谓重构仅仅算是重写，随着时间推移，项目再次变得难以维护，周而复始，陷入怪圈。如何避免重构变成重写，本文给了一些很好的建议。

TalkingData实习生写的一篇文章。作者回顾了自己经历三个项目的开发历程，发现了很多问题，也产生了很多思考。该文章有很多值得借鉴的地方。

关于 Vue App 开发的一些思考

使用Vue做项目时，Vuex的使用与否和怎么使用始终是回避不了的一个问题。这篇文章或许能给你一些灵感。
你可能不需要 Vuex

• HTTP/2 Server Push 详解（上）
• HTTP/2 Server Push 详解（下）
• A Comprehensive Guide To HTTP/2 Server Push 原文

Server Push可以将静态资源推送给客户端，实现多路复用，是HTTP/2众多协议优化中最令人振奋的特性，它大大降低了网络延迟对性能的影响。

本篇文章所提到的几个措施大家可能都曾经在项目里用过，但是就如作者所言：你只是在用，并不知道为什么用，本文最大的价值在于提供了系统的优化方案并解释了原因

4种使用webpack提升vue应用的方式

git成为现在最火的代码管理工具，文中详细介绍了git在团队中的使用流程，这种思路在团队协作中很是受用。同时文中介绍了gitflow使用的方法。
Git 在团队中的最佳实践--如何正确使用Git Flow

• Three.js入门指南
  关于Three.js中文文章资料还是不够丰富，以至于这本免费小书时至今日还是Three.js入门的最佳选择之一。

Vue2.0 源码阅读：响应式原理
文章深入Vue源码，详细地解析了响应式原理。其原理大致可总结为：当数据发生改变后，相应的 setter 函数被触发，然后执行 notify 函数通知订阅者（Watcher）去更新相关视图，也会对新的数据重新 observe，更新相关的依赖关系。

文章讲解数据响应式系统及其构建，分步骤实现了 vue2.0的响应式，还有详细的代码示例及注释。
现代前端科技解析 —— 数据响应式系统

JavaScript问题集锦
文章整理了一些比较有价值且常见的JS问题，看似简单，但深究其原理还是很有必要的，相信对你的JS基础功底是个考验。

ECharts 统计扩展教程

ECharts 统计扩展，包含的功能有直方图、聚类、回归、以及常用的汇总统计。通过统计扩展和 ECharts 的结合，可以使大家方便地实现可视分析，也就是将数据分析的结果，通过可视化直观地呈现出来。

阮一峰的文章最大的好处就是解释的清楚，很多大牛工程师不善表达，自己会但不一定能教得会。
三篇系列文章介绍了：js模块花的基本概念，AMD规范以及require.js的实践

1模块的写法
2AMD规范
3require.js的用法

前端性能优化相关
从多角度进行性能问题剖析，对JavaScript，DOM，CSS都介绍了性能优化方面的问题因素及解决方案；内容介绍不是很详细，例如对于debounce 进行消抖只是简单说明，这方面在第一期成斌有推荐详细的文章。

文章介绍了WebSocket 的特性及与HTTP对比在服务器推送上的优势，通过一个简单的示例介绍了WebSocket 部分API。
WebSocket 教程

大家都说学 Node.js 学 Node.js，到底是学它的什么呢？是学 JavaScript 这门语言，还是学 Node.js 的 API？还是学 Node.js 各种三方库？

当我们学习 Node.js 时，我们在学习什么？

学习设计者模式，让我们站在巨人的肩膀上，获得前人所有的经验，保证我们以优雅的方式组织我们的代码，满足我们解决问题所需要的条件。
http://www.oschina.net/translate/learning-javascript-design-patterns?cmp

文章由浅入深的介绍前端工程的测试，覆盖单元测试、端到端测试、集成测试，较为简单的事例介绍有利于你快速掌握这些知识。
测试你的前端代码 – part1（介绍篇）
测试你的前端代码 – part2（单元测试）
测试你的前端代码 – part3（端到端测试）
测试你的前端代码 – part4（集成测试）

vue的Virtual Dom实现- snabbdom解密
文章通过详细的图文对照、算法代码解析讲述了虚拟dom的实现，Virtual Node作为纯数据对象，patch创建或者更新DOM树，diff算法用来比较同层级，然后通过钩子和扩展模块创建有attribute、props、eventlistener的复杂dom。

我接触过的前端数据结构与算法

只要是工程师就必须学好计算机基础，只有这样才能适应计算机技术的快速发展，前端工程师更是如此。

https://juejin.im/post/59626ca0f265da6c2442fbdf
对Vue的组件化有一个非常清晰的讲解。组件化原理，组件化分，组件间传递都有涉及。另外笔者是一名普通的全职 iOS 开发者，还介绍iOS的组件化的东西，对前端和移动端进行了一些对比。

这个系列文章把异步方面的知识以及原理讲解的比较清楚，从传统的方式到promise到generator到async。值得一读。
深入理解 JavaScript 异步

掌握Symbols
继六种数据类型（Undefined、Null、Boolean、Number、String、Object）后，ES6又新增了Symbols类型。Symbols类型比较抽象，要了解相关的适应场景，可以看这两篇文章。
ECMAScript 6 入门-Symbol
symbols类型

文章从each 的功能实现入手不断完善，整体实现思路清晰，对于问题及解决也有详细的代码实现与解释。这是一个系列内容涵盖防抖、节流、去重、类型判断等。
JavaScript专题之jQuery通用遍历方法each的实现
系列目录地址

#https://github.com/istanbuljs/nyc
覆盖率工具 istanbul 替换为 nyc，多进程覆盖率的测试速度提升了几倍。都是同一作者的作品，后者目前活跃度高，并支持前端很多新特性。

$ npm i nyc --save-dev
$ ./node_modules/.bin/nyc ./node_modules/.bin/mocha

执行单元测试命令后，还会直观的给出代码覆盖率报告，以Flclover为例：

------------------------------------|----------|----------|----------|----------|----------------|
File                                |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
------------------------------------|----------|----------|----------|----------|----------------|
All files                           |    79.41 |    66.67 |    61.11 |    81.82 |                |
 flclover                           |      100 |      100 |      100 |      100 |                |
  index.js                          |      100 |      100 |      100 |      100 |                |
 flclover/lib                       |    88.52 |    82.35 |    81.82 |    88.52 |                |
  application.js                    |      100 |      100 |      100 |      100 |                |
  flclover.js                       |       30 |        0 |        0 |       30 |... 13,14,17,19 |
 flclover/lib/middleware/bodyparser |      100 |      100 |      100 |      100 |                |
  index.js                          |      100 |      100 |      100 |      100 |                |
 flclover/lib/middleware/logger     |    55.56 |       50 |       50 |    55.56 |                |
  index.js                          |    55.56 |       50 |       50 |    55.56 |... 39,42,45,48 |
 flclover/lib/utils                 |    71.43 |    33.33 |        0 |    83.33 |                |
  index.js                          |    81.25 |    33.33 |        0 |      100 |           7,10 |
  logger.js                         |       40 |      100 |        0 |       40 |         4,9,13 |
------------------------------------|----------|----------|----------|----------|----------------|

内容偏向于 WEB 技术（HTML、CSS、DOM、JavaScript）和以这些技术为根基直接构建而成的开源技术。书中引用和讨论的材料要么就是同类翘楚，要么就是解决问题的流行方案。

推荐人：郭俊兵
前端开发者指南

大致了解下http协议相关内容，有利于了解前端开发时，调用后台接口，请求做了什么。
http://www.jianshu.com/p/80e25cb1d81a

文中介绍了vue项目目录结构和数据绑定实现，没有太深入，但可以作为初步了解。
学习Vue.js源码

读 Zepto 源码之 Event 模块

如何自己实现事件处理，本文通过深入浅出解读 Zepto Event 模块源码，给我们提供了很好的答案。

Vuex 教程
Vuex 类似 Redux 的状态管理器，用来管理Vue的所有组件状态。
一般在你开发大型单页应用（SPA），会出现多个视图组件依赖同一个状态，来自不同视图的行为需要变更同一个状态。
遇到以上情况时候，可以考虑使用Vuex，它能把组件的共享状态抽取出来，当做一个全局单例模式进行管理。这样不管你在何处改变状态，都会通知使用该状态的组件做出相应修改。