JQ部分源码解读

---

前言

为什么要阅读jQ源码。阅读jquery源
码可以学习里面的编程思想，看看jq是如何对我们一些常用的方法进行封装的，这些核心思想一方面可以巩固我们的js基础和使用能力，另一方面为我们写一些封装和底层的构建都是很好的参考。

一、环境处理分析

1-1 为了防止里面的代码变量污染外部 使用闭包

(function(global,factory){
     
})(typeof window !== undefined ? window :this ,function(window,noGlobal){
   
})

这就是最外层的结构
往里面继续剖析，可以看到有对不同环境的运行进行判断

读懂这一段，需要对于js运行环境进行分析

1-2 js可以运行的环境

• 浏览器端 webkit(blink)、gecko、trident…

• webview「手机端APP中」 webkit 有window，不支持CommonJS规范，支持ES6Module规范

• node环境 没有window、支持CommonJS规范、但是不支持ES6Module规范

• 可以基于webpack进行编译
  支持window、也支持CommonJS规范、支持ES6Module规范（可以让ES6Module和CommonJS混合调用）…」：基于node环境进行打包处理，打包后的结果交给浏览器端去渲染和运行

接着剖析，这个自适应函数里面

(function(global,factory){
    
     //node端运行JQ:global->this
     //webpack 端运行jq：global ->window
     //浏览器端运行jq ：global -window
     "use strict"
     if(typeof module === "object" && typeof  module.exports === "object"){
   
        //支持commonjs模块规范   node // webpack
        module.exports = global.document ?
           // global ->window 在webpack下端运行 把factory执行的返回结果当做模块导出
			factory( global, true ) :
            // global ->this 在node端运行 直接导出一个函数
			function( w ) {
   
				if ( !w.document ) {
   
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};

     }else{
   
         // 在浏览器端运行 jq  会把factory函数执行，传递实参window
         factory(global)
     }
     
})(typeof window !== undefined ? window :this ,function(window,noGlobal){
   
    // 在浏览器端运行 window ->window
    // 在浏览器端运行 noGlobal ->undefined
    // 在webpack运行 window -> global
    // 在webpack运行运行 noGlobal ->true
    "use strict";
    var jQuery = function( selector, context ) {
   
		return new jQuery.fn.init( selector, context );
	};
    if ( typeof noGlobal === "undefined" ) {
   
        window.jQuery = window.$ = jQuery;
    }
    return jQuery;
    
})

看这个方法的内部入参，一个是window（具体值因不同环境值也不同），一个是方法
在看这个匿名函数执行的内部判断， 看懂这段判读需要知道一点：