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 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
js实现微博发布小功能
Jan 12 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
AngularJS创建一个上传照片的指令实例代码
Feb 24 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 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
php fckeditor 调用的函数
2009/06/21 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
JavaScript类库D
2010/10/24 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
2019/01/19 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
python中数字是否为可变类型
2020/07/08 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
Python扫描端口的实现
2021/01/25 Python
文员个人求职自荐信
2013/09/21 职场文书
农村党支部先进事迹
2014/01/14 职场文书
个人投资计划书
2014/05/01 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
开工典礼策划方案
2014/05/23 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技