原生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的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
AngularJS的脏检查深入分析
Apr 22 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php常用日期时间函数实例小结
2019/07/04 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python如何求100以内的素数
2020/05/27 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
萌新HTML5 入门指南(二)
2020/11/09 HTML / CSS
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
职务聘任书范文
2014/03/29 职场文书
劳资协议书范本
2014/04/23 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
安全教育主题班会总结
2015/08/14 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Python自动化爬取天眼查数据的实现
2021/06/15 Python
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript