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选择器 $实现原理
Dec 02 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
BootStrap中
Dec 10 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
2013/10/24 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
使用python实现baidu hi自动登录的代码
2013/02/10 Python
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Linux下多个Python版本安装教程
2018/08/15 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
使用tensorflow DataSet实现高效加载变长文本输入
2020/01/20 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
python 如何调用 dubbo 接口
2020/09/24 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
采用专利算法搜索最廉价的机票:CheapAir
2016/09/10 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
八一建军节营销活动方案
2014/08/31 职场文书
职称评定个人总结
2015/03/05 职场文书
紫日观后感
2015/06/05 职场文书
入党自传范文2015
2015/06/26 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
小学音乐课教学反思
2016/02/18 职场文书
导游词之湖北武当山
2019/09/23 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL