jQuery链式代码风格:jQuery(“#one_div”).html(“something”).on(“click”, function(){}).find(“p”); 的实现原理解析。
1.通过数组方式支持连写
JavaScript 可以设计用起来像 Array 的对象:
var arr = ['ab', 'ac', 'add'];
arr.replace = function ( c, v ) {
for (var i = 0; i < this.length; i++) {
this[i] = this[i].replace(c, v);
}
return this;
}
arr.add = function(v) {
for ( var i = 0; i < this.length; i++ ) {
this[i] = this[i] + v;
}
return this;
}
var b = arr.replace('a', 't-').add('-add');
往 Array 对象里面添加方法,每个方法返回当前对象,使链式操作完成。使用 Object.prototype.toString.call(b) 结果为 [object Array] 对象,说明b是一个数组对象,b对象包含了 Array 原生 slice 和 join 等方法,污染了最终对象。
在firebug中b对象的打印如下:
2.通过Array-Like Object方式支持链式操作
在jQuery中,重写对象的 splice 方法,让浏览器误认 jQuery 对象为一个数组,但Object.prototype.toString.call(d)中打出的为[object Object]的信息,使jQuery('div')得到的对象为一个非Array对象
// 最终答案
var c = {};
c[0] = 'ab';
c[1] = 'ac';
c[2] = 'add';
// 模拟数组必需指定length属性,元素增加或者修改时需要同时改变
c.length = 3;
// 此处是重点,使用了数组的splice方法后,才能将该对象模拟成数组
c.splice = [].splice;
c.replace = function ( c, v ) {
for (var i = 0; i < this.length; i++) {
this[i] = this[i].replace(c, v);
}
return this;
}
c.add = function(v) {
for ( var i = 0; i < this.length; i++ ) {
this[i] = this[i] + v;
}
return this;
}
// 链式操作实现
var d = c.replace('a', 't-').add('-add');
在firebug打印结果为:
在控制台中输入d.slice,打印为undefined,说明对象d没有被数组方法污染。
参考:http://stackoverflow.com/questions/6599071/array-like-objects-in-javascript
- 大小: 23.8 KB
- 大小: 28 KB
分享到:
相关推荐
jquery.i18n.properties-1.0.9.js 下载
jquery-i18n-properties-1.0.9 多语言源代码及用例,可以参考用例的写法
jquery+html实现轮播图--代码
jquery-3.5.0.js jquery-3.5.0.min.js.zip
jquery.i18n.properties-min-1.0.9.js前端国际化文件 jquery插件,实现国际化
前端项目-jquery-serialize-object,serialize form fields into an object or JSON
两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回...
jQuery实现网站换肤功能--带cookie默认为后点击后的颜色
jquery显示当前时间(年-月-日 小时:分钟:秒 星期几) 实时动态的时间显示
PHP和MySQL点赞功能的实现,“点赞”是最近很流行的一个词,这个代码,暂时只实现了功能性代码,要添加漂亮效果,可以继续用Jquery来实现。参照了其他
jQuery+div实现级联省份-城市查询,该实例包含jsp+js+css,所有代码为本人亲自编写,如有疑问请联系本人
jQuery打印插件----jQuery.print.js实现网页的打印功能,亲测有效
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化
jquery-i18n-properties-1.2.1 多语言实现开源脚本及实例
jqGrid没有setComplexGroupHeaders方法,使用此插件实现三级分组表头功能
jquery入门之动态表格---动态添加一行
jquery-1.2.3.js jquery-1.2.3.min.js jquery-1.2.6.js jquery-1.2.6.min.js jquery-1.3.0.js jquery-1.3.0.min.js jquery-1.3.1.js jquery-1.3.1.min.js jquery-1.3.2.js jquery-1.3.2.min.js jquery-1.4.0.js ...
jquery-1.4.2.js jquery-1.4.2.min.js jquery-1.4.2-vsdoc.js 中文版vsdoc jquery-1.4.2-vsdoc_en.js jquery.cookie.js
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...