黄子毅
# 1 引言 > 前几期精读了前端模块化、语法相关的文章，这次讨论另一个举足轻重的话题：数据流。 > 数据流在前端的地位与工程化、可视化、组件化是一样重要的，没有好的数据流框架与思想的指导，业务代码长期肯定倾向于不可维护的状态，当项目不断增加功能后，管理数据变得更加重要。 早期前端是没有数据流概念的，因为前端非常薄，每个页面只要展示请求数据，不需要数据流管理。 随着前端越来越复杂，框架越来越内聚，数据流方案由分到合，由合又到了分，如今数据流逐渐从框架中解绑，形成了一套通用体系，供各个框架使用。 虽然数据流框架很多，但基本上可以分为 `双向数据流党`、`单向数据流党`、`响应式数据流党`，分别以 `Mobx`、`Redux`、`Rxjs` 为代表呈现三国鼎立之状，顺带一提，对 `css` 而言也有 `css in js` 和纯 `css党` 势均力敌，前端真是不让人省心啊。这次我们来看看民工叔徐飞在 **QConf** 分享的主题：**单页应用的数据流方案探索**。 # 2 内容概要 文中主要介绍了响应式编程理念，提到的观点，主要有： 1. `Reactive` 数据封装...
如何有效编译、发布组件，同时组织好组件之间依赖关联是这篇文章要解决的问题。 ## 目标 比如现在有 navbar resource-card 这两个组件，并且 resource-card 依赖了 navbar，现在通过命令： ``` bash npm run manage -- --publish wefan/navbar#major ``` 给 navbar 发布一个主要版本号，会提示下图确认窗口，check一遍发布级别、实际发布级别、当前版本号与发布版本号是否符合预期，当复合预期后，再正式发布组件。 上图的发布级别，可以看到 `resource-card` 因为直接依赖了 navbar，而 navbar 发布了大版本号产生了 break change，因此依赖它的...
# 谈谈 Redux 与 Mobx 思想的适用场景 Redux 和 Mobx 都是当下比较火热的数据流模型，一个背靠函数式，似乎成为了开源界标配，一个基于面向对象，低调的前行。 ## 函数式 vs 面向对象 首先任何避开业务场景的技术选型都是耍流氓，我先耍一下流氓，首先函数式的优势，比如： 1. 无副作用，可时间回溯，适合并发。 2. 数据流变换处理很拿手，比如 rxjs。 3. 对于复杂数据逻辑、科学计算维的开发和维护效率更高。 当然，连原子都是由带正电的原子核，与带负电的电子组成的，几乎任何事务都没有绝对的好坏，面向对象也存在很多优势，比如： 1. javascript 的鸭子类型，表明它基于对象，不适合完全函数式表达。 2. 数学思维和数据处理适合用函数式，技术是为业务服务的，而业务模型适合用面向对象。 3. 业务开发和做研究不同，逻辑严谨的函数式相当完美，但别指望每个程序员都愿意消耗大量脑细胞解决日常业务问题。...
写到第三集才发现，真的不能用太多中文描述 w3c 的规范，比如 `Document` 和 `文档`，用 `Document` 表示时，我们会联想到一系列 `api`，但用 `文档` 描述时，下意识觉得"此文档非彼文档"，因此但凡遇到定义性名词，在需要的时候都会以英文展示。 # 3.1 Documents 任何 XML 或者 HTML，在解析 HTML 的浏览器上都被称为 `Documents`。 Document 的地址是绝对 url 地址，不过也可以在其生命周期，由脚本所改变（跳转，直接修改，pushState）。 当文档由脚本 `createDocument()` 或者 `createHTMLDocument()` 创建时，地址完全由脚本指定，并且会立即加载。...
# 作用域 #### 词法作用域：编译阶段确定（欺骗词法作用域 eval with） ``` function foo(str){ "use strict" eval(str) console.log(a) } foo('var a = 2') ``` ``` function foo(obj){ with (obj){ a = 2 } } var...
## 用法 为了对中间件有一个整体的认识，先从用法开始分析。调用中间件的代码如下： **源码** [createStore.js#39](https://github.com/reactjs/redux/blob/master/src/createStore.js#L39) ```javascript export default function createStore(reducer, preloadedState, enhancer) { if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') { enhancer = preloadedState preloadedState = undefined...
## 1 背景 本文开发框架基于 React，涉及 React 部分会对背景做简单铺垫。 前端开源江湖非常有意思，竞争是公平的，而且不需要成本，任何一个初入茅庐的学徒都可以找江湖高手过招，且迟早会自成门派，而今前端门派已经灿若繁星，知名的门派也不计其数，其『供需链』大致如下： w3c规范 ==> 浏览器实现 ==> *开发引擎* ==> 数据框架 ==> UI框架 ==> 开发者 ==> 用户 『可视化在线编辑器』指的是引擎这一环，虽然开发引擎在前端并不常见，但看看游戏界就能知道，脱离游戏引擎编码是多么痛苦的一件事。前端和游戏共同点是都要考虑 UI 和 数据逻辑，其实微软在做界面开发时就有很多引擎出现，现在前端一点一点向全栈迈进，架构越来越重，分工越来越细，因为 node 让许多后端开发者接触前端，将后端沉淀的精髓带到了前端，而今前端又将触手延伸到客户端、PC端甚至硬件领域，逐渐吸收了**开发引擎**的思想，促进前端进入工业时代。 在线编辑器是我在百度负责的主要项目之一，因为需要在 RN 的支持下兼容三端，因此就要设计得更加通用，为了循序渐进的讲解，我准备以...
这章罗列了基础的 number boolean float 等类型，并做了非常详尽的描述，不过实在太啰嗦了，所以只举了其中几个例子。 # 术语 ## Resources 只要资源满足最小功能就可以被实现，反之功能不全就无法被实现。 > `Image` 的像素资源可以被编码和解码，就可以显示在页面上，哪怕这个图片还包含了不被支持的动画资源。 > `mp4` 的长宽可以被读取，但是不支持压缩格式，也无法显示。 ## DOM trees `document` 根元素是文档的第一个元素，如果文档没有元素，那就没有根元素。 `Node` 归属的 `document` 可以通过 `Node` 的 `ownerDocument` 属性获取。 修改...
## 说明 解读不是翻译，因此不会逐句涵盖 w3c 的官方文档，我本意将站在一个初学者的角度，将需要注意的地方记录下来，同时站在一个实用主义者角度，将工作中不常用，但与标准差异较大的理解记录下来，主要意图是记录自己的理解，和帮助日后索引与查询，如果读者希望地毯式理解 w3c 标准，建议逐字阅读 w3c 官方英文文档。 ### HTML the Hypertext Markup Language 超文本标记语言 HTML 乍一看可能给人感觉到一些荒谬，因为其规范是在几十年间，许多不同背景的开发者共同贡献的，很多地方可能无法很全局的把握。 为了简化难度，没有暴露多线程的特征给开发者，HTML 和 DOM API 也被设计为无法检测是否有其它脚本正在同时运行。就算是 webWorker，其实现原理可以认为是在同一个浏览器上下文序列化执行所有脚本。 ### Tag 由 `` `/` 构成，某些标签可以不闭合，比如...
# 种子模块 ## 命名空间 ```typescript var _$ = window.$ // 把非 jquery 产生的 $ 存起来 jQuery.extend({ noConflict: function () { window.$ = _$ // 用非 jquery 的 $ 覆盖自己的 $...