jquery之源码

1.插件扩展机制

    所有的Jquery代理对象的实例，都是扩展自$.fn对象的

    意味着只要我们继续扩展$.fn这个对象的功能，就相当于扩展了所有的Jquery代理对象的实例的功能

代码

 var $body=$(document.body);
      //  console.log($body)
     console.log($.fn.addClass===$body.addClass)

$body.prototype=$.fn

$.fn.run = function(){
    console.log(this)  //谁调用这个方法，This就代表谁
 }

2.插件扩展机制的实现原理
所有jquery核心函数返回的代理对象的构造器的原型就是$.fn
* 构造器和对象的概念
* 注意：只要看到new关键字，一定是在堆中创建了一块空间

代码：展示jquery的原理

//Proxy是代理对象
         //构造函数
     function Proxy(seleector) {
         
     }
     function $(seleector) {
         return new Proxy(seleector)
     }

     $.fn = Proxy.prototype = {
         addClass : function () {
             console.log("this is addClass")
         },
         removeClass :function () {
             console.log("this is removeClss")
         }
     }

//     Proxy.prototype = $.fn

     var $body = $(document.body)

      $body.addClass()
      $body.removeClass()

 3、

//扩展功能(jquery里面就是这么写的，当然这个比较简单，就是用来理解的，实际应用中，
// 不需要写这个方法)
    $.extend = function (target) {
//        console.log(target)
        for(var i=0;i<arguments.length;i++){
         //  console.log(arguments[i])
            for(var prop in arguments[i]){
                console.log(target[prop])
                target[prop] = arguments[i][prop]
            }
        }
    }
   $.fn.dnList = function (options) {
      //默认代码
      var _def_ = {
          data: [],
          p1 : 0,
          p2 : 0,
          p3 : false
      };

      var _prop_ = {

      };
      //this代表调用的当前对象  使用$.extend，传入的参数会覆盖默认的相应参数，一一对应的 
      $.extend(this,_def_,options,_prop_);
      var $ul=$("<ul></ul>");
      for(var i=0;i<this.data.length;i++){
          $ul.append($("<li>"+this.data[i]+"</li>"))
      }
      this.append($ul);

   }

   var $plug = $(".dn-liat-plug");
   $plug.dnList({
       data : ["张飞s","赵云"]
   });

运行结果：

 4、

html

<div id="dn-liat-plug" class="dn-liat-plug"></div>
<div id="dn-liat-plug1" class="dn-liat-plug1"></div>

jQuery调用

 var $plug = $(".dn-liat-plug");
   $plug.dnList({
       data : ["张飞s","赵云"]
   });

   new dnList({
       dom:document.getElementById("dn-liat-plug1"),
       data:["zhang","yan"]
   })

引入插件

//工厂模式
(function (root,factory,plug) {
    //jquery===$
    //root.jQuery这个是传入jquery对象的原型
    //为什么用这种方式？
    //因为在不同的系统中，无法保证传进来的是window这个作用域，有可能是其他的作用域
    //我们只要关心传进来的是有jquery对象就可以，jquery对象它的上下文不见得一定要在window里面
   root[plug] = factory(root.jQuery,plug);
})(window,function ($,plug) {
    var _def_ = {
        data : [],
        p1 : 0,
        p2 : "",
        p3 : false
    };
    var _prop_ = {
        _init : function () {
            var $ul=$("<ul></ul>");
            for (var i = 0;i < this.data.length; i++){
                $ul.append($("<li>"+this.data[i]+"</li>"))
            }
            this.append($ul);
        }
    }

    //下面提供了俩中调用方法的写法

    //这个是为了jquery调用写的
    $.fn[plug] = function (options) {
        $.extend(this,_def_,options,_prop_)
        this._init();
        // console.log(this)  //谁调用这个方法，this就指向谁
    }

    //这个是为了new而写的，配合的是最上面的root[plug]
    return function (options) {
        var dom = options.dom;  //调用函数的目标，DOM对象
        $(dom)[plug].call($(dom),options)
    }
},"dnList")

显示结果