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 相关文章推荐
javascript定时保存表单数据的代码
Mar 17 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
js实现简单的计算器功能
Jan 16 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
ES6顶层对象、global对象实例分析
Jun 14 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
php的debug相关函数用法示例
2016/07/11 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python实现多张图片拼接成大图
2019/01/15 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Python实现微信小程序支付功能
2019/07/25 Python
django下创建多个app并设置urls方法
2020/08/02 Python
python飞机大战游戏实例讲解
2020/12/04 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
绿色环保演讲稿
2014/05/10 职场文书
五年级学生评语大全
2014/12/26 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
装修安全责任协议书
2016/03/22 职场文书
golang 实现并发求和
2021/05/08 Golang