首页 > Web开发 > 详细

jquery源码笔记(四): jquery.extend=jquery.fn.extend

时间:2016-07-25 01:47:43      阅读:232      评论:0      收藏:0      [点我收藏+]

extend()  方法,   合并两个或更多对象的属性到第一个对象中,jQuery后续的大部分功能都通过该函数扩展,

当参数只有一个对象时,则将对象的属性添加到jQuery对象中。

jquery 中扩展插件的形式:  2种方法

$.extend({                //扩展工具方法
        aaa:function(){
            alert(10);
        },
        bbb:function(){
            alert(20)
        }
    });

    $.fn.extend({            //扩展jquery实例方法
        aaa:function(){
            alert("fn  1");
        },
        bbb:function(){
            alert("fn  2");
        }
    });

    $.extend() ; this  -> $   this.aaa  ->  $.aaa();
    $.fn.extend();   this -> $.fn (原型)  this.aaa  -> $().aaa()

当参数中有多个对象的时候,后面的对象都是扩展到第一个对象上:

    var a = {name:"Linda"};
    $.extend(a,{name:"Joke",age:20},{address:"China"});
    console.log(a);        //    { name="Joke",  age=20,  address="China"}

还有  深拷贝 和 浅拷贝  , jquery默认是浅拷贝  

浅拷贝:
var a = {name:"Linda"};
    var b = {firends:[‘aa‘,‘bb‘,‘cc‘]};
    $.extend(a,b);
    a.firends.push(‘dd‘);
    console.log(b);        //    { firends:[‘aa‘,‘bb‘,‘cc‘,‘dd‘]}

深拷贝:
var a = {name:"Linda"};
    var b = {firends:[‘aa‘,‘bb‘,‘cc‘]};
    $.extend(true,a,b);  //第一个参数设置为 true , 那就是 深拷贝
    a.firends.push(‘dd‘);  此时a 的引用类型的 修改对  b 没有影响
    console.log(b);        //    { firends:[‘aa‘,‘bb‘,‘cc‘]}

源码的 分解:

 jQuery.extend = jQuery.fn.extend = function() {
    定义一些变量
  if(){} 看看是不是深拷贝情况
  if(){}  看看参数正确不
  if(){} 看看是不是插件情况      for(){ 可能有多个对象情况
      if(){} 防止循环引用
      if(){} 深拷贝
       else if(){} 浅拷贝
   }

 

jquery源码笔记(四): jquery.extend=jquery.fn.extend

原文:http://www.cnblogs.com/a-lonely-wolf/p/5702083.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!