频道导航

vue 中directive功能的简单实现

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了vue 中directive功能的简单实现，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

构思API

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 入口文件

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

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

实现的大致思路如下：

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

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

属性@H_403_54@ 属性，如属性名称名称列表函数支持一个参数）调用方法，则在调用

3.想办法执行指令的update方法即可，该插件使用了 Object.defineProperty 来定义scope中的每个属性，在其setter中触发指令的update方法。

核心代码

`[${prefix}-${name}]`).join(','); const Seed = function(opts) { const self = this,root = this.el = document.getElementById(opts.id),// 筛选出el下所能支持的directive的nodes列表 els = this.el.querySelectorAll(selector),bindings = {}; this.scope = {}; // 解析节点 [].forEach.call(els,processNode); // 解析根节点 processNode(root); // 给scope赋值，触发setter方法，此时会调用与其相对应的directive的update方法 Object.keys(bindings).forEach((key) => { this.scope[key] = opts.scope[key]; }); function processNode(el) { cloneAttributes(el.attributes).forEach((attr) => { const directive = parseDirective(attr); if (directive) { bindDirective(self,el,bindings,directive); } }); } };

可以看到核心方法 processNode 主要做了两件事一个是 parseDirective ，另一个是 bindDirective 。

先来看看 parseDirective 方法：

filterName.trim()); return def ? { attr: attr,key: key,filters: filters,argument: arg,definition: Directives[dirname],update: typeof def === 'function' ? def : def.update } : null; }

以 sd-on-click="toggle | .button" 为例来说明，其中attr对象的name为 sd-on-click ，value为 toggle | .button ，最终解析结果为：

紧接着调用 bindDirective 方法

{ // 如果有过滤器则先执行过滤器 if (typeof value !== 'undefined' && directive.filters) { value = applyFilters(value,directive); } // 调用update方法 directive.update(directive.el,value,directive.argument,directive); }); } }); } /** * 调用filters依次处理value * @param {任意类型} value 数据值 * @param {Object} directive 解析出来的指令对象 */ function applyFilters(value,directive) { if (directive.definition.customFilter) { return directive.definition.customFilter(value,directive.filters); } else { directive.filters.forEach((name) => { if (Filters[name]) { value = Filters[name](value); } }); return value; } }

其中的bindings存放了数据和指令的关系，该对象中的key为opts.scope中的属性，value为Object，如下：

数据与directive建立好关系之后， bindAccessors 中为seed的scope对象的属性重新定义了getter和setter，其中setter会调用指令update方法，到此就已经完事具备了。

Seed构造函数在实例化的最后会迭代bindings中的key，然后从opts.scope找到对应的value，赋值给了scope对象，此时setter中的update就触发执行了。

下面再看一下 sd-on 指令的定义：

e.target.matches(selector)); if (match) { handler.apply(this,arguments); } } } } }

发现它有customFilter，其实在 applyFilters 中就是针对该指令做的一个单独的判断，其中的selectors就是[".button"]，最终返回一个匿名函数（事件监听函数），该匿名函数当做value传递给update方法，被其handler接收，update方法处理的是事件的绑定。这里其实实现的是事件的代理功能，customFilter中将handler包装一层作为事件的监听函数，同时还实现事件代理功能，设计的比较巧妙！