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实现商品倒计时实现代码
May 03 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
ExtJs整合Echarts的示例代码
Feb 27 Javascript
vue视频播放暂停代码
Nov 08 Javascript
JavaScript遍历数组的方法代码实例
Jan 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
PHP 开源AJAX框架14种
2009/08/24 PHP
php session和cookie使用说明
2010/04/07 PHP
php简单smarty入门程序实例
2015/06/11 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
JavaScript DOM 学习第二章 编辑文本
2010/02/19 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
ES6学习教程之Map的常用方法总结
2017/08/03 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
python中__slots__用法实例
2015/06/04 Python
Python使用遗传算法解决最大流问题
2018/01/29 Python
python查询mysql,返回json的实例
2018/03/26 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python的命名规则知识点总结
2019/10/04 Python
Python datetime模块使用方法小结
2020/06/18 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
Numpy中np.random.rand()和np.random.randn() 用法和区别详解
2020/10/23 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
心得体会的写法
2014/09/05 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
年中了,该如何写好个人述职报告?
2019/07/02 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
设置IIS Express并发数
2022/07/07 Servers