vue 中directive功能的简单实现

vue 中directive功能的简单实现

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

构思API

Toggle class

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) {

};

// 对外暴露的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.将指令解析结果封装为指令对象，结构为：

属性

说明

类型

attr

原始属性，如 sd-text

String

key

对应scope对象中的属性名称

String

filters

过滤器名称列表

Array

definition

该指令的定义，如text对应的函数

Function

argument

从attr中解析出来的参数（只支持一个参数）

String

http:// update

更新directive时调用 typeof def === 'function' ? def : def.update

Function

bind

如果directive中定义了bind方法，则在 bindDirective 中会调用

Function

el

存储当前element元素

Element

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

核心代码

const prefix = 'sd';

const Directives = require('./directives');

const Filters = require('./filters');

// 结果为[sd-text], [sd-class], [sd-on]的字符串

const selector = Object.keys(Directives).map((name) => `[${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 方法：

function parseDirective(attr) {

if (attr.name.indexOf(prefix) == -1) return;

// 解析属性名称获取directive

const noprefix = attr.name.slice(prefix.length + 1),

argIndex = noprefix.indexOf('-'),

dirname = argIndex === -1 ? noprefix : noprefix.slice(0, argIndex),

arg = argIndex === -1 ? null : noprefix.slice(argIndex + 1),

def = Directives[dirname]

// 解析属性值获取filters

const exp = attr.value,

pipeIndex = exp.indexOf('|'),

key = (pipeIndex === -1 ? exp : exp.slice(0, pipeIndex)).trim(),

filters = pipeIndex === -1 ? null : exp.slice(pipeIndex + 1).split('|').map((filterName) => 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 ，最终解析结果为：

{

"attr": attr,

"key": "toggle",

"filters": [".button"],

"argument": "click",

"definition": {"on": {}},

"update": function(){}

}

紧接着调用 bindDirective 方法

/**

* 数据绑定

* @param {Seed} seed Seed实例对象

* @param {Element} el 当前node节点

* @param {Object} bindings 数据绑定存储对象

* @param {Object} directive 指令解析结果

*/

function bindDirective(seed, el, bindings, directive) {

// 移除指令属性

el.removeAttribute(directive.attr.name);

// 数据属性

const key = directive.key;

let binding = bindings[key];

if (!binding) {

bindings[key] = binding = {

value: undefined,

directives: [] // 与该数据相关的指令

};

}

directive.el = el;

binding.directives.push(directive);

if (!seed.scope.hasOwnProperty(key)) {

bindAccessors(seed, key, binding);

}

}

/**

* 重写scope西乡属性的getter和setter

* @param {Seed} seed Seed实例

* @param {String} key 对象属性即opts.scope中的属性

* @param {Object} binding 数据绑定关系对象

*/

function bindAccessors(seed, key, binding) {

Object.defineProperty(seed.scope, key, {

get: function() {

return binding.value;

},

set: function(value) {

binding.value = value;

// 触发directive

binding.directives.forEach((directive) => {

// 如果有过滤器则先执行过滤器

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，如下：

{

"msg": {

"value": undefined,

"directives": [] // 上面介绍的directive对象

}

}

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

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

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

{

on: {

update: function(el, handler, event, directive) {

if (!directive.handlers) {

directive.handlers = {};

}

const handlers = directive.handlers;

if (handlers[event]) {

el.removeEventListener(event, handlers[event]);

}

if (handler) {

handler = handler.bind(el);

el.addEventListener(event, handler);

handlers[event] = handler;

}

},

customFilter: function(handler, selectors) {

return function(e) {

const match = selectors.every((selector) => e.target.matches(selector));

if (match) {

handler.apply(this, arguments);

}

}

}

}

}

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

总结

以上所述是给大家介绍的vue 中directive的简单实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。