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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
JavaScript创建对象的常用方式总结
Aug 10 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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 表单验证实现代码
2009/03/10 PHP
php 静态变量的初始化
2009/11/15 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
php的4种常见运行方式
2015/03/20 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
Python实现的数据结构与算法之链表详解
2015/04/22 Python
Python中操作符重载用法分析
2016/04/29 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
python 调整图片亮度的示例
2020/12/03 Python
CSS3效果:自定义“W”形运行轨迹实例
2017/03/29 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
线程同步的方法
2016/11/23 面试题
教你怎样写好自我评价
2013/10/05 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库