原生js实现简单的链式操作


Posted in Javascript onJuly 04, 2017

在jQuery中,一个jq对象能一直连续调用各种方法,因为jQuery把这些方法挂载他自定义的一个对象中,但是使用原生的js获取的DOM对象,只能使用一次addEventLisenter方法添加事件,如果要接着添加事件,还得再调用addEventLisenter。

var area = document.querySelector('.area');
area.addEventListener('mouseenter', function(){
 console.log( 'mouse enter' );
});
area.addEventListener('click', function(){
 console.log( 'click' );
});

可是如果我想在area绑定mouseenter事件后,接着绑定click事件呢。我们也可以参考下jQuery的实现思路,但是没jQuery这么完善。

;(function(){
 window.G = function(selector){
 return new _G(selector);
 }
 function _G(selector){
 this.elements = document.querySelector(selector);
    return this;
 }
 _G.prototype = {
 constructor : _G,
 method : function(name, fn){
  if(this.elements){
  this.elements.addEventListener(name, fn, false);
  }
  return this;
 }
 }
})();

这样我们就能实现一个简单的链式调用了,给.area同时绑定两个事件:

G('.area').method('mouseenter', function(){
  console.log( 'mouse enter' );
}).method('click', function(){
  console.log( 'click' );
})

实现原理相信大家看到代码也非常的清楚:

  • 输出一下G('.area'),他返回的就是一个_G的实例对象;
  • 在_G的内部,把DOM对象存储在elements上,然后prototype上实现了method方法,就是给elements添加对应的事件,每次调用后,都把this返回,供下次使用;
  • G(‘.area')就能使用使用method方法来添加事件了,同时每次method都会把this返回,这样就能连续添加事件

上面的代码我们只是实现了如何为DOM对象连续添加事件,当然我们还可以在_G.prototype中添加别的方法,不过别忘记了return this

_G.prototype = {
 constructor : _G,
 method : function(name, fn){
 if(this.elements){
  this.elements.addEventListener(name, fn, false);
 }
 return this;
 },
 show : function(){
 this.elements.style.display='';
 return this;
 },
 hide : function(){
 this.elements.style.display='none';
 return this;
 }
}

这样G()就能使用show()和hide()了:

// 隐藏
G('.area').hide();

// 显示并且绑定click事件
G('.area').show().method('click', function(){
 console.log( Date.now() );
})

注意:G('.area')不是原生的DOM对象,不能直接操作DOM对象上的属性与方法,比如我想隐藏.area:

G('.area').style.display='none'; // 错误

是不能这么操作的。DOM对象存储在elements中,如果想直接在DOM对象上操作,可以:

G('.area').elements.style.display='none'; // 正确

总结一下,这里我们也只是用原生js简单的实现了下链式操作,更复杂的功能,比如对象缓存,异常处理等等,都需要后续再完善处理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
JavaScript反射与依赖注入实例详解
May 29 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
vue 中的 render 函数作用详解
Feb 28 Javascript
详解用vue编写弹出框组件
Jul 04 #Javascript
使用vue构建一个上传图片表单
Jul 04 #Javascript
vue-resource 拦截器(interceptor)的使用详解
Jul 04 #Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 #Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 #Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 #Javascript
详解Angular.js中$http拦截器的介绍及使用
Jul 04 #Javascript
You might like
深入解读php中关于抽象(abstract)类和抽象方法的问题分析
2014/01/03 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
php适配器模式简单应用示例
2019/10/23 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
JS实现自动变换的菜单效果代码
2015/09/09 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
2016/12/25 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
2018/01/23 jQuery
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
Python中subprocess的简单使用示例
2015/07/28 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python3 实现调用串口功能
2019/12/26 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
印度民族服装购物网站:BIBA
2019/08/05 全球购物
工程专业毕业生自荐信范文
2013/12/25 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
班组建设经验交流材料
2014/05/12 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
圆明园纪录片观后感
2015/06/03 职场文书