您的位置：首页 > Web前端 > JQuery

JQuery_2.1.0_日记 4.29 $.extend

2014-04-29 17:33 495 查看
因为在JQuery一切皆JQuery,所以JQuery没有EXT那么恐怖的继承体系,比起EXT的Ext.extends(),$.extend()函数还是很好理解的,只是把一个对象的属性和方法添加到目标对象上.刚出生的JQuery是很弱小的,JQuery源码后面和我们自己扩展都是通过$.extend()函数.

Test_Html

<body>
[align=left] <div id= "div1">div1</div ><div id= "div2">div2</div >[/align]
[align=left] <span id= "span1">span1</span ><span id= "span2">span2</span ><span id="span3" >span3 </span>[/align]
[align=left] </body>[/align]

[align=left] Test_Script[/align]
[align=left] $.extend(target, src);[/align]
[align=left] target.show();//function[native object]说明this是javascript内建对象构造函数[/align]

[align=left] $.extend(src);[/align]
$.show();//function[native object]说明this是javascript内建对象构造函数,JQuery
= function(){};

[align=left] $.fn.extend(src);[/align]
$('div').show(); //function(selector,
context)

[align=left] 可以看到想扩展JQuery的静态方法和属性就$.extend,想扩展JQuery对象就用$.fn.extend,当然也可以扩展自己的简单js对象.[/align]

[align=left] 再看$.extend()源码之前，先看一个深克隆和浅克隆的例子.[/align]
[align=left] [/align]
[align=left] 浅克隆[/align]
var target
= {};
var src
= {copy:{name:'原始数据' }};
[align=left] [/align]
[align=left] [/align]
[align=left] $.extend(target, src);[/align]
[align=left] target.copy.name = '覆盖数据' ;[/align]
[align=left] alert(src.copy.name); //覆盖数据[/align]

[align=left] 深克隆[/align]
var target
= {};

var src
= {copy:{name:'原始数据' }};
[align=left] [/align]
[align=left] [/align]
[align=left] $.extend(true, target, src);[/align]
[align=left] target.copy.name = '覆盖数据' ;[/align]
[align=left] alert(src.copy.name); //原始数据[/align]

[align=left] $.extend源码[/align]
[align=left] [/align]

jQuery.extend = jQuery.fn.extend = function()
{
var options,
name, src, copy, copyIsArray, clone,
[align=left] target = arguments[0] || {},[/align]
[align=left] i = 1,[/align]
[align=left] length = arguments.length,[/align]
[align=left] deep = false ;[/align]

[align=left] // Handle a deep copy situation[/align]
[align=left] //如果第一个参数是boolean类型[/align]
[align=left] //修正参数,将第二个参数作为target[/align]
if ( typeof target
=== "boolean" ) {
[align=left] deep = target;[/align]

// skip the boolean and
the target
[align=left] target = arguments[ i ] || {};[/align]
[align=left] //i++是为了后续 i === length的判断[/align]
[align=left] i++;[/align]
[align=left] }[/align]

// Handle case when target is
a string or something (possible in deep copy)
[align=left] //如果目标既不是对象也不是方法(例如给基本类型扩展属性方法和属性不会报错但是是无用的)，修正target为 js对象[/align]
if ( typeof target
!== "object" && !jQuery.isFunction(target)
) {
[align=left] target = {};[/align]
[align=left] }[/align]

// extend jQuery itself if only
one argument is passed
[align=left] //如果只有一个参数，修正对象为JQuery函数或JQuery对象[/align]
if (
i === length ) {
[align=left] target = this ;[/align]
[align=left] //修正target所在位置,后面的都是要添加给target的对象[/align]
[align=left] i--;[/align]
[align=left] }[/align]

for (
; i < length; i++ ) {
// Only deal with non-null/undefined
values
if (
(options = arguments[ i ]) != null )
{
// Extend the base
object
for (
name in options
) {
[align=left] src = target[ name ];[/align]
[align=left] copy = options[ name ];[/align]

// Prevent
never-ending loop
[align=left] //如果target和copy是同一个对象，略过，防止自己的属性引用了本身对象导致的循环引用,以致GC无法回收[/align]
if (
target === copy ) {
[align=left] continue ;[/align]
[align=left] }[/align]

// Recurse
if we're merging plain objects or arrays
[align=left] //如果是deep为true，并且要添加给target的copy为对象获数组[/align]
if (
deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
if (
copyIsArray ) {
[align=left] copyIsArray = false ;[/align]
[align=left] clone = src && jQuery.isArray(src) ? src : [];[/align]

[align=left] } else {[/align]
[align=left] clone = src && jQuery.isPlainObject(src) ? src : {};[/align]
[align=left] }[/align]
[align=left] [/align]
//
Never move original objects, clone them
//很巧妙
,用一个递归,实现引用对象的深克隆,递归的返回条件是属性石基本类型,基本类型都是深克隆
[align=left] target[ name ] = jQuery.extend( deep, clone, copy );[/align]

// Don't
bring in undefined values
} else if (
copy !== undefined )
{
[align=left] //浅克隆[/align]
[align=left] target[ name ] = copy;[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] }[/align]
[align=left] }[/align]

[align=left] // Return the modified object[/align]
[align=left] return target;[/align]
[align=left]};[/align]

[align=left] [/align]
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航