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-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.將指令解析結果封裝為指令對象，結構為：
| 屬性 | 說明 | 類型 |
|---|---|---|
| attr | 原始屬性，如 sd-text | String |
| key | 對應scope對象中的屬性名稱 | String |
| filters | 過濾器名稱列表 | Array |
| definition | 該指令的定義，如text對應的函數 | Function |
| argument | 從attr中解析出來的參數（只支持一個參數） | String |
| 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的簡單實現，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
