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 下载
bootstrap-table实现 行拖拽 插件 jquery.tablednd.js bootstrap-table-reorder-rows.js bootstrap-table-reorder-rows.css
<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-serialize-object"关注的是使用jQuery来序列化表单字段,将它们转换为JavaScript对象或JSON格式,这在提交表单数据到服务器时尤其有用。下面我们将深入探讨这一主题。 1. **jQuery 序列化...
《jQuery i18n Properties Minified 1.0.9.js:前端国际化的关键》 在Web开发领域,为了提供全球化的用户体验,前端国际化的功能是必不可少的。jQuery i18n Properties Minified 1.0.9.js,作为一款优秀的jQuery...
两个问题 1.jQuery的链式操作是如何实现的? 2.为什么要用链式操作? 大家认为这两个问题哪个好回答一点呢? 链式操作 原理相信百度一下一大把,实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回...
jQuery打印插件----jQuery.print.js实现网页的打印功能,亲测有效
jquery插件jquery-ui-timepicker-addon.j
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
**jQuery摄像头插件jquery-webcam-plugin** 在网页开发中,集成摄像头功能可以帮助用户实时捕捉图像,广泛应用于在线证件照上传、视频聊天、虚拟试衣间等场景。`jQuery webcam plugin`是一个优秀的JavaScript库,它...
jQuery-3.5.1 版本是该库的一个稳定版本,为开发者提供了丰富的功能和优化的性能。 ### jQuery 的核心概念 jQuery 的主要目标是通过提供简洁的 API 来处理 HTML 文档遍历、事件处理、动画效果和 Ajax 请求。以下是...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来,我们需要创建一个HTML元素来显示时间,例如一个`<div>`: ```html <div id="current-time"> ``` 现在,我们可以编写...
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 1.0(2006年):这是jQuery的第一个正式版本,引入了链式调用和强大的选择器等功能。 - jQuery 1.3(2009年):增加了对CSS3选择器的支持,性能得到显著提升。 - jQuery 1.6(2011年):引入了$.attr()...
本文实例为大家分享了jQuery实现轮播图及其原理的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="viewport" content="width=device-width,...
jquery-ui日历控件还是很人性化的,但官网没找到很好的中文版,这里上传一下
jquery.i18n.properties-min-1.0.9.js前端国际化文件,项目中用到的前端国际化文件。 $.i18n.properties( { name : 'web_i18n', // Resource name path : '/resources/i18n/', //Resource path cache : true, ...
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版