jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend

jQuery.fn.extend 提供了一个扩展机制，可以方便我们通过一个或者多个示例对象来扩展某个对象。如果没有指定被扩展的对象，那么将扩展到自己身上。

jQuery.extend 也可以通过 jQuery.fn.extend 使用， 在 jQuery 中使用很多，用来为一个目标对象扩展成员，扩展的成员来自于一系列参考对象。
这样，如果我们需要为 jQuery.fn 扩展成员 removeData，就可以这样进行。


代码如下:

jQuery.fn.extend(
{
removeData: function( key ) {
return this.each(function() {
jQuery.removeData( this, key );
});
}
}
);

extend 的源码如下，因为比较简单，所以没有做太多的精简。


代码如下:

/// <reference path="jQuery-core.js" />
2
3
4 jQuery.extend = jQuery.fn.extend = function () {
5 // copy reference to target object
6 var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;
7
8 // 深拷贝情况，第一个参数为 boolean 类型，那么，表示深拷贝，第二个参数为目标对象
9 if (typeof target === "boolean") {
deep = target;
target = arguments[1] || {};
// skip the boolean and the target
i = 2;
}
// 如果目标不是对象也不是函数
if (typeof target !== "object" && !jQuery.isFunction(target)) {
target = {};
}
// 如果只有一个参数就是扩展自己
if (length === i) {
target = this;
--i;
}
// 遍历所有的参考对象，扩展到目标对象上
for (; i < length; i++) {
// Only deal with non-null/undefined values
if ((options = arguments[i]) != null) {
// Extend the base object
for (name in options) {
src = target[name];
copy = options[name];
// Prevent never-ending loop
if (target === copy) {
continue;
}
// Recurse if we're merging object literal values or arrays
if (deep && copy && (jQuery.isPlainObject(copy) || jQuery.isArray(copy))) {
var clone = src && (jQuery.isPlainObject(src) || jQuery.isArray(src)) ? src
: jQuery.isArray(copy) ? [] : {};
// Never move original objects, clone them
target[name] = jQuery.extend(deep, clone, copy);
// Don't bring in undefined values
} else if (copy !== undefined) {
target[name] = copy;
}
}
}
}
// Return the modified object
return target;
};

赞 (0)

相关推荐

  • jquery 插件开发 extjs中的extend用法小结

    在jquery中,extend其实在做插件时还是用的比较多的,今天同时小结jquery和ext js中 的extend用法,先来看jquery中的. 1) extend(dest,src1,src2,src3...); 复制代码 代码如下: var start = { id: 123, count: 41, desc: 'this is information', title: 'Base Object', tag: 'uncategorized', values: [1,1,2,3,5,8,1

  • Js-$.extend扩展方法使方法参数更灵活

    Js-$.extend扩展方法使方法参数更灵活

    在做JS开发时,我们将第三方复杂的插件进行封装,然后对外公开一个很简单的方法接口,这是开发时常用的方法,在JS里,我们的方法参数通常使用JQ的$.extend 扩展方法来实现 复制代码 代码如下: function extend(arr) { arr = $.extend({ name: 'zzl', sex: 'male', age: 31 }, arr || {}); alert("[Name:]" + arr.name + "[Sex:]" + arr.sex

  • jQuery.extend 函数的详细用法

    Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用: var newSrc=$.extend({},src1,src2,src3..

  • jquery的extend和fn.extend的使用说明

    jQuery为开发插件提拱了两个方法,分别是: 复制代码 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. 复制代码 代码如下: jQuery.fn = jQuery.prototype = { init: fu

  • Javascript Object.extend

    既然是类,那么就有抽象类,具体类,类的继承,同时,类的成员可以有实例成员和静态成员.下面来看一下prototype是怎么做到这些的. 先看prototype中的以下的代码: 复制代码 代码如下: var Abstract = new Object(); Object.extend = function(destination, source) { for (property in source) { destination[property] = source[property]; } retu

  • jQuery.extend 函数详解

    JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方法原型是: 复制代码 代码如下: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用: 复制代码 代码

  • jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend

    jQuery.fn.extend 提供了一个扩展机制,可以方便我们通过一个或者多个示例对象来扩展某个对象.如果没有指定被扩展的对象,那么将扩展到自己身上. jQuery.extend 也可以通过 jQuery.fn.extend 使用, 在 jQuery 中使用很多,用来为一个目标对象扩展成员,扩展的成员来自于一系列参考对象. 这样,如果我们需要为 jQuery.fn 扩展成员 removeData,就可以这样进行. 复制代码 代码如下: jQuery.fn.extend( { removeDa

  • jQuery的实现原理的模拟代码 -5 Ajax

    复制代码 代码如下: // 创建 XHR 对象 var xhr; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Msxml2.XMLHTTP"); } else { throw new Error("Ajax is not supported by this browser");

  • jQuery的实现原理的模拟代码 -1 核心部分

    jQuery的实现原理的模拟代码 -1 核心部分

    核心部分实现了两种选择器,使用 id 和标记名,还可以提供 css 的设置,以及 text 的设置. 复制代码 代码如下: // # 表示在 jQuery 1.4.2 中对应的行数 // 定义变量 undefined 方便使用 var undefined = undefined; // jQuery 是一个函数,其实调用 jQuery.fn.init 创建对象 var $ = jQuery = window.$ = window.jQuery // #19 = function (selecto

  • jQuery的实现原理的模拟代码 -3 事件处理

    在对象的私有扩展对象上,专门增加了一个名为 events 的事件管理对象,在这个对象上每种事件分别对应一个同名的属性,这个属性的值是一个数组,针对这个事件的处理程序依次压入这个数组中,构成一个事件处理的列表.自定义的事件处理函数即被压入这个列表中. 在事件触发的时候,通过注册的匿名函数来执行 jQuery.event.handle ,由于使用了闭包,所以在这个函数中的 this 就是事件源对象,通过这个事件源对象找到对象的私有扩展数据,然后在 events 中找到对应的事件处理程序列表,最后,依

  • jQuery的实现原理的模拟代码 -2 数据部分

    这个数据当然要通过属性来进行存取,但是,有多个属性怎么办呢?,要定义多个属性吗?,属性的名字叫什么呢?会不会与其他的属性有冲突呢? 在 jQuery 中,针对 DOM 对象扩展的私有数据可以用一个对象来表示,多个数据就使用这个对象的多个属性来表示.为了能够通过 DOM 对象找到这个扩展数据对象,而不会与其他现有的属性冲突,在 jQuery 中通过 expando 这个常量表示扩展对象的属性名,这个 expando 的值是计算出来的.而这个属性的值就是用来找到扩展对象的键值. 例如,我们可以定义

  • jQuery实现原理的模拟代码 -6 代码下载

    演示代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title><

  • mvvm双向绑定机制的原理和实现代码(推荐)

    mvvm框架的双向绑定,即当对象改变时,自动改变相关的dom元素的值,反之,当dom元素改变时,能自动更新对象的值,当然dom元素一般是指可输出的input元素. 1. 首先实现单向绑定,在指定对象的属性值发生改变时触发callback函数. 2. 单向绑定可采用ES5新增的defineProperty实现(或defineProperties),用了ES5注定就不支持IE9以下了,为了防止递归死循环问题,原有属性需要剪切到一个私有属性中保存. 3. 循环调用defineProperty定义闭包时

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • Jquery选择器 $实现原理

    但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理): 复制代码 代码如下: (function() { var // Will speed up references to window, and

  • C#中foreach原理以及模拟的实现

    本文实例讲述了C#中foreach原理以及模拟的实现方法,分享给大家供大家参考.具体如下: 复制代码 代码如下: public class Person:IEnumerable     //定义一个person类  并且 实现IEnumerable 接口  (或者不用实现此接口 直接在类 //里面写个GetEnumerator()方法) {         string[] names = { "小杨", "科比布莱恩特", "凯文杜兰特", &

随机推荐