JavaScript对象链式操作代码(jquery)


Posted in Javascript onJuly 04, 2010

虽然现在慢慢减少了对jQuery的使用(项目上还是用,效率高点。平时基本不用了),希望从而减少对jQuery的依赖度。
但是这链式操作的方式实在吸引人(貌似现在不少新库都采用了链式操作)。
新手无畏嘛,所以写了以下代码。主要是避免以后又忘了,呵呵。

window.k = function() { 
return new k.fn.init(arguments); 
} 
k.fn = k.prototype = { 
init:function() { 
this.length = 0; 
//var args = Array.prototype.slice.call(arguments,0); 
Array.prototype.push.apply(this,arguments[0]); 
return this; 
}, 
show:function() { 
console.log(Array.prototype.slice.call(this,0).join("$")); 
return this; 
}, 
hide:function() { 
console.log(this); 
return this; 
} 
} 
k.fn.init.prototype = k.fn; 
console.log(k("0",1,2,3,4,5).show().hide());

这只是进行了链式操作。但是在firbug下可以看到jQuery对象返回的是数组/类数组。要实现这个却不知道怎么办好。。
总不能让k.fn.prototype = new Array()吧。真要看jQuery源代码还真是有点累。。
下面是针对网友的一些回复
其实链式操作很简单,就是每次返回操作对象本身,这样就可以持续的调用该对象本身定义的所有方法了。
最简单的例子:
var o = function() { 
/** 
do something 
*/ 
return this; 
} 
o.prototype = { 
action1: function() { 
/** 
do something 
*/ 
return this; 
}, 
action2: function() { 
/** 
do something 
*/ 
return this; 
} 
}

你可以这样调用:
new o() //
.action1() //
.action2(); //每一步操作返回的都是实例化的o对象
它其实等同于这样:
var a = new o();//如果没有返回this,那么就不能在这里继续调用了。因为返回的是undefined。
a.action1(); //这个时候就只能对a(实例化的o对象的引用)来操作。
a.action2();
如果你用过jQuery就应该发现了。jQuery并不需要你使用new来实例化一个对象,在使用的时候显得更方便。
所以我们定义另一个对象来封装上面提到的o对象:
var k = function() {
return new o();
}
这样我们就可以这样调用了:
k().action1().action2();
我为你推荐 一个叫 "函数化"的 构造JS的方法。
//加粗表示强调 
//这个方法是 《javascript语言精粹》第52页 5.4函数化 上的。 
var constructor = function (spec,my){ 
var that,其他的私有实例变量; 
my = my || {}; 
把共享的变量和函数添加到my中 
that = 一个新对象 
添加给that 的特权方法 
return that; 
}
Javascript 相关文章推荐
jquery实现增加删除行的方法
Feb 03 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
node thread.sleep实现示例
Jun 20 Javascript
详解JavaScript中的坐标和距离
May 27 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 #Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 #Javascript
location.href语句与火狐不兼容的问题
Jul 04 #Javascript
JQuery从头学起第二讲
Jul 04 #Javascript
JQuery从头学起第一讲
Jul 04 #Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 #Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 #Javascript
You might like
phpQuery占用内存过多的处理方法
2013/11/13 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
python使用matplotlib绘制热图
2018/11/07 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
英国IT硬件供应商,定制游戏PC:Mesh Computers
2019/03/28 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
高一学生期末评语
2014/04/25 职场文书
预防煤气中毒方案
2014/06/16 职场文书
公司租车协议书
2015/01/29 职场文书
工商局调档介绍信
2015/10/22 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle