前言

什么是数据双向绑定？

　　vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具（如redux）的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突，我们可以这么解决。

为什么要实现数据的双向绑定？

　　 在vue中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，vue的双向数据绑定用起来就特别舒服了。

　　 即两者并不互斥， 在全局性数据流使用单项，方便跟踪； 局部性数据流使用双向，简单易操作。

　　　

一、访问器属性

　　Object.defineProperty()函数可以定义对象的属性相关描述符， 其中的set和get函数对于完成数据双向绑定起到了至关重要的作用，下面，我们看看这个函数的基本使用方式。

　　

  1.     var obj = {
  2.       foo: 'foo'
  3.     }
  4.  
  5.     Object.defineProperty(obj, 'foo', {
  6.       get: function () {
  7.         console.log('将要读取obj.foo属性');
  8.       },
  9.       set: function (newVal) {
  10.         console.log('当前值为', newVal);
  11.       }
  12.     });
  13.  
  14.     obj.foo; // 将要读取obj.foo属性
  15.     obj.foo = 'name'; // 当前值为 name

　　可以看到，get即为我们访问属性时调用，set为我们设置属性值时调用。

　　

二、简单的数据双向绑定实现方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>forvue</title>
  6. </head>
  7. <body>
  8.   <input type="text" id="textInput">
  9.   输入：<span id="textSpan"></span>
  10.   <script>
  11.     var obj = {},
  12.         textInput = document.querySelector('#textInput'),
  13.         textSpan = document.querySelector('#textSpan');
  14.  
  15.     Object.defineProperty(obj, 'foo', {
  16.       set: function (newValue) {
  17.         textInput.value = newValue;
  18.         textSpan.innerHTML = newValue;
  19.       }
  20.     });
  21.  
  22.     textInput.addEventListener('keyup', function (e) {
  23.         obj.foo = e.target.value;
  24.     });
  25.  
  26.   </script>
  27. </body>
  28. </html>

最终效果图：

可以看到，实现一个简单的数据双向绑定还是不难的： 使用Object.defineProperty()来定义属性的set函数，属性被赋值的时候，修改Input的value值以及span中的innerHTML；然后监听input的keyup事件，修改对象的属性值，即可实现这样的一个简单的数据双向绑定。

三、 实现任务的思路

　　上面我们只是实现了一个最简单的数据双向绑定，而我们真正希望实现的时下面这种方式：

  1.     <div id="app">
  2.         <input type="text" v-model="text">
  3.         {{ text }}
  4.     </div>  
  5.  
  6.     <script>
  7.         var vm = new Vue({
  8.             el: '#app',
  9.             data: {
  10.                 text: 'hello world'
  11.             }
  12.         });
  13.     </script>

　　即和vue一样的方式来实现数据的双向绑定。那么，我们可以把整个实现过程分为下面几步： 

  • 输入框以及文本节点与 data 中的数据绑定
  • 输入框内容变化时，data 中的数据同步变化。即 view => model 的变化。
  • data 中的数据变化时，文本节点的内容同步变化。即 model => view 的变化。

　　

四、DocumentFragment

　　如果希望实现任务一，我们还需要使用到 DocumentFragment 文档片段，可以把它看做一个容器，如下所示：

  1. <div id="app">
  2.  
  3.     </div>
  4.     <script>
  5.         var flag = document.createDocumentFragment(),
  6.             span = document.createElement('span'),
  7.             textNode = document.createTextNode('hello world');
  8.         span.appendChild(textNode);
  9.         flag.appendChild(span);
  10.         document.querySelector('#app').appendChild(flag)
  11.     </script>

　　这样，我们就可以得到下面的DOM树：

　　使用文档片段的好处在于：在文档片段上进行操作DOM，而不会影响到真实的DOM，操作完成之后，我们就可以添加到真实DOM上，这样的效率比直接在正式DOM上修改要高很多 。

　　vue进行编译时，就是将挂载目标的所有子节点劫持到DocumentFragment中，经过一番处理之后，再将DocumentFragment整体返回插入挂载目标。

　　 

　　如下所示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>forvue</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <input type="text" id="a">
  10.         <span id="b"></span>
  11.     </div>
  12.  
  13.     <script>
  14.         var dom = nodeToFragment(document.getElementById('app'));
  15.         console.log(dom);
  16.  
  17.         function nodeToFragment(node) {
  18.             var flag = document.createDocumentFragment();
  19.             var child;
  20.             while (child = node.firstChild) {
  21.                 flag.appendChild(child);
  22.             }
  23.             return flag;
  24.         }
  25.  
  26.         document.getElementById('app').appendChild(dom);
  27.     </script>
  28.  
  29. </body>
  30. </html>

即首先获取到div，然后通过documentFragment劫持，接着再把这个文档片段添加到div上去。

五、初始化数据绑定

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>forvue</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <input type="text" v-model="text">
  10.         {{ text }}
  11.     </div>
  12.  
  13.     <script>
  14.         function compile(node, vm) {
  15.             var reg = /\{\{(.*)\}\}/;
  16.  
  17.             // 节点类型为元素
  18.             if (node.nodeType === ) {
  19.                 var attr = node.attributes;
  20.                 // 解析属性
  21.                 for (var i = ; i < attr.length; i++) {
  22.                     if (attr[i].nodeName == 'v-model') {
  23.                         var name = attr[i].nodeValue; // 获取v-model绑定的属性名
  24.                         node.value = vm.data[name]; // 将data的值赋值给该node
  25.                         node.removeAttribute('v-model');
  26.                     }
  27.                 }
  28.             }
  29.  
  30.             // 节点类型为text
  31.             if (node.nodeType === ) {
  32.                 if (reg.test(node.nodeValue)) {
  33.                     var name = RegExp.$; // 获取匹配到的字符串
  34.                     name = name.trim();
  35.                     node.nodeValue = vm.data[name]; // 将data的值赋值给该node
  36.                 }
  37.             }
  38.         }
  39.  
  40.         function nodeToFragment(node, vm) {
  41.             var flag = document.createDocumentFragment();
  42.             var child;
  43.  
  44.             while (child = node.firstChild) {
  45.                 compile(child, vm);
  46.                 flag.appendChild(child); // 将子节点劫持到文档片段中
  47.             }
  48.  
  49.             return flag;
  50.         }
  51.  
  52.         function Vue(options) {
  53.             this.data = options.data;
  54.             var id = options.el;
  55.             var dom = nodeToFragment(document.getElementById(id), this);
  56.             // 编译完成后，将dom返回到app中。
  57.             document.getElementById(id).appendChild(dom);
  58.         }
  59.  
  60.         var vm  = new Vue({
  61.             el: 'app',
  62.             data: {
  63.                 text: 'hello world'
  64.             }
  65.         });
  66.  
  67.     </script>
  68.  
  69. </body>
  70. </html>

以上的代码实现而立任务一，我们可以看到，hello world 已经呈现在了输入框和文本节点中了。

六、响应式的数据绑定

　　我们再来看看任务二的实现思路： 当我们在输入框输入数据的时候，首先触发的时input事件（或者keyup、change事件），在相应的事件处理程序中，我们获取输入框的value并赋值给vm实例的text属性。 我们会利用defineProperty将data中的text设置为vm的访问器属性，因此给vm.text赋值，就会触发set方法。 在set方法中主要做两件事情，第一是更新属性的值，第二留在任务三种说。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>forvue</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <input type="text" v-model="text">
  10.         {{ text }}
  11.     </div>
  12.  
  13.     <script>
  14.         function compile(node, vm) {
  15.             var reg = /\{\{(.*)\}\}/;
  16.  
  17.             // 节点类型为元素
  18.             if (node.nodeType === ) {
  19.                 var attr = node.attributes;
  20.                 // 解析属性
  21.                 for (var i = ; i < attr.length; i++) {
  22.                     if (attr[i].nodeName == 'v-model') {
  23.                         var name = attr[i].nodeValue; // 获取v-model绑定的属性名
  24.                         node.addEventListener('input', function (e) {
  25.                             // 给相应的data属性赋值，进而触发属性的set方法
  26.                             vm[name] = e.target.value;
  27.                         })
  28.  
  29.                         node.value = vm[name]; // 将data的值赋值给该node
  30.                         node.removeAttribute('v-model');
  31.                     }
  32.                 }
  33.             }
  34.  
  35.             // 节点类型为text
  36.             if (node.nodeType === ) {
  37.                 if (reg.test(node.nodeValue)) {
  38.                     var name = RegExp.$; // 获取匹配到的字符串
  39.                     name = name.trim();
  40.                     node.nodeValue = vm[name]; // 将data的值赋值给该node
  41.                 }
  42.             }
  43.         }
  44.  
  45.         function nodeToFragment(node, vm) {
  46.             var flag = document.createDocumentFragment();
  47.             var child;
  48.  
  49.             while (child = node.firstChild) {
  50.                 compile(child, vm);
  51.                 flag.appendChild(child); // 将子节点劫持到文档片段中
  52.             }
  53.  
  54.             return flag;
  55.         }
  56.  
  57.         function Vue(options) {
  58.             this.data = options.data;
  59.             var data = this.data;
  60.  
  61.             observe(data, this);
  62.  
  63.             var id = options.el;
  64.             var dom = nodeToFragment(document.getElementById(id), this);
  65.             // 编译完成后，将dom返回到app中。
  66.             document.getElementById(id).appendChild(dom);
  67.         }
  68.  
  69.         var vm  = new Vue({
  70.             el: 'app',
  71.             data: {
  72.                 text: 'hello world'
  73.             }
  74.         });
  75.  
  76.         function defineReactive(obj, key, val) {
  77.             // 响应式的数据绑定
  78.             Object.defineProperty(obj, key, {
  79.                 get: function () {
  80.                     return val;
  81.                 },
  82.                 set: function (newVal) {
  83.                     if (newVal === val) {
  84.                         return;
  85.                     } else {
  86.                         val = newVal;
  87.                         console.log(val); // 方便看效果
  88.                     }
  89.                 }
  90.             });
  91.         }
  92.  
  93.         function observe (obj, vm) {
  94.             Object.keys(obj).forEach(function (key) {
  95.                 defineReactive(vm, key, obj[key]);
  96.             });
  97.         }
  98.  
  99.     </script>
  100.  
  101. </body>
  102. </html>

以上，任务二也就完成了，text属性值会和输入框的内容同步变化。

七、 订阅/发布模式（subscribe & publish）

　　text属性变化了，set方法触发了，但是文本节点的内容没有变化。 如何才能让同样绑定到text的文本节点也同步变化呢？ 这里又有一个知识点： 订阅发布模式。

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

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

  1.  // 一个发布者 publisher，功能就是负责发布消息 - publish
  2.         var pub = {
  3.             publish: function () {
  4.                 dep.notify();
  5.             }
  6.         }
  7.  
  8.         // 多个订阅者 subscribers， 在发布者发布消息之后执行函数
  9.         var sub1 = {
  10.             update: function () {
  11.                 console.log();
  12.             }
  13.         }
  14.         var sub2 = {
  15.             update: function () {
  16.                 console.log();
  17.             }
  18.         }
  19.         var sub3 = {
  20.             update: function () {
  21.                 console.log();
  22.             }
  23.         }
  24.  
  25.         // 一个主题对象
  26.         function Dep() {
  27.             this.subs = [sub1, sub2, sub3];
  28.         }
  29.         Dep.prototype.notify = function () {
  30.             this.subs.forEach(function (sub) {
  31.                 sub.update();
  32.             });
  33.         }
  34.  
  35.         // 发布者发布消息， 主题对象执行notify方法，进而触发订阅者执行Update方法
  36.         var dep = new Dep();
  37.         pub.publish();

不难看出，这里的思路还是很简单的： 发布者负责发布消息、 订阅者负责接收接收消息，而最重要的是主题对象，他需要记录所有的订阅这特消息的人，然后负责吧发布的消息通知给哪些订阅了消息的人。

所以，当set方法触发后做的第二件事情就是作为发布者发出通知： “我是属性text，我变了”。 文本节点作为订阅者，在接收到消息之后执行相应的更新动作。

八、 双向绑定的实现

　　回顾一下，每当new一个Vue，主要做了两件事情：第一是监听数据：observe(data)，第二是编译HTML：nodeToFragment(id)

　　在监听数据的过程中，会为data中的每一个属性生成一个主题对象dep。

　　在编译HTML的过程中，会为每一个与数据绑定相关的节点生成一个订阅者 watcher，watcher会将自己添加到相应属性的dep中。

　　我们已经实现了： 修改输入框内容 => 在事件回调函数中修改属性值 => 触发属性的set方法。

　　接下来我们要实现的是： 发出通知 dep.notify() => 触发订阅者update方法 => 更新视图。

　　这里的关键逻辑是： 如何将watcher添加到关联属性的dep中。

  1.         function compile(node, vm) {
  2.             var reg = /\{\{(.*)\}\}/;
  3.  
  4.             // 节点类型为元素
  5.             if (node.nodeType === ) {
  6.                 var attr = node.attributes;
  7.                 // 解析属性
  8.                 for (var i = ; i < attr.length; i++) {
  9.                     if (attr[i].nodeName == 'v-model') {
  10.                         var name = attr[i].nodeValue; // 获取v-model绑定的属性名
  11.                         node.addEventListener('input', function (e) {
  12.                             // 给相应的data属性赋值，进而触发属性的set方法
  13.                             vm[name] = e.target.value;
  14.                         })
  15.  
  16.                         node.value = vm[name]; // 将data的值赋值给该node
  17.                         node.removeAttribute('v-model');
  18.                     }
  19.                 }
  20.             }
  21.  
  22.             // 节点类型为text
  23.             if (node.nodeType === ) {
  24.                 if (reg.test(node.nodeValue)) {
  25.                     var name = RegExp.$; // 获取匹配到的字符串
  26.                     name = name.trim();
  27.                     // node.nodeValue = vm[name]; // 将data的值赋值给该node
  28.  
  29.                     new Watcher(vm, node, name);
  30.                 }
  31.             }
  32.         }

在编译HTML的过程中，为每个和data关联的节点生成一个Watcher。那么Watcher函数中发生了什么呢？

  1.     function Watcher(vm, node, name) {
  2.             Dep.target = this;
  3.             this.name = name;
  4.             this.node = node;
  5.             this.vm = vm;
  6.             this.update();
  7.             Dep.target = null;
  8.         }
  9.  
  10.         Watcher.prototype = {
  11.             update: function () {
  12.                 this.get();
  13.                 this.node.nodeValue = this.value;
  14.             },
  15.  
  16.             // 获取data中的属性值
  17.             get: function () {
  18.                 this.value = this.vm[this.name]; // 触发相应属性的get
  19.             }
  20.         }

首先，将自己赋值给了一个全局变量 Dep.target;

其次，执行了update方法，进而执行了 get 方法，get方法读取了vm的访问器属性， 从而触发了访问器属性的get方法，get方法将该watcher添加到对应访问器属性的dep中；

再次，获取顺序性的值， 然后更新视图。

最后将Dep.target设置为空。 因为他是全局变量，也是watcher和dep关联的唯一桥梁，任何时候，都必须保证Dep.target只有一个值。

最终如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>forvue</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <input type="text" v-model="text"> <br>
  10.         {{ text }} <br>
  11.         {{ text }}
  12.     </div>
  13.  
  14.     <script>
  15.         function observe(obj, vm) {
  16.             Object.keys(obj).forEach(function (key) {
  17.                 defineReactive(vm, key, obj[key]);
  18.             });
  19.         }
  20.  
  21.         function defineReactive(obj, key, val) {
  22.  
  23.             var dep = new Dep();
  24.  
  25.             // 响应式的数据绑定
  26.             Object.defineProperty(obj, key, {
  27.                 get: function () {
  28.                     // 添加订阅者watcher到主题对象Dep
  29.                     if (Dep.target) {
  30.                         dep.addSub(Dep.target);
  31.                     }
  32.                     return val;
  33.                 },
  34.                 set: function (newVal) {
  35.                     if (newVal === val) {
  36.                         return;
  37.                     } else {
  38.                         val = newVal;
  39.                         // 作为发布者发出通知
  40.                         dep.notify()
  41.                     }
  42.                 }
  43.             });
  44.         }
  45.  
  46.         function nodeToFragment(node, vm) {
  47.             var flag = document.createDocumentFragment();
  48.             var child;
  49.  
  50.             while (child = node.firstChild) {
  51.                 compile(child, vm);
  52.                 flag.appendChild(child); // 将子节点劫持到文档片段中
  53.             }
  54.  
  55.             return flag;
  56.         }
  57.  
  58.         function compile(node, vm) {
  59.             var reg = /\{\{(.*)\}\}/;
  60.  
  61.             // 节点类型为元素
  62.             if (node.nodeType === ) {
  63.                 var attr = node.attributes;
  64.                 // 解析属性
  65.                 for (var i = ; i < attr.length; i++) {
  66.                     if (attr[i].nodeName == 'v-model') {
  67.                         var name = attr[i].nodeValue; // 获取v-model绑定的属性名
  68.                         node.addEventListener('input', function (e) {
  69.                             // 给相应的data属性赋值，进而触发属性的set方法
  70.                             vm[name] = e.target.value;
  71.                         })
  72.                         node.value = vm[name]; // 将data的值赋值给该node
  73.                         node.removeAttribute('v-model');
  74.                     }
  75.                 }
  76.             }
  77.  
  78.             // 节点类型为text
  79.             if (node.nodeType === ) {
  80.                 if (reg.test(node.nodeValue)) {
  81.                     var name = RegExp.$; // 获取匹配到的字符串
  82.                     name = name.trim();
  83.                     // node.nodeValue = vm[name]; // 将data的值赋值给该node
  84.  
  85.                     new Watcher(vm, node, name);
  86.                 }
  87.             }
  88.         }
  89.  
  90.         function Watcher(vm, node, name) {
  91.             Dep.target = this;
  92.             this.name = name;
  93.             this.node = node;
  94.             this.vm = vm;
  95.             this.update();
  96.             Dep.target = null;
  97.         }
  98.  
  99.         Watcher.prototype = {
  100.             update: function () {
  101.                 this.get();
  102.                 this.node.nodeValue = this.value;
  103.             },
  104.  
  105.             // 获取data中的属性值
  106.             get: function () {
  107.                 this.value = this.vm[this.name]; // 触发相应属性的get
  108.             }
  109.         }
  110.  
  111.         function Dep () {
  112.             this.subs = [];
  113.         }
  114.  
  115.         Dep.prototype = {
  116.             addSub: function (sub) {
  117.                 this.subs.push(sub);
  118.             },
  119.  
  120.             notify: function () {
  121.                 this.subs.forEach(function (sub) {
  122.                     sub.update();
  123.                 });
  124.             }
  125.         }
  126.  
  127.         function Vue(options) {
  128.             this.data = options.data;
  129.             var data = this.data;
  130.  
  131.             observe(data, this);
  132.  
  133.             var id = options.el;
  134.             var dom = nodeToFragment(document.getElementById(id), this);
  135.             // 编译完成后，将dom返回到app中。
  136.             document.getElementById(id).appendChild(dom);
  137.         }
  138.  
  139.         var vm  = new Vue({
  140.             el: 'app',
  141.             data: {
  142.                 text: 'hello world'
  143.             }
  144.         });
  145.  
  146.     </script>
  147. </body>
  148. </html>

　　

参考文章：

vue中的双向数据绑定详解的更多相关文章

  1. Vue中的双向数据绑定简单介绍

    1. 文本框绑定v-module <div id="app"> <input type="text" v-model="msg&qu ...

  2. js中或者vue中 Object.assign()用法详解

    Object.assign()是浅拷贝. 合并对象 var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object. ...

  3. vue中事件修饰符详解(stop, prevent, self, once, capture, passive)

    ==.stop== 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件 ==.prevent== 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提 ...

  4. vue-cli 中的 webpack 配置详解

    本篇文章主要介绍了 vue-cli 2.8.2 中的 webpack 配置详解, 做个学习笔记 版本 vue-cli 2.8.1 (终端通过 vue -V 可查看) vue 2.2.2 webpack ...

  5. npm安装vue详细教程（图片详解）

    npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...

  6. Vue插件编写、用法详解（附demo）

    Vue插件编写.用法详解(附demo) 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共享使用某个变量,或者在某个方法之前执行一 ...

  7. C#中string.format用法详解

    C#中string.format用法详解 本文实例总结了C#中string.format用法.分享给大家供大家参考.具体分析如下: String.Format 方法的几种定义: String.Form ...

  8. c++中vector的用法详解

    c++中vector的用法详解 vector(向量): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间 ...

  9. 011-Scala中的apply实战详解

    011-Scala中的apply实战详解 object中的apply方法 class中的apply方法 使用方法 apply方法可以应用在类或者Object对象中 class类 必须要创建实例化的类对 ...

随机推荐

  1. JS+MySQL获取 京东 省市区 地区

    采集了一下JD的省市区地区 (非常简单,只是做个记录) 1.建表:account_area   2.进入页面: https://reg.jd.com/reg/company 在浏览器(Firefox) ...

  2. （深搜）Oil Deposits -- hdu -- 1241

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1241 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  3. HDU1233 还是畅通工程 2017-04-12 19:49 64人阅读 评论(0) 收藏

    还是畅通工程 Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...

  4. HDU2544 最短路 2017-04-12 18:51 31人阅读 评论(0) 收藏

    最短路 Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submissio ...

  5. 转：Entity FrameWork利用Database.SqlQuery<T>执行存储过程并返回参数

    public IEnumerable<Statistic> GetStatistics(IEnumerable<Guid> itemIds) { var ctx = new D ...

  6. TSQL--集合处理

    UNION ALL 返回两个结果集中所有的行,返回结果集中会存在重复行 UNION 返回两个结果集中去重的行,返回结果集中无重复行 INTERSECT 返回两个结果集都有的行,返回结果集中无重复行 E ...

  7. （一）ElasticSearch-入门

    目录:一．前言二．安装三．索引四．搜索五．聚合六．分布式的特性 一．前言Elasticsearch是一个基于Apache Lucene(TM)的开源搜索引擎.无论在开源还是专有领域,Lucene可以被 ...

  8. wpf（怎么跨线程访问wpf控件）

    在编写代码时,我们经常会碰到一些子线程中处理完的信息,需要通知另一个线程(我这边处理完了,该你了). 但是当我们通知WPF的UI线程时需要用到Dispatcher. 首先我们需要想好在UI控件上需要显 ...

  9. double? int？

    C# 值类型加上?表示可空类型(Nullable 结构),就是一种特殊的值类型,它的值可以为null 例: int? float? stirng? double?

  10. WPF文字间距

    代码: <ItemsControl ItemsSource="{Binding Info}" FontFamily="微软雅黑" FontSize=&qu ...