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包装一层作为事件的监听函数，同时还实现事件代理功能，设计的比较巧妙！
总结
以上所述是小编给大家介绍的vue 中directive的简单实现。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
