对jQuery框架整体内部结构的理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
    // 抽取jq框架的结构
    // 1.jq结构整体是一个自调，自调是为了防止全局变量的污染
    (function(global,factory){//这两个是形参 global对应就是window ，factory对应就是工厂函数

    factory(global);//jq对模块化做了一些支持
      
    })(typeof window!=='undefined'?window:this,function(window){//这两个是实参
      //jq的主体代码都在这里

      //3.这是jq对外暴露的工厂函数
      var jQuery = function(){
          return new jQuery.fn.init();
      }   
    //   4.置换原型。同时给原型起了一个简称，方便用户和自己使用。
    // #######然后init构造函数的原型也指向jQuery.fn。即jQuery原型和init构造函数同时指向同一个名字jQuery.fn
    // 加以说明：给jQ原型起一个简称是因为，JQ实现了一个插件机制，说白了，就是让用户可以自由扩展原型
    jQuery.fn = jQuery.prototype={
        constructor:jQuery,//######这个指向jQuery
        alert:function(msg){
            alert(msg);
        }
    }
    // 5.定义构造函数，同时把构造函数加到了jQuery工厂函数的原型中
    // 这是jq内部影响的构造函数
    var init = jQuery.fn.init = function(){//###这个指向init工厂函数

    }
    // 6.让构造函数的原型与工厂函数的原型保持一致   这样就可以访问jQuery原型中的方法和属性
    init.prototype = jQuery.fn;
      //2.在jq主体代码中对外暴露了两个变量，这两个变量指向同一个工厂函数
      window.jQuery = window.$ = jQuery;
      return jQuery;
    });
    console.log($());//返回的是一个构造函数
    console.log($().alert('调用jq原型中的方法'));
    </script>
</body>
</html>
对jQuery框架整体内部结构的理解

猜你喜欢
