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 相关文章推荐
javascript 学习笔记(onchange等)
Nov 14 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
JavaScript中的 new 命令
May 22 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
PHP中Array相关函数简介
2016/07/03 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
Javascript hasOwnProperty 方法 & in 关键字
2008/11/26 Javascript
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
微信小程序 PHP后端form表单提交实例详解
2017/01/12 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
2018/08/16 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python实战购物车项目的实现参考
2019/02/20 Python
python图形界面开发之wxPython树控件使用方法详解
2020/02/24 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
python Matplotlib模块的使用
2020/09/16 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
网络安全方面的面试题
2016/01/07 面试题
大学新生欢迎词
2014/01/10 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
交通志愿者活动总结
2014/06/27 职场文书
社区娱乐活动方案
2014/08/21 职场文书
乐山大佛导游词
2015/02/02 职场文书
委托收款证明
2015/06/23 职场文书