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 setTimeout opener的用法示例详解
Oct 23 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
添加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
在Windows版的PHP中使用ADO
2006/10/09 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
jQuery实现的多选框多级联动插件
2014/05/02 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
Vue实现购物车场景下的应用
2017/11/27 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
外贸业务员求职自荐信分享
2013/09/21 职场文书
怎样写演讲稿
2014/01/04 职场文书
婚庆公司的创业计划书
2014/01/22 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
十周年庆典策划方案
2014/06/03 职场文书
法定代表人身份证明书
2014/09/10 职场文书
学习与创新自我评价
2015/03/09 职场文书
经费申请报告范文
2015/05/18 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电