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的密码强度验证代码
Mar 01 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
JavaScript实现构造json数组的方法分析
Aug 17 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面向对象编程快速入门
2006/10/09 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
基于empty函数的输出详解
2013/06/17 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
AngularJS教程 ng-style 指令简单示例
2016/08/03 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
21行Python代码实现拼写检查器
2016/01/25 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
python实现淘宝秒杀脚本
2020/06/23 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
利用python 读写csv文件
2020/09/10 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
python爬取微博评论的实例讲解
2021/01/15 Python
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
好学生评语大全
2014/05/05 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
考研复习计划
2015/01/19 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
高一地理教学工作总结
2015/08/12 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Go语言读取txt文档的操作方法
2022/01/22 Golang
python3中apply函数和lambda函数的使用详解
2022/02/28 Python