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 相关文章推荐
JS实现图片预加载无需等待
Dec 21 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
JavaScript实现随机五位数验证码
Sep 27 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
PHPlet在Windows下的安装
2006/10/09 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
列举Python中吸引人的一些特性
2015/04/09 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
python的concat等多种用法详解
2018/11/28 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
阿根廷旅游网站:almundo阿根廷
2018/02/12 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
质检部部长职责
2013/12/16 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
初中科学教学反思
2014/01/21 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
《桥》教学反思
2014/04/09 职场文书
《风筝》教学反思
2014/04/10 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang