vue 中directive功能的简单实现


Posted in Javascript onJanuary 05, 2018

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" 为例说明:

  1. sd 为统一的前缀标识
  2. text 为指令名称
  3. 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
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的简单实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 Javascript
jQuery中wrapAll()方法用法实例
Jan 16 Javascript
angularJS 中input示例分享
Feb 09 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
正则表达式基础与常用验证表达式
Jun 16 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 #Javascript
使用vue实现grid-layout功能实例代码
Jan 05 #Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 #Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 #Javascript
Vue组件的使用教程详解
Jan 05 #Javascript
基于three.js编写的一个项目类示例代码
Jan 05 #Javascript
js中this对象用法分析
Jan 05 #Javascript
You might like
php MYSQL 数据备份类
2009/06/19 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
javascript每日必学之封装
2016/02/23 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
学习Django知识点分享
2019/09/11 Python
python自动下载图片的方法示例
2020/03/25 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
演讲稿祖国在我心中
2014/05/04 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
机关职员工作检讨书
2014/10/23 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers
alibaba seata服务端具体实现
2022/02/24 Java/Android