So implementieren Sie eine Direktivenfunktion in Vue

Dieser Artikel stellt die einfache Implementierung der Direktive vor und lernt hauptsächlich deren Implementierungsideen und Code-Design kennen. Freunde, die sie benötigen, können darauf zurückgreifen.

Der erste Plan im Jahr 2018 besteht darin, den Vue-Quellcode nach Rücksprache zu lernen Einige Informationen, ich habe beschlossen, mit dem ersten Commit zu beginnen, das wird ein langwieriger Kampf! In diesem Artikel wird die einfache Implementierung einer Direktive vorgestellt und hauptsächlich deren Implementierungsideen und Code-Design erlernt (Direktive und Filter lassen sich sehr bequem erweitern und entsprechen dem „Öffnungs- und Schließprinzip“ im Entwurfsmuster).

Konzipieren Sie die 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: &#39;app&#39;,
 scope: {
  msg: &#39;hello&#39;,
  content: &#39;world&#39;,
  error: true,
  toggle: function() {
   app.scope.error = !app.scope.error;
  }
 }
});

Die Implementierungsfunktion sollte einfach sein – binden Sie die Daten im Bereich an die App.

Kernlogikdesign

Anweisungsformat

Mit SD- text="msg | Capitalize" ist ein Beispiel:

1. sd ist eine einheitliche Präfixkennung

2. text ist der Befehlsname

3. Großschreibung ist der Filtername

wobei | auf Filter folgt und mehrere Filter hinzugefügt werden können. Das Rot in sd-class-red ist ein Parameter.

Einführung in die Codestruktur

main.js-Eintragsdatei

// 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);
 }
};

Nur ​​diese drei Dateien, einschließlich Anweisungen und Filter. ist eine Konfigurationsdatei und leicht erweiterbar.

Die allgemeine Idee der Implementierung ist wie folgt:

1. Wenn die Seed-Instanz erstellt wird, werden die Anweisungen der Knoten im EL-Container nacheinander analysiert

2. Das Ergebnis der Befehlsanalyse wird als Befehlsobjekt gekapselt, die Struktur ist:

FunctionbindWenn die bind-Methode in der Direktive definiert ist, wird

Attribut	Beschreibung	Typ
attr	Originalattribute wie sd-text	String
Schlüssel	entsprechen dem Attributnamen im Bereichsobjekt	String
Filter	Namensliste filtern	Array
Definition	Die Definition dieser Anweisung, z. B. die dem Text entsprechende Funktion	Funktion
Argument	aus in attr analysierten Parametern (unterstützt nur einen Parameter)	String
update	wird aufgerufen, wenn die Direktive typeof def === 'function' ? def : def.update
	bindDirectiveFunction	aufgerufen in
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包装一层作为事件的监听函数，同时还实现事件代理功能，设计的比较巧妙！

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JavaScript中如何实现读取和写入cookie

在微信小程序中如何实现多文件下载

在JS中详细讲解Object对象

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Direktivenfunktion in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!