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 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
Javascript 面试题随笔
Mar 31 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
js脚本实现数据去重
Nov 27 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
iScroll中事件点击触发两次解决方案
Mar 11 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
函数式编程入门实践(一)
Apr 20 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
python 编写简单网页服务器的实例
2018/06/01 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
造型师求职自荐信
2013/09/27 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
生日祝酒词大全
2015/08/10 职场文书
OpenCV-Python实现油画效果的实例
2021/06/08 Python
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS