(PS: 时刻就像海绵里的水，挤到没法挤，只能挤挤就寝时刻了~ 知识点照样须要整顿的，支付总会有收成，tired but fulfilled~)
媒介
近来营业开辟，从零搭建网页生成器，支撑网页的可视化设置。为了满足这类需求，须要将种种页面笼统成相似地模块，再将每一个模块笼统成各个可设置的组件，有些组件还包含一些小部件。如许一来，页面设置的JSON数据就会深层级地嵌套，那末修正一个小组件的设置，要如何来更新页面树的数据？用id一层一层遍历？如许做法固然是不引荐的，不仅机能差，代码写起来也贫苦。因而，就推敲可否像数据库一样，把数据范式化，将嵌套的数据睁开，每条数据对应一个id，经由历程id直接操纵。Normalizr 就帮你做了如许一件事变。
别的推敲到页面编辑，就须要支撑 打消 与 重做的功用，那末要如何来保留每一步的数据？页面编辑的数据相互关联，对象的可变性会带来很大的隐患。虽然JS中的const(es6)、Object.freeze(es5) 可以防备数据被修正，但它们都是shallow处置惩罚，碰到嵌套多和深的构造就须要递归处置惩罚，而递归又存在机能上的题目。这时刻，用过React的童鞋就知道了，React借助 Immutable 来削减DOM diff的比对，它就可以很好地处理上面这两个题目。Immutable 完成的道理是 Persistent Data Structure（耐久化数据构造），也就是运用旧数据竖立新数据时，要保证旧数据同时可用且稳定。
那末为安在JS中，诸如对象如许的数据范例是可变的呢？我们先来相识一下JS的数据范例。
JS数据范例
JS的数据范例包含基本范例和援用范例。基本范例包含String、Number、 Boolean、Null、Undefined，援用范例主假如对象（包含Object、Function、Array、Data等）。基本范例的值自身没法被转变，而援用范例，如Object，是可以被转变的。本文议论的数据不可变，就是指坚持对象的状况稳定。来看看下面的例子：
// 基本范例
var a = 1;
var b = a;
b = 3;
console.log(a); // 1
console.log(b); // 3
// 援用范例
var obj1 = {};
obj1.arr = [2,3,4];
var obj2 = obj1;
obj2.arr.push(5);
console.log(obj1.arr); // [2, 3, 4, 5]
console.log(obj2.arr); // [2, 3, 4, 5]上面例子中，b的值转变后，a的值不会随着转变；而obj2.arr被修正后，obj1.arr的值却随着变化了。这是由于JS对象中的赋值是“援用赋值”，即在赋值的历程当中，通报的是在内存中的援用。这也是JS中对象为何有深拷贝和浅拷贝的用法，只要深拷贝后，对新对象的修正才不会转变本来的对象。
浅拷贝只会将对象的各个属性举行顺次复制，并不会举行递归复制，而 JavaScript 存储对象都是存地点的。上面代码中，只是实行了浅拷贝，结果致使 obj1 和 obj2指向统一块内存地点。所以修正obj2.arr，obj1.arr的值也变了。假如是深拷贝(如Lodash的cloneDeep)则差别，它不仅将原对象的各个属性逐一复制出去，而且将原对象各个属性所包含的对象也顺次采纳深拷贝的要领递归复制到新对象上，也就不会存在上面 obj1 和 obj2 中的 arr 属性指向统一个内存对象的题目。
为了更清楚地明白这个题目，照样得来相识下javascript变量的存储体式格局。
数据范例的存储
顺序的运行都须要内存，JS言语把数据分派到内存的栈（stack）和堆（heap）举行种种挪用（注：内存中除了栈和堆，另有常量池）。JS如许分派内存，与它的渣滓接纳机制有关，可以使顺序运行时占用的内存最小。
在JS中，每一个要领被实行时，都邑竖立本身的内存栈，这个要领内定义的变量就会一一被放入这个栈中。比及要领实行完毕，它的内存栈也自然地烧毁了。因而，一切在要领中定义的变量都是放在栈内存中的。当我们在顺序中竖立一个对象时，这个对象将被保留到运行时数据区中，以便重复应用（由于对象的竖立本钱一般较大），这个运行时数据区就是堆内存。堆内存中的对象不会随要领的完毕而烧毁，纵然要领完毕后，这个对象还能够被另一个援用变量所援用。只要当一个对象没有任何援用变量援用它时，体系的渣滓接纳机制才会在核实的时刻接纳它。
总的来讲，栈中存储的是基本变量以及一些对象的援用变量，基本变量的值是存储在栈中，而援用变量存储在栈中的是指向堆中的对象的地点，这就是修正援用范例总会影响到其他指向这个地点的援用变量的缘由。堆是运行时动态分派内存的，存取速率较慢，栈的上风是存取速率比堆要快，而且栈内的数据可以同享，然则栈中数据的大小与生存期必需是肯定的，缺少天真性。
Normalizr与范式化
范式化（Normalization）是数据库设想中的一系列道理和手艺，以削减数据库中数据冗余，增长数据的一致性。直观地形貌就是寻觅对象之间的关联，经由历程某种体式格局将关联之间举行映照，削减数据之间的冗余，优化增编削查操纵。Normalizr库自身的诠释就是Normalizes nested JSON according to a schema），一种相似于关联型数据库的处置惩罚要领，经由历程建表竖立数据关联，把深层嵌套的数据睁开，更轻易天真的处置惩罚和操纵数据。
来看个官网的例子，明白一下：
{
"id": "123",
"author": {
"id": "1",
"name": "Paul"
},
"title": "My awesome blog post",
"comments": [
{
"id": "324",
"commenter": {
"id": "2",
"name": "Nicole"
}
}
]
}这是一份博客的数据，一篇文章article有一个作者author, 一个题目title, 多条批评，每条批评有一个批评者commenter，每一个commenter又有本身的id和name。如许假如我们要猎取深层级的数据，如commenter时，就须要层层遍历。这时刻候，假如运用Normalizr，就可以如许定义Schema：
import { schema } from 'normalizr';
const user = new schema.Entity('users');
const comment = new schema.Entity('comments', {
commenter: user
});
const article = new schema.Entity('articles', {
author: user,
comments: [comment]
});然后挪用一下 Normalize，就可以获得扁平化后的数据，以下：
{
"entities": {
"users": {
"1": {
"id": "1",
"name": "Paul"
},
"2": {
"id": "2",
"name": "Nicole"
}
},
"comments": {
"324": {
"id": "324",
"commenter": "2"
}
},
"articles": {
"123": {
"id": "123",
"author": "1",
"title": "My awesome blog post",
"comments": ["324"]
}
}
},
"result": "123"
}如许每一个作者、每条批评、每篇文章都有对应的id, 我们就不须要遍历，可以直接拿对应的id举行修正。
再来看下我们在项目中的示例代码：
离别定义element、section 和 page三张表，并指定它们之间的关联。如许范式化后，想对某个页面某个模块或许某个元素举行增删查改，就直接拿对应的id，不须要再耗机能去遍历了。
Immutable与耐久化
Facebook工程师Lee Byron花了3年时刻打造Immutable，与 React 同期涌现。Immutable Data，维基百科上是如许定义的：
In computing, a persistent data structure is a data structure that always preserves the previous version of itself when it is modified. Such data structures are effectively immutable, as their operations do not (visibly) update the structure in-place, but instead always yield a new updated structure.
简朴来讲，Immutable Data 就是一旦竖立，就不能再被变动的数据。对 Immutable 对象的任何修正或增加删除操纵都邑返回一个新的 Immutable 对象。Immutable 完成的道理是 Persistent Data Structure（耐久化数据构造），也就是运用旧数据竖立新数据时，要保证旧数据同时可用且稳定。Immutable 运用了 Structural Sharing（构造同享），即假如对象树中一个节点发生变化，只修正这个节点和受它影响的父节点，别的节点则举行同享，如许就避免了深拷贝带来的机能消耗。
我们经由历程图片来明白一下：
Immutable 内部完成了一套完全的耐久化数据构造，有许多易用的数据范例，如Collection、List、Map、Set、Record、Seq（Seq是自创了Clojure、Scala、Haskell这些函数式编程言语，引入的一个特别构造）。它有异常周全的map、filter、groupBy、reduce、find等函数式操纵要领。它的Api很壮大，人人有兴致可以去看下。这里简朴枚举 updateIn/getIn 来展现它带来的一些便利操纵：
var obj = {
a: {
b: {
list: [1, 2, 3]
}
}
};
var map = Immutable.fromJS(obj); // 注重 fromJS这里完成了深转换
var map2 = Immutable.updateIn(['a', 'b', 'list'], (list) => {
return list.push(4);
});
console.log(map2.getIn(['a', 'b', 'list']))
// List [ 1, 2, 3, 4 ]代码中我们要转变数组List的值，没必要一层一层猎取数据，而是直接传入对应的途径修正就行。这类操纵在数据嵌套越深时，上风越发显著。来看下我们营业代码的示例吧。
这里在多个页面的模块设置中，要更新某个页面的某个模块的数据，我们只须要在updateIn传入对应的path和value，就可以到达料想的结果。篇幅有限，更多的示例请自行检察api。
熟习React的同砚也基于它构造的不可变性和同享性，用它来可以疾速举行数据的比较。底本React中运用PureRenderMixin来做DOM diff比较，但只是浅比较，当数据构造比较深的时刻，依旧会存在过剩的diff历程。这里只提个点，不深切睁开了，感兴致的同砚可以自行google。
与 Immutable.js 相似的，另有个seamless-immutable，它的代码库异常小，紧缩后下载只要 2K。而 Immutable.js 紧缩后下载有16K。人人各取所需，依据实际情况，本身推敲下运用哪一个比较合适。
优瑕玷
什么事物都有利害，代码库也不破例。这里枚举下它们的优瑕玷，人人权衡利害，一起来看下：
Normalizr 可以将数据扁平化处置惩罚，轻易对深层嵌套的数据举行增删查改，然则文档不是很清楚，人人多查多明白，引入库文件也会增大。Immutable 有耐久化数据构造，如List/Map等，并发平安。其次，它支撑构造同享，比cloneDeep 机能更优，节约内存。第三，它自创了Clojure、Scala、Haskell这些函数式编程言语，引入了特别构造Seq，支撑Lazy operation。Undo/Redo，Copy/Paste，以至时刻游览这些功用对它来讲都是小菜一碟。瑕玷方面，Immutable源文件过大，紧缩后有15kb。而且它侵入性强，与原生api轻易殽杂。另外，范例转换比较烦琐，尤其是与服务器交互频仍时，这类瑕玷就越发显著。固然，也可以依据营业需求，权衡下是不是用seamless-immutable，它运用 Object.defineProperty （因而只能在 IE9 及以上运用） 扩大了 JavaScript 的 Array 和 Object 对象来完成，只支撑 Array 和 Object 两种数据范例。然则代码库异常小，紧缩后下载只要 2K。
总结
篇幅有限，时刻也比较晚了，关于前端数据的扁平化与耐久化处置惩罚先讲这么多了，有兴致的同砚可以关注下，背面有时刻会多整顿分享。
