vue 中directive功能的简单实现

2018年首个计划是学习vue源码，查阅了一番资料之后，决定从第一个commit开始看起，这将是一场持久战！本篇介绍directive的简单实现，主要学习其实现的思路及代码的设计（directive和filter扩展起来非常方便，符合设计模式中的 开闭原则 ）。

构思API

<div id="app" sd-on-click="toggle | .button"> <p sd-text="msg | capitalize"></p> <p sd-class-red="error" sd-text="content"></p> <button class="button">Toggle class</button></div>var app = Seed.create({ id: 'app', scope: {  msg: 'hello',  content: 'world',  error: true,  toggle: function() {   app.scope.error = !app.scope.error;  } }});

实现功能够简单吧--将scope中的数据绑定到app中。

核心逻辑设计

指令格式

以 sd-text="msg | capitalize" 为例说明：

sd 为统一的前缀标识 text 为指令名称 capitalize 为过滤器名称

其中 | 后面为过滤器，可以添加多个。 sd-class-red 中的red为参数。

代码结构介绍

main.js 入口文件

// Seed构造函数const Seed = function(opts) {};// 对外暴露的APImodule.exports = { create: function(opts) {  return new Seed(opts); }};directives.jsmodule.exports = { text: function(el, value) {  el.textContent = value || ''; }};filters.jsmodule.exports = { capitalize: function(value) {  value = value.toString();  return value.charAt(0).toUpperCase() + value.slice(1); }};

就这三个文件，其中directives和filters都是配置文件，很易于扩展。

实现的大致思路如下：

1.在Seed实例创建的时候会依次解析el容器中node节点的指令

2.将指令解析结果封装为指令对象，结构为：