Summay (1)

核心： MV* /  Flux / Vue.js / Node.js / Webpack

1. Vue.js

首先，Vue.js 是一个聚焦于前端界面的lib，同时也拥抱第三方支持。

Vue.js 的核心思想应该是 数据驱动 和 组件抽象，以此来完成响应式数据绑定以及组件布局。

a. 数据驱动

在数据驱动方面，Vue.js认为HTML是一种用于表现数据的模板，我们在HTML中用特殊的模板语法将可变的部分抽离，与数据载体相绑定。

举一个通俗的例子，一个最简单的table，table的内容是其可变的部分，所以在vue.js中提供了v-for能够支持将js数组-> tr-td标签，在这其中，当我们决定好HTML模板之后，我们就可以完全将专注点着眼于数据逻辑，vue.js则负责将模板与数据同步，提供特殊语法支持以及相关的API。

在这么模式中，数据载体相当于逻辑和视图的接口，只要保持数据载体，就可以随意改动视图或者逻辑，以避免在混沌时期，任何改动都要涉及到界面（或者DOM）。

大致上如上图所示，在混沌时代中，我们基本是根据前端逻辑直接对DOM进行修改，也没有过多的数据载体的概念。

但在Vue.js （也可以说是MVVM）中，逻辑操作数据载体，Vue.js作为中间人，监视DOM以及数据载体，让两者同步，但在开发的视角下，逻辑只需要变更数据载体，视图只需要通过数据载体构建可变部分，也正是一种关注点分离的策略。 作为逻辑的部分，无需考虑视图是怎么使用数据的，只需要专注于逻辑所带来的数据变化。作为视图的部分，只需要考虑如果使用数据载体来构建可观的视图，而无需关注逻辑会如果改变数据。

b. 组件抽象

在HTML中，已经有了足够庞大的原子级组件（<a>/<h1>/<table> /<div> etc.），任何界面都可以也都必须使用这些原子级别的组件进行构建，css又让这些原子组件赋有意义以及活力，标签是名字，css则可以看做形容词，以此构建富有语义的文档。但在愈发庞大的web应用中，我们所使用的原子级别组件也越来越多，甚至通过js创建更为庞大的组件。在不断的迭代开发过程中，这些组件的堆积也会愈发庞大，另一方面，重复率也会足够的增长。

在这一背景下，使用原子级别的组件构建可重用组件，应该是最省力的方式，Vue.js同样想到了这一点，使用小组件构建大组件，再使用大组件构建更大的组件/应用，我们所见到的不再是原始的<div>/<a>，可以是<app-header> <app-body> <app-view> 这种包含更多内容的标签。

正如上图，组件化可以让结构显得更具有层次感，每一个层次各司其职，关注他们应该关注的事情，而不是蚂蚁一般多的细节。也让调整与替换变得更加简单。

remark: 在最理想的工作流下，每一个角色应该是各司其职的，互补干涉的。角色之间不应该有过多的牵连。如果角色之前存在牵连，应该将牵连集中到第三方上，由第三方管理，第三方作为公共部分与每一个角色沟通。只要维护一个稳定的公共部分以及沟通协议，又或者让公共部分足够可信的情况下，每一个角色互不干扰，也能够由相应的角色所替代。另一方面，一个角色不应该关注太多的事情，不论这个角色如何强大，当他所拥有的关注点足够多的时候，必然会造成疏漏、冲突、优先级等因素。一个角色在较少的关注点下能够尽可能地完成所有必须的事情。

但另一方面，如果一个角色所做的事情太少，就会出现资源的浪费，需要尽可能控制抽象的颗粒度。

而各司其职也应该包含纵向和横向两个部分，外部的交互，内部的职能。

key word: 角色、第三方、协议、关注点、层次结构

所有的故事都应该以应变为基础，不存在不需要应变的程序，敏捷的盛行，迭代周期的减少足以反映应变的重要性。为了应变，则需要保证各个环节是可替换，易于替换的，就好像积木一般，我们可以随时替换其中的一块，但如果所用的积木太大，替换的时候往往大动干戈，但积木太小，有往往需要做更多的工作。但我们应该积极地面对应变，在已知能够产生变化的地方留出余地。

2. MV* / Flux

不论是MV* 还是Flux，都可以看做是管理数据流/角色的一种方式，例如MVC教会我们，将混沌分为三个层次，由V负责表现，C负责转达，M负责内涵，请求通过C到底M，再由M告知V应该做出相应对变动。

所以一个故事中应该有一些信息，这些信息表述了意图，也正是这些意图，让整个故事生动起来，也有一些默默工作的角色来处理这些信息，而另一些角色，把这些信息带来的改变表现在人们能够感受到的地方。

在MVC / MVP / MVVM / Flux 都用了不同的数据流动在讲述这一个大家都知道的故事。

正如上图，在每一种模式下，都在尽可能地讲述每一个角色应该做什么，每一个角色之间应该如何交互，如何划分职责，如何让我们的故事更加有迹可循，让我们在某一个时刻能够命中某一个或者某一些角色。

remark: 任何事情的发生都会遵循 输入-》处理-》输出，任何事情也都会有随时间发生的动态状态，也会有固有的静态结构。处理的过程不仅仅是在静态结构种流动，也是随时间推移产生的动态状态。在描述的时候，我们会勾勒静态结构，继而描述动态状态，以为构建出一个赋有生机的场景。

key word: 静态结构 、 动态状态

3. Node.js & webpack

node.js是一个以javascript为基础的服务器工具，结合了javascript单线程的特点，以此避免多线程所带来的不安全性。也因为单线程，会产生因为IO的阻塞，所以node.js结合了事件队列的特性，用异步IO解决这一问题。node.js底层包含了C库，而上层的javascript api在最后会调用这些c库，来完成功能。

也正是因为这些特点，node.js实际上只是一个满足IO密集型需求的服务器平台，对于CPU密集型的任务会产生阻塞影响效率。

node.js参考了commonJS / amd 支持模块化的JS，所以在node.js的所有js文件都可以使用exports / require 构建/导入模块。

node.js的npm，类似于maven，包含了大量第三方库支持。

webpack是一个前端构建工具，能够让所有前端代码变成统一的模块，使用exports / require 等关键字构建/导入模块，同时提供这些模块统一打包工具，让前端代码更加具有模块化。在webpack中loader根据相应的配置来完成模块的构建，loader以链式工作方法进行，一个loader的输出会作为下一个loader的输入，这也就是使得每一个loader可以做更加“精确”的事情，而不至于包含过多复杂而又无关的逻辑。

remark: 应当理解不是什么事都可以经善尽美，应该清楚每个角色需要做好什么事，以此为基础进行上层扩展。也应当将一些不是必要的事情交于其他角色完成，以此保证关注点内的职责经善尽美。