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 post传递数组方法实现思路及代码
Apr 28 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
js中定义一个变量并判断其是否为空的方法
May 13 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
AngularJS入门教程之路由与多视图详解
Aug 19 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 Javascript
基于openlayers实现角度测量功能
Sep 28 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
一个分页的论坛
2006/10/09 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
JavaScript获取select中text值的方法
2017/02/13 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
JS实现简易计算器
2020/02/14 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python实战小程序利用matplotlib模块画图代码分享
2017/12/09 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
Python使用贪婪算法解决问题
2019/10/22 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python如何实现FTP功能
2020/05/28 Python
python字典与json转换的方法总结
2020/12/28 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
家长给孩子的表扬信
2014/01/17 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript