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
Nov 26 Javascript
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
vue在响应头response中获取自定义headers操作
Jul 24 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
php远程下载类分享
2016/04/13 PHP
php从数据库中读取特定的行(实例)
2017/06/02 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
vue3.0 上手体验
2020/09/21 Javascript
Python常用小技巧总结
2015/06/01 Python
python常见的格式化输出小结
2016/12/15 Python
PyTorch快速搭建神经网络及其保存提取方法详解
2018/04/28 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
详解python持久化文件读写
2019/04/06 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
销售演讲稿范文
2014/01/08 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
诚信考试承诺书
2014/03/27 职场文书
继承权公证书
2014/04/09 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
小学班主任工作随笔
2015/08/15 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书