vue响应式原理（数据双向绑定的原理）-低调大师

vue响应式原理（数据双向绑定的原理）

2018-06-06 730

先来了解一下几个相关概念

1、渐进式框架

下面是摘自知乎的一个解答（个人认为讲述比较好的回答）：

在我看来，渐进式代表的含义是：主张最少。
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：
- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

渐进式的含义，我的理解是：没有多做职责之外的事。

2、MVC模式

MVC的全称是Model-View-Controller，模型-视图-控制器，整个结构分成三层：

● 最上面一层，视图层（View）：用户界面（UI）

● 最底层，是核心的“数据层”：保存数据

● 中间层，控制层（Controller）：处理业务逻辑，负责根据用户从“视图层”输入的指令，选取“数据层”的数据，然后对其进行相应的操作，产生最终的结果

各部分的通信方式如下：

A、View传送指令到Controller

B、Controller完成业务逻辑后，要求Model改变状态

C、Model将新的数据发送到View,用户得到反馈

所有通信都是单向的。

栗子：

以计算机的计算器为例，解释一下MVC模式（不一定使用这种模式编写）：

外部的按钮和最上面的显示条就是View(视图层)；需要运算的数字就是Model（数据层）；执行+ - * /等内部运算步骤就是Controller(控制层)。每一层都执行不同的功能。

详细讲解的链接

3、MVP

MVP模式将Controller更名为Presenter，同时改变了通信方向

A、各部分的通信都是双向的

B、View与Model不发生联系，都通过Presenter传递

C、View不部署任何业务逻辑，成为“被动视图”，而所有业务逻辑都部署在Presenter

4、MVVM模式

MVVM模式将Presenter更名为ViewModel（对应MVC中的C-controller），基本上与MVP模式一致。唯一区别MVVM采用双向数据绑定，View的变动自动反应在ViewModel上。

● M（model）：模型---javascript object,代表真实情况的内容（一个面向对象的方法）、或表示内容（以数据为中心的方法）的数据访问层

● V（view）：视图---用户界面（UI）

● Viewmodel：在vue中指vue实例对象，是一个公开公共属性和命令的抽象的view；是一个转值器，负责转换Model中的数据对象，来让对象变得更容易管理和使用。

View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作。

5、轻量级框架的定义详细介绍链接

6、数据双向绑定

所谓的双向绑定，就是view的变化能反映到ViewModel上，ViewModel的变化能同步到view上

详细参考链接

vue的定义：

● vue是一套用于构建用户界面的渐进式框架

● vue是一款基于MVVM方式的轻量级的框架

● vue是一款基于数据驱动、组件化思想的框架

● vue被设计为可以自底向上、逐层应用的框架

● vue的核心库只关注视图层，易于上手，还便于与第三方库或既有项目整合

● 当与现代化的工具链以及各种支持类库结合使用时，vue也完全能够为复杂的单页应用提供驱动

数据驱动：Vue.js 一个核心思想是数据驱动。所谓数据驱动是指视图是由数据驱动生成的，对视图的修改，不会直接操作 DOM，而是通过修改数据。相比传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量，特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护

在MVVM中，M(model)---代表JavaScript Objects，V(view)---DOM也就是UI，VM(ViewModel)----代表Vue实例对象（在该对象中有Directives和DOM Listeners）

在vue.js里面只需要改变数据，Vue.js通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化，DOM是数据的一种自然的映射。vue.js还会对View操作做一些监听（DOM Listener），当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。这样就形成了数据的双向绑定。

Vue实现数据双向绑定的原理：

如右图所示，new Vue一个实例对象a，其中有一个属性a.b，那么在实例化的过程中，通过Object.defineProperty()会对a.b添加getter和setter，同时Vue.js会对模板做编译，解析生成一个指令对象（这里是v-text指令），每个指令对象都会关联一个Watcher,当对a.b求值的时候，就会触发它的getter，当修改a.b的值的时候，就会触发它的setter，同时会通知被关联的Watcher，然后Watcher就会再次对a.b求值，计算对比新旧值，当值改变了，Watcher就会通知到指令，调用指令的update()方法，由于指令是对DOM的封装，所以就会调用DOM的原生方法去更新视图，这样就完成了数据改变到视图更新的一个自动过程

实现数据双向绑定的方法：

A、发布者-订阅者模式（backbone.js）

思路：使用自定义的data属性，在HTML代码中指明绑定。所有绑定起来的javascript对象以及DOM元素都将订阅一个发布者对象。任何时候如果javascript对象或者一个HTML输入字段被侦测到发生变化，将代理事件变成发布者-订阅者模式，这会反过来变化广播，并传播到所有绑定的javascript对象以及DOM元素上。

B、脏值检查（angular.js）：dirty check 详细讲解链接

angular.js是通过脏值检测的方式，对比数据是否有变更，从而决定是否更新视图。最简单的方式就是通过setInterval()定时轮询检测数据变动。angular.js只有在指定的事件触发时，进入脏值检测，大致如下：

● DOM事件，譬如用户输入文本，点击按钮等（ng-click）

● XHR响应事件（$http）

● 浏览器location变更事件（$location）

● Timer事件（$timeout,$interval）

● 执行$digest()或$apply()

C、数据劫持结合发布者-订阅者模式（vue.js）【vue data是如何实现的？？】

vue.js采用数据劫持结合发布者-订阅者的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时，发布消息给订阅者，触发相应的监听回调。

具体的来讲，Vue.js通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化。vue.js还会对操作做一些监听（DOM Listener），当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。这样就形成了数据的双向绑定。

具体步骤如下：

● 首先，需要对observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter getter。这样的话，给这个对象的某个属性赋值，就会触发setter，那么就能监听到数据变化。（其实是通过Object.defineProperty()实现监听数据变化的）

● 然后，需要compile解析模板指令，将模板中的变量替换成数据，接着初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者。一旦数据有变动，订阅者收到通知，就会更新视图

● 接着，Watcher订阅者是Observer和Compile之间通信的桥梁，主要负责：

1）在自身实例化时，往属性订阅器（Dep）里面添加自己

2）自身必须有一个update()方法

3）待属性变动，dep.notice()通知时，就调用自身的update()方法，并触发Compile中绑定的回调

● 最后，viewmodel(vue实例对象)作为数据绑定的入口，整合Observer、Compile、Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 (ViewModel)-》视图更新(view)；视图变化(view)-》数据(ViewModel)变更的双向绑定效果。

例1：利用Object.defineProperty()实现一个小栗子（G：\有用的\练习\a.js）

var obj = {};

 
  Object.defineProperty(obj, 'hello', { //obj---变量名，hello---变量的属性名（任意取名）

get: function() {

 
   console.log('get val:'+ value); //value-（任意取名）--属性“hello”的值

return value;

　 },

　　set: function(newVal) {

value = newVal;

console.log('set val:'+ value);

}

});

obj.hello='111';

obj.hello;

结果：

set val:111

get val:111

如果去掉下面这句话：

obj.hello='111';

则控制台报错：

ReferenceError: value is not defined

可见Object.defineProperty()监控对数据的操作，可以自动触发数据同步

例2、利用Object.defineProperty()实现简单的双向绑定（G：\有用的\练习\a.html）

<!DOCTYPE html>

<head>

 
   <title>测试Object.defineProperty()</title>

</head>

<body>

 
   <div id="app">

 
   <input type="text" id="a">

 
   <span id="b"></span>

</div>

 
   <script type="text/javascript">

var obj = {};

Object.defineProperty(obj, 'hello', {

 
   get: function() {

console.log('get val:'+ val);

return val;

},

 
   set: function(newVal) {

val = newVal;

console.log('set val:'+ val);

document.getElementById('a').value = val;

document.getElementById('b').innerHTML = val;

}

});

 
   document.addEventListener('keyup', function(e) {//触发事件的时机，从而执行相应的操作

obj.hello = e.target.value;

});

</script>

</body>

</html>

效果如下：

上面操作直接使用了DOM操作改变了文本节点的值，而且是在知道id的情况下，使用document.getELementById()获取到响应的文本节点，然后修改文本节点的值。

封装成一个框架，肯定不能使用这种做法。所以需要一个可以解析DOM并且能修改DOM中相应变量的模块。

例3、实现简单Compile（G：\有用的\练习\b.html）

A、首先，获取文本中真实的DOM节点

B、然后，分析节点的类型

C、最后，根据节点的类型做相应的处理

在例2中，多次操作DOM节点，为了提高性能和效率，将进行下面操作：

A、将所有的节点转换成文档碎片（fragment）进行编译操作

B、解析操作完成后，在将文档碎片（fragment）添加到原来的真实DOM节点

<!DOCTYPE html>

 
  <head></head>

<body>

 
      <div id="app">

 
          <input type="text" id="a" v-model="text">  <!-- v-model指令实现文本输入与应用状态之间的双向绑定 -->

{{text}} 

</div>

 
    　<script type="text/javascript">

 
          function Compile(node, vm) { //node---DOM中的某个节点，vm---用Vue()实例化的对象

 
              if(node) {//判断该节点是否存在，存在则将节点转换成文档碎片

this.$frag = this.nodeToFragment(node, vm);

 
                  return this.$frag;//返回文档碎片

}

Compile.prototype = {

 
              nodeToFragment: function(node, vm) {//将node节点的所有的子节点都转换成fragment

var self = this;

var frag = document.createDocumentFragment();

var child;

while(child = node.firstChild) {

self.compileElement(child, vm);

 
                       frag.append(child); //  // 将所有子节点添加到fragment中，child是指向元素首个子节点的引用。将child引用指向的对象append到父对象的末尾，原来child引用的对象就跳到了frag对象的末尾，而child就指向了本来是排在第二个的元素对象。如此循环下去，链接就逐个往后跳了

}

return frag;

},

 
              compileElement: function(node, vm) {//分析节点的类型，并处理节点中相应的变量的值

 
                  var reg = /\{\{(.*)\}\}/;//.匹配除了\b之外的任何单个字符，*表示0或多个，形如{{d}}

//节点类型为元素

if(node.nodeType === 1) {

var attr = node.attributes;

// 解析属性

 
                      for(var i = 0; i < attr.length; i++ ) {

if(attr[i].nodeName == 'v-model') {

var name = attr[i].nodeValue; // 获取v-model绑定的属性名

 
                              node.addEventListener('input', function(e) {

// 给相应的data属性赋值，进而触发该属性的set方法

vm.data[name]= e.target.value;

});

node.value = vm.data[name]; // 将data的值赋给该node

node.removeAttribute('v-model');

}

//节点类型为text

if(node.nodeType === 3) {

if(reg.test(node.nodeValue)) {// 获取v-model绑定的属性名

 
                          var name = RegExp.$1; // 获取匹配到的字符串

name = name.trim();

node.nodeValue = vm.data[name]; // 将data的值赋给该node

// new Watcher(vm, node, name);

}

},

}

// 实例化对象的构造函数

 
          function Vue(options) {

this.data = options.data;

 
              var data = this.data; //vue实例对象的data对象属性

var id = options.el; //挂载元素的id

 
              var dom =new Compile(document.getElementById(id),this);

// 编译完成后，将dom返回到app中

document.getElementById(id).appendChild(dom);

}

 
          var vm = new Vue({ //利用构造函数Vue()，实例化一个对象vm

el: 'app', //el---挂载元素，app---表示DOM中的某个节点的id

data: { //data---进行交互的数据

text: 'hello world' //属性text名与v-model绑定的属性名一样

}

});

</script>

</body>

</html>

到这我们获取了文本中真实的DOM节点，然后分析节点的类型，并能处理节点中相应的变量，如上面的{{text}}，最后渲染到页面中。最后，需要和双向绑定联系起来，实现{{text}}响应式的数据绑定。

例4、实现简单observe（G：\有用的\练习\c.html）

简单的observe定义如下

需要监控data的属性值，对象的某个属性被赋值了，就会触发setter，这样就能监听到数据变化。

需要将vm.data[name]属性改为vm[name]

完整代码如下：

<!DOCTYPE html>

 
  <head></head>

<body>

 
   <div id="app">

 
   <input type="text" id="a" v-model="text">

{{text}}

</div>

 
   <script type="text/javascript">

 
   　　function Compile(node, vm) {

if(node) {

this.$frag = this.nodeToFragment(node, vm);

return this.$frag;

}

Compile.prototype = {

 
   nodeToFragment: function(node, vm) {

var self = this;

var frag = document.createDocumentFragment();

var child;

while(child = node.firstChild) {

self.compileElement(child, vm);

frag.append(child); // 将所有子节点添加到fragment中

}

return frag;

},

 
   compileElement: function(node, vm) {

var reg = /\{\{(.*)\}\}/;

//节点类型为元素

if(node.nodeType === 1) {

var attr = node.attributes;

// 解析属性

 
   for(var i = 0; i < attr.length; i++ ) {

if(attr[i].nodeName == 'v-model') {

var name = attr[i].nodeValue; // 获取v-model绑定的属性名

 
   node.addEventListener('input', function(e) {

// 给相应的data属性赋值，进而触发该属性的set方法

vm[name]= e.target.value;

});

node.value = vm[name]; // 将data的值赋给该node

node.removeAttribute('v-model');

}

//节点类型为text

if(node.nodeType === 3) {

if(reg.test(node.nodeValue)) {

 
   var name = RegExp.$1; // 获取匹配到的字符串

name = name.trim();

node.nodeValue = vm[name]; // 将data的值赋给该node

// new Watcher(vm, node, name);

}

},

}

 
   function defineReactive (obj, key, val) {

Object.defineProperty(obj, key, {

 
   get: function() {

return val;

},

 
   set: function (newVal) {

if(newVal === val) return;

val = newVal;

console.log(val);

}

});

}

 
   function observe(obj, vm) {

 
   Object.keys(obj).forEach(function(key) { //---监听data的每一个属性

defineReactive(vm, key, obj[key]);

});

}

 
   　 function Vue(options) {

this.data = options.data;

var data = this.data;

observe(data, this);

var id = options.el;

 
   var dom =new Compile(document.getElementById(id),this);

// 编译完成后，将dom返回到app中

document.getElementById(id).appendChild(dom);

}

var vm = new Vue({

el: 'app',

data: {

text: 'hello world'

}

});

</script>

</body>

</html>

显示效果如下

虽然set方法触发了，但是文本节点{{text}}的内容没有变化，要让绑定的文本节点同步变化，就需要引入订阅者-发布者模式。

例5、订阅发布模式

订阅发布模式（又称观察者模式），定义了一种一对多的关系，让多个观察者同时监听某一个主题对象，这个主题对象的状态发生改变时就会通知所有观察者对象。

发布者发出通知=》主题对象收到通知，并推送给订阅者=》订阅者执行相应操作。

A、首先，要有一个收集订阅者的容器，定义一个Dep作为主题对象。

B、然后，定义订阅者Watcher

C、添加订阅者Watcher到主题对象Dep，发布者发出通知到属性监听里面

D、最后，需要订阅的地方

至此，用DOM操作，实现双向绑定的操作的完整代码如下

<!DOCTYPE html>

 
  <head></head>

<body>

 
   <div id="app">

 
   <input type="text" id="a" v-model="text">

{{text}}

</div>

 
   <script type="text/javascript">

 
   　　function Compile(node, vm) {

if(node) {

this.$frag = this.nodeToFragment(node, vm);

return this.$frag;

}

Compile.prototype = {

 
   nodeToFragment: function(node, vm) {

var self = this;

var frag = document.createDocumentFragment();

var child;

while(child = node.firstChild) {

self.compileElement(child, vm);

frag.append(child); // 将所有子节点添加到fragment中

}

return frag;

},

 
   compileElement: function(node, vm) {

var reg = /\{\{(.*)\}\}/;

//节点类型为元素

if(node.nodeType === 1) {

var attr = node.attributes;

// 解析属性

 
   for(var i = 0; i < attr.length; i++ ) {

if(attr[i].nodeName == 'v-model') {

var name = attr[i].nodeValue; // 获取v-model绑定的属性名

 
   node.addEventListener('input', function(e) {

// 给相应的data属性赋值，进而触发该属性的set方法

vm[name]= e.target.value;

});

// node.value = vm[name]; // 将data的值赋给该node

new Watcher(vm, node, name, 'value');

}

//节点类型为text

if(node.nodeType === 3) {

if(reg.test(node.nodeValue)) {

 
   var name = RegExp.$1; // 获取匹配到的字符串

name = name.trim();

// node.nodeValue = vm[name]; // 将data的值赋给该node

new Watcher(vm, node, name, 'nodeValue');

}

},

}

 
   function Dep() {

this.subs = [];

}

Dep.prototype = {

 
   addSub: function(sub) {

this.subs.push(sub);

},

 
   notify: function() {

 
   this.subs.forEach(function(sub) {

sub.update();

});

}

 
   function Watcher(vm, node, name, type) {

Dep.target = this;

this.name = name;

this.node = node;

this.vm = vm;

this.type = type;

this.update();

Dep.target = null;

}

Watcher.prototype = {

 
   update: function() {

this.get();

 
   this.node[this.type] = this.value; // 订阅者执行相应操作

},

// 获取data的属性值

 
   get: function() {

 
   this.value = this.vm[this.name]; //触发相应属性的get

}

 
   function defineReactive (obj, key, val) {

var dep = new Dep();

Object.defineProperty(obj, key, {

 
   get: function() {

//添加订阅者watcher到主题对象Dep

if(Dep.target) {

 
   // JS的浏览器单线程特性，保证这个全局变量在同一时间内，只会有同一个监听器使用

dep.addSub(Dep.target);

}

return val;

},

 
   set: function (newVal) {

if(newVal === val) return;

val = newVal;

console.log(val);

// 作为发布者发出通知

dep.notify();

}

});

}

 
   function observe(obj, vm) {

 
   Object.keys(obj).forEach(function(key) {

defineReactive(vm, key, obj[key]);

});

}

 
   　 function Vue(options) {

this.data = options.data;

var data = this.data;

observe(data, this);

var id = options.el;

 
   var dom =new Compile(document.getElementById(id),this);

// 编译完成后，将dom返回到app中

document.getElementById(id).appendChild(dom);

}

var vm = new Vue({

el: 'app',

data: {

text: 'hello world'

}

});

</script>

</body>

</html>

效果如下：可以双向绑定数据了

总结：Vue.js实现数据双向通信的原理，用几句话简单的概括：

A、通过observe()函数里面Object.defineProperty()监听UI的变化，从而得到数据的变化；再通过compile()函数监听绑定该数据的DOM节点，当数据变化的时候就会通知这些节点更新数据，从而实现UI的变化。

B、observe()函数实现监听UI变化，从而获得新的数据；compile()函数实现监听数据变化，然后将数据传送到绑定该数据的DOM节点上显示。

原文发布时间：
原文作者：tangxiujiang
本文来源CSDN博客如需转载请紧急联系作者

微信关注我们

原文链接：https://yq.aliyun.com/articles/613041

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

[nodemon] Error: watch /xxx/ ENOSPC 解决方法

　软件环境 ubuntu18.04, "nodemon": "^1.17.5" 　解决方法命令行输入　 echo fs.inotify.max_user_watches=666666 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p 解释一下这行命令的意思将echo fs.inotify.max_user_watches=666666的输出内容，也就是＂fs.inotify.max_user_watches=666666＂通过｜传给后面的命令，然后tee将前面的传过来的内容输出到标准输出的同时，追加到文件file中。如果文件不存在，则创建；如果已经存在，就在末尾追加内容，而不是覆盖，最后是系统重新加载配置文件，使更改生效．大家可以到/proc/sys/fs/inotify下查看自己更改的值错误原因就是一个程序监控的文件数量超出了设定值，这行命令就是把设定的值改大一些进一步了解inotify -- linux内核中的文件系统变化通知机制,我猜nodemon的watch就是通过他来实现的

2018-06-06

943

6月7日云栖精选夜读丨解读阿里云AI产品矩阵：目标是打造最强中国云计算能力

在近日举办的阿里云栖大会武汉峰会上，阿里云AI产品矩阵的亮相作为压轴大戏出场，这也是阿里云首次曝光了人工智能产品家族，全方位公开AI产品体系，AI作为阿里云，乃至阿里巴巴集团技术应用和市场战略的重要一环，承载了阿里怎样的思量？ AI产品矩阵全亮相产业界目前对AI的期待不一而同，有些企业希望通过AI实现让机器人探索大自然，建立媲美自然的数字神经系统，或者战胜重大疾病等远大的目标，这些想象虽很美好，但却需要厂商持续不断的海量投入和长远的攻关，起码在现阶段仍不可能完成。热点热议解读阿里云AI产品矩阵：目标是打造最强中国云计算能力作者：技术小能手发表在：雷锋网开源 | 蚂蚁金服开源：关系数据的可视化引擎 G6 2.0 作者：兔子酱发表在：蚂蚁金服科技 AliOS把人脸识别搬上汽车，将带来怎样的想象空间作者：技术小能手发表在：天下网商知识整理 Java日志框架-commons-logging 作者：禾禾元元 ClamAV--Linux异常排查好帮手作者： towaynet AI大牛教你如何秒速部署GPU深度学习的应用作者：小白狼ggg HBase之Rowkey设计...

2018-06-06

740

发表评论

资源下载

更多资源

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。