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 : ,
         p2 : "",
         p3 : false
     };
     var _prop_ = {
         _init : function () {
             var $ul=$("<ul></ul>");
             for (var i = ;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")

显示结果