JQuery链式法则

  何为链式法则?先给出非链式写法的例子

//非链式写法
$("div").css("width", 45px);
$("div").css("height", 45px);

  再给出链式写法的例子

//链式写法
$("div").css("width", 45px).css("height", 45px);

  JQuery实现元素的定位与操作,如果每一次操作,必须先获取一次对象,则会出现页面多次定位相同的DOM,页面脚本定位DOM可能会非常频繁,导致操作耗费时间,页面响应比较慢。

JQuery如何实现链式法则?

  下面以css接口为例分析如何实现。

css接口实现

    css: function( name, value ) {
return access( this, function( elem, name, value ) {
。。。
}, name, value, arguments.length > 1 );
},

  首先,css接口有两个入参,name 和 value, 分别对应需要改变的css属性名和属性值。

  其次,css接口实现,实际上是调用 access 函数, name和value会作为参数传递到 access函数中, access的返回值就是css接口的返回值。

   这个返回值就是我们今天分析的目标,现在我们期望此返回值为 调用css接口的JQuery对象。

  再次, access接口的第一个参数,this,就是调用css接口的 JQuery对象。

  最后, access接口的第二个参数,fn, 为在css接口中定义的回调函数, 此函数在access函数中被调动,并应用到 调用css接口的JQuery对象上。

access接口实现

  对于我们例子中设置单个css属性的情况, 在access中执行到的关键代码如下:

  首先,对于css设置单个属性值情况, 对应//set one value

  这个时候, chainable为真,即链式法则生效,

  然后, 将入参 fn 针对入参 elems 每个元素依次调用,

  最后,判断chainable为真, 则直接返回入参elems, 对应css接口调用者JQuery对象。

  

// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it's a function
var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
....// Sets many values
if ( jQuery.type( key ) === "object" ) {
......
// Sets one value
} else if ( value !== undefined ) {
chainable = true;
......
if ( fn ) {
for ( ; i < length; i++ ) {
fn( elems[i], key, raw ? value : value.call( elems[i], i, fn( elems[i], key ) ) );
}
}
} return chainable ?
elems
: // Gets
bulk ?
fn.call( elems ) :
length ? fn( elems[0], key ) : emptyGet;
};

链式法则终止

  如果对对象设置某个属性后,需要再获取设置后的值是否正确, 则涉及到终止链式规则, 因为此链式终止的接口,将会返回一个字符串,即属性值。

//链式终止,获取宽度
$("div").css("width", 45px).css("width");

  对应access函数涉及代码:

  对于css(“width”)

  css调用传入参数 chainable为false

  css调用传入参数 key 为 width字符串,不为null, 即bulk为false

  推导出, access 返回语句为 return length ? fn( elems[0], key ) : emptyGet;

  同时, length为 css调用的JQuery对象的个数, 大于0的,

  则 access返回语句, 进一步推到为 return fn( elems[0], key )

  fn即为 css函数中,传入access函数的fn参数, 此函数只作用于调用JQuery对象集合中的第一个元素, key为width,value未定义, 即fn返回值为 jQuery.css( elem, name )

// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it's a function
var access = jQuery.access = function( elems, fn, key, value, chainable, emptyGet, raw ) {
var i = 0,
length = elems.length,
bulk = key == null; // 获取width,bulk为false ......
return chainable ?
elems : // Gets
bulk ?
fn.call( elems ) :
length ? fn( elems[0], key ) : emptyGet;
};

  css 接口分析(css(“width”))

  value未定义,

  access的入参fn, 返回值为JQuery.css(elem, name), 为属性值

  access的入参chainable 为false

    css: function( name, value ) {
return access( this, function( elem, name, value ) { // value 为undefined
。。。。return value !== undefined ?
jQuery.style( elem, name, value ) :
jQuery.css( elem, name ); // value 为undefined,获取属性的值,并返回
}, name, value, arguments.length > 1 ); // arguments.length > 1 为假, 即chainable == false
},

JQuery对象操作支持链式法则源码分析的更多相关文章

  1. jquery中的$.ajax()的源码分析

    针对获取到location.href的兼容代码: try { ajaxLocation = location.href; } catch( e ) { // Use the href attribut ...

  2. JS/Jquery版本的俄罗斯方块(附源码分析)

    转载于http://blog.csdn.net/unionline/article/details/63250597 且后续更新于此 1.前言 写这个jQuery版本的小游戏的缘由在于我想通过从零到有 ...

  3. jQuery 源码分析(十三) 数据操作模块 DOM属性 详解

    jQuery的属性操作模块总共有4个部分,本篇说一下第2个部分:DOM属性部分,用于修改DOM元素的属性的(属性和特性是不一样的,一般将property翻译为属性,attribute翻译为特性) DO ...

  4. jQuery源码分析系列(36) : Ajax - 类型转化器

    什么是类型转化器? jQuery支持不同格式的数据返回形式,比如dataType为 xml, json,jsonp,script, or html 但是浏览器的XMLHttpRequest对象对数据的 ...

  5. Spring IOC 容器源码分析 - 填充属性到 bean 原始对象

    1. 简介 本篇文章,我们来一起了解一下 Spring 是如何将配置文件中的属性值填充到 bean 对象中的.我在前面几篇文章中介绍过 Spring 创建 bean 的流程,即 Spring 先通过反 ...

  6. jQuery 2.1.4版本的源码分析

    jQuery 2.1.4版本的源码分析 jquery中获取元素的源码分析 jQuery.each({// 获取当前元素的父级元素 parent: function(elem) { var parent ...

  7. netty源码分析 - Recycler 对象池的设计

    目录 一.为什么需要对象池 二.使用姿势 2.1 同线程创建回收对象 2.2 异线程创建回收对象 三.数据结构 3.1 物理数据结构图 3.2 逻辑数据结构图(重要) 四.源码分析 4.2.同线程获取 ...

  8. Spring AOP 源码分析 - 创建代理对象

    1.简介 在上一篇文章中,我分析了 Spring 是如何为目标 bean 筛选合适的通知器的.现在通知器选好了,接下来就要通过代理的方式将通知器(Advisor)所持有的通知(Advice)织入到 b ...

  9. Spring IOC 容器源码分析 - 创建原始 bean 对象

    1. 简介 本篇文章是上一篇文章(创建单例 bean 的过程)的延续.在上一篇文章中,我们从战略层面上领略了doCreateBean方法的全过程.本篇文章,我们就从战术的层面上,详细分析doCreat ...

随机推荐

  1. 20145304 刘钦令 Java程序设计第二周学习总结

    20145304 <Java程序设计>第2周学习总结 教材学习内容总结 java可区分基本类型和类类型(即参考类型)两大类型系统. 基本类型主要可区分为整数.字节.浮点数.字符与布尔. 整 ...

  2. SpringMvc出现No mapping found for HTTP request with URI的终极解决办法

    No mapping found for HTTP request with URI 出现这个问题的原因是在web.xml中配置错了,如: <servlet> <servlet-na ...

  3. JavaScript基础学习篇

    1.alert消息弹出框 alert(字符串或变量); 消息对话框通常可以用于调试程序. 与document.write 相似. 2.确认:confirm消息对话框 confirm(弹出时要显示的文本 ...

  4. CF 16C. Monitor

    题目链接 水题依旧无法1Y. #include <cstdio> #include <iostream> #include <cmath> using namesp ...

  5. Android --RatingBar的使用

    1.效果图

  6. vim 使用笔记

    vim命令笔记 a 插入 insert 插入 :%!xxd 以16进制方式进行编辑 :%!xxd -r 从16进制还原

  7. First day in 阿里

    周五上午10点半的飞机,为了便宜选了CA的空客320的飞机,结果体验很差.飞机涂了层风骚的粉紫色,机内较旧,也很小,经过所谓的头等舱简直惨不忍睹.对比起去年飞去北京乘的波音真是没法比,波音上每个人都有 ...

  8. hdu杭电1671 / poj3630 字典树

    传送门 题意:输入n串数字 找出是否有存在串的前缀与另一个串相同 如果存在 输出NO否则输出YES 思路:用字典树解决 标记字典树总串的结尾 查找出一个串内部是否有被标记的节点 如果有那么说明存在前缀 ...

  9. Linux_系统管理命令(工作中经常使用到的)

    查看网络配置信息 ifconfig 查看系统资源信息(类似win系统资源管理器) top (ps: load average 负载 Task 进程   Cpus/Mem  swap 交换分区 类似wi ...

  10. List集合对象根据字段排序

    //把需要比较的对象实现Comparable接口实现compareTo方法 public class Address implements Comparable<Address> { St ...