この記事では、ディレクティブの簡単な実装を紹介し、主にその実装アイデアとコード設計を学習します。必要な友人はそれを参照してください。
2018 年の最初の計画は、いくつかの情報を参考にして、vue のソース コードを学習することにしました。最初からコミットしてください、これは持久戦になりそうです！この記事では、ディレクティブの簡単な実装を紹介し、主にその実装アイデアとコード設計を学習します (ディレクティブとフィルターは、設計パターンの「開閉原則」を拡張して準拠するのに非常に便利です)。
APIを考える
<p 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>
</p>
var app = Seed.create({
id: 'app',
scope: {
msg: 'hello',
content: 'world',
error: true,
toggle: function() {
app.scope.error = !app.scope.error;
}
}
});実装関数はシンプルであるべきです - スコープ内のデータをアプリにバインドします。
コアロジック設計令 命令形式
SD-text = "msg | Capitalize" 例:
SD は統一されたプレフィックスロゴです 名前
capitalize はフィルター名です
ここで、 | の後にフィルターが続き、複数のフィルターを追加できます。
の赤字はパラメータです。sd-class-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);
}
};この3つのファイルのみ、ディレクティブとフィルターは拡張が簡単な設定ファイルです。 実装の一般的な考え方は次のとおりです: 1. Seed インスタンスが作成されると、el コンテナ内のノードの命令が順番に解析されます
2.次の構造を持つ命令オブジェクトにカプセル化されます:
| Attribute | Description | type |
|---|---|---|
| attr | 属性名に対応するsd-text | String |
| key | などスコープオブジェクト | String |
| フィルター | フィルター名リスト | 配列 |
| 定義 | テキストに対応する関数などのこのディレクティブの定義 | 関数 |
| 引数 | attrから解析されたパラメータ(1つのパラメータのみがサポートされます) | 文字列 |
| 更新 | ディレクティブの更新 typeof def === 'function' ? def : def.updatetypeof def === 'function' ? def : def.update | Function |
| bind | 如果directive中定义了bind方法，则在bindDirective | bind |
| 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でディレクティブ関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
