实现一个简单的 Vue #9

Bowen7 · 2019-08-04T10:19:21Z

这周参考了一些博文，自己写了一个简单的 vue，网上这类实现很多，我的实现也没什么新奇，权当一个自我练习吧

具体实现

首先，得先有一个 Vue 类，当然，我写的一个很粗糙的 Vue 类，所以我把它叫做 BabyVue：

function BabyVue(options) {
  const { data, root, template, methods } = options;
  this.data = data;
  this.root = root;
  this.template = template;
  this.methods = methods;
  this.observe();
  this.resolveTemplate();
}

BabtVue 构造函数接受一个 options，options 中包含 data，root（即 html 中指定的根结点），template 模版，methods 四个 option，我们把这些 option 挂载到 this 方法上，以便后续的函数能轻松地拿到他们。然后执行 observe 和 resolveTemplate 方法

observe 方法：

BabyVue.prototype.observe = function() {
  Object.keys(this.data).forEach(key =&gt; {
    let val = this.data[key];
    const observer = new Observer();
    Object.defineProperty(this.data, key, {
      get: () =&gt; {
        if (Observer.target) {
          observer.subscribe(Observer.target);
        }
        return val;
      },
      set: newValue =&gt; {
        if (val === newValue) {
          return;
        }
        val = newValue;
        observer.publish(newValue);
      }
    });
  });
};

observe 方法中先对 this.data 中的数据进行遍历，这里没有考虑更深层的结构，只对第一层数据进行遍历，利用闭包缓存它的当前值 val 和一个观察者 observer，并用Object.defineProperty方法设置它的 get 和 set 属性，在获取值的时候判断 Observer.target 是否存在，若存在，则将 Observer.target 加入订阅者（后面再详述其作用）,最后返回 val；设置值的时候，将新值与 val 对比，若不同，则更新 val 值，并通知订阅者更新

下面是 Observer 的代码，实现了一个简单的观察者模式：

function Observer() {
  this.subscribers = [];
}
Observer.prototype.subscribe = function(subscriber) {
  !~this.subscribers.indexOf(subscriber) &amp;&amp; this.subscribers.push(subscriber);
};
Observer.prototype.publish = function(newVal) {
  this.subscribers.forEach(subscriber =&gt; {
    const ele = document.querySelector(`[${subscriber}]`);
    ele &amp;&amp; (ele.innerHTML = newVal);
  });
};

订阅者用其特殊属性进行标识，在更新时，先通过属性选择器拿到目标 dom 再更新其值

下面是 resolveTemplate 的代码，其主要是渲染模版、增加元素标识和挂载事件，Vue 中对模版解析使用的应当是更高级的方法，我这里只是对 template 字符串一些简单的解析

BabyVue.prototype.resolveTemplate = function() {
  const root = document.createElement(&#34;div&#34;);
  root.innerHTML = this.template;
  const children = root.children;
  const nodes = [].slice.call(children);
  let index = 0;
  const events = [];
  while (nodes.length !== 0) {
    const node = nodes.shift();
    const _index = index++;
    node.setAttribute(`v-${_index}`, &#34;&#34;);
    if (node.children.length &gt; 0) {
      nodes.push(...node.children);
    } else {
      if (/\{\{(.*)\}\}/.test(node.innerHTML)) {
        const key = node.innerHTML.replace(/\{\{(.*)\}\}/, &#34;$1&#34;);
        Observer.target = `v-${_index}`;
        node.innerHTML = this.data[key];
        Observer.target = null;
      }

      const method = node.getAttribute(&#34;v-on:click&#34;);
      if (method) {
        events.push({
          key: `v-${_index}`,
          type: &#34;click&#34;,
          method
        });
      }
    }
  }
  this.root.innerHTML = root.innerHTML;
  events.forEach(event =&gt; {
    const { key, type, method } = event;
    const ele = document.querySelector(`[${key}]`);
    ele.addEventListener(type, this.methods[method].bind(this));
  });
};

我对模版中的每一个元素增加一个特殊标示，形似v-xxx，方便根据表示标示获取真实 dom（为什么不直接保存 node？可以试试使用了createElement创建的元素再设置innerHTML，会出现一些问题）。

先根据正则匹配{}，若符合条件，获取了大括号的标识符后，先将Object.target设为元素的标识，在将元素的 innerHTML 置为 data 中的数据，要注意，在此时，我们获取了一次this.data[key]，会触发之前设置的 get 属性，在其中判断Observer.target是否存在，因为我们刚刚设置过，Observer.target当前为元素的标识，所以，它被加到订阅者中。

再获取其事件属性，我们这里只简单地获取v-on:click属性，我们将它的属性值和元素标识保存到 events 中

最后等待模版挂载在 root 元素中后，我们遍历 events 数组，挂载事件

至此，我的 BabyVue 已基本实现了

Demo

实现的是一个简单的计数器：

有兴趣的小伙伴可以复制以下代码运行查看效果：

&lt;!DOCTYPE html&gt;
&lt;html lang=&#34;en&#34;&gt;
  &lt;head&gt;
    &lt;meta charset=&#34;UTF-8&#34; /&gt;
    &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1.0&#34; /&gt;
    &lt;meta http-equiv=&#34;X-UA-Compatible&#34; content=&#34;ie=edge&#34; /&gt;
    &lt;title&gt;BabyVue&lt;/title&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;div id=&#34;root&#34;&gt;&lt;/div&gt;
    &lt;script&gt;
      function BabyVue(options) {
        const { data, root, template, methods } = options;
        this.data = data;
        this.root = root;
        this.template = template;
        this.methods = methods;
        this.observe();
        this.resolveTemplate();
      }
      BabyVue.prototype.observe = function() {
        Object.keys(this.data).forEach(key =&gt; {
          let val = this.data[key];
          const observer = new Observer();
          Object.defineProperty(this.data, key, {
            get: () =&gt; {
              if (Observer.target) {
                observer.subscribe(Observer.target);
              }
              return val;
            },
            set: newValue =&gt; {
              if (val === newValue) {
                return;
              }
              val = newValue;
              observer.publish(newValue);
            }
          });
        });
      };
      BabyVue.prototype.resolveTemplate = function() {
        const root = document.createElement(&#34;div&#34;);
        root.innerHTML = this.template;
        const children = root.children;
        const nodes = [].slice.call(children);
        let index = 0;
        const events = [];
        while (nodes.length !== 0) {
          const node = nodes.shift();
          const _index = index++;
          node.setAttribute(`v-${_index}`, &#34;&#34;);
          if (node.children.length &gt; 0) {
            nodes.push(...node.children);
          } else {
            if (/\{\{(.*)\}\}/.test(node.innerHTML)) {
              const key = node.innerHTML.replace(/\{\{(.*)\}\}/, &#34;$1&#34;);
              Observer.target = `v-${_index}`;
              node.innerHTML = this.data[key];
              Observer.target = null;
            }

            const method = node.getAttribute(&#34;v-on:click&#34;);
            if (method) {
              events.push({
                key: `v-${_index}`,
                type: &#34;click&#34;,
                method
              });
            }
          }
        }
        this.root.innerHTML = root.innerHTML;
        events.forEach(event =&gt; {
          const { key, type, method } = event;
          const ele = document.querySelector(`[${key}]`);
          ele.addEventListener(type, this.methods[method].bind(this));
        });
      };

      function Observer() {
        this.subscribers = [];
      }
      Observer.prototype.subscribe = function(subscriber) {
        !~this.subscribers.indexOf(subscriber) &amp;&amp;
          this.subscribers.push(subscriber);
      };
      Observer.prototype.publish = function(newVal) {
        this.subscribers.forEach(subscriber =&gt; {
          const ele = document.querySelector(`[${subscriber}]`);
          ele &amp;&amp; (ele.innerHTML = newVal);
        });
      };
      const root = document.getElementById(&#34;root&#34;);
      const vm = new BabyVue({
        data: {
          value: 0
        },
        root,
        template: `
        &lt;div&gt;
          &lt;p&gt;{{value}}&lt;/p&gt;
          &lt;button v-on:click=&#34;add&#34;&gt;add&lt;/button&gt;
          &lt;button v-on:click=&#34;reset&#34;&gt;reset&lt;/button&gt;
        &lt;/div&gt;`,
        methods: {
          add: function() {
            this.data.value++;
          },
          reset: function() {
            this.data.value = 0;
          }
        }
      });
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;

最后

今天是我的生日，哈哈哈，祝我生日快乐～

The text was updated successfully, but these errors were encountered:

Bowen7 added the vue label Aug 4, 2019

Bowen7 added a commit that referenced this issue Aug 4, 2019

add blog #9

c22d905

Bowen7 changed the title ~~每周一文 [7.29-8.04] 实现一个简单的Vue~~ [7.29-8.04] 实现一个简单的Vue Aug 19, 2019

Bowen7 changed the title ~~[7.29-8.04] 实现一个简单的Vue~~ 实现一个简单的Vue Oct 23, 2019

Bowen7 changed the title ~~实现一个简单的Vue~~ 9. 实现一个简单的 Vue Aug 4, 2020

github-actions bot changed the title ~~9. 实现一个简单的 Vue~~ 实现一个简单的 Vue Aug 6, 2020

Bowen7 removed the vue label Dec 28, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

实现一个简单的 Vue #9

实现一个简单的 Vue #9

Bowen7 commented Aug 4, 2019 •

edited

Loading

实现一个简单的 Vue #9

实现一个简单的 Vue #9

Comments

Bowen7 commented Aug 4, 2019 • edited Loading

具体实现

Demo

最后

Bowen7 commented Aug 4, 2019 •

edited

Loading