JS代码可以运行的环境(平台)

  • 浏览器「webview」：存在window全局对象、但是不支持CommonJS模块规范【模块的导入导出】
  • node环境 : 没有window(它的全局对象是Global)、支持CommonJS模块规范【模块的导入导出】
    • cmd $node 开启Node的repl命令
    • module.exports 模块导出
  • webpack环境 : 基于node把资源文件合并打包，最后交给浏览器来运行，所以 它里面既有window全局对象，也支持CommonJS模块规范

webview：App中一个非常重要的控件,它的作用是用来展示一个web页面。它使用的内核是webkit引擎,
image.png

jQuery源码解析

  1. var global = typeof window !== "undefined" ? window : this;
  2. // 如果window存在，则global=window；如果不存在global=this；
  4. // factory方法才是JQ的核心，之前的闭包只是为了做一个环境区分
  5. var factory = function (window, noGlobal) {
  6.     // 浏览器「webview」：window=window  noGlobal=undefined
  7.     // WEBPACK：window=window  noGlobal=true  => module.exports = factory执行的结果;
  8.     // JQ不支持在NODE环境下运行(因为里面不具备window全局对象)
  10.     //在某个函数的第一行写"use strict" 当前函数运行就按照严格模式运行
  11.     "use strict"; //开启严格模式
  13.     var arr = [];
  15.     var getProto = Object.getPrototypeOf; //原型对象
  17.     //数组的扁平化  
  18.     var flat = arr.flat ? function( array ) {
  19.         return arr.flat.call( array );
  20.     } : function( array ) {
  21.         return arr.concat.apply( [], array );
  22.     };
  25.     var version = "3.6.0",
  26.         jQuery = function (selector, context) {
  27.             //context 上下文 限定它获取的范围
  28.             return new jQuery.fn.init(selector, context);
  29.         };
  30.     jQuery.fn = jQuery.prototype = {
  31.         // jQuery是一个构造函数，原型上提供的方法是供其实例使用的
  32.     };
  34.     // 知识点：“new 构造函数”是可以创建类的实例的，但是我们如何做到，不使用new，只把构造函数当做普通函数执行，也能创造这个类的一个实例呢？==>工厂设计模式
  35.    //当做类、类的原型【公共的属性方法 供实例调用】
  36.    //jQuery.fn是给他设置的小名
  37.    //jQuery.prototype重定向到新的对象 需要保证constructor
  38.    var init = jQuery.fn.init = function (selector, context, root) {
  39.         // ...
  40.     };
  41.     init.prototype = jQuery.fn;
  44.     // 暴露API
  45.     if (typeof noGlobal === "undefined") {
  46.         // 如果是在浏览器中运行JQ，我们直接在window上挂载jQuery/$属性，属性值是jQuery这个方法
  47.         //   $() 或者 jQuery() ：就是把jQuery这个方法执行
  48.         window.jQuery = window.$ = jQuery;
  49.     }
  50.     // 在webpack环境中运行，则module.exports=jQuery；(使用let $=require('jquery'))
  51.     return jQuery;
  52. };
  54. // 闭包
  55. (function (global, factory) {
  56.     // 如果当前JQ是运行在浏览器或者webpack环境下，则global=window；如果运行在node环境下，则global=Global；支持CommonJS规范的是webpack和node环境；
  57.     "use strict";
  58.     if (typeof module === "object" && typeof module.exports === "object") {
  59.         // 支持CommonJS规范:webpack、node
  61.         //只有window才会有document的属性
  62.         module.exports = global.document ?
  63.             factory(global, true) :
  64.             function (w) {
  65.                 if (!w.document) {
  66.                     throw new Error("jQuery requires a window with a document");
  67.                 }
  68.                 return factory(w);
  69.             };
  70.     } else {
  71.         // 不支持CommonJS规范:浏览器、webview
  72.         factory(global);
  73.     }
  74. })(global, factory);

工厂设计模式

JQ源码.png

可以传递两个参数

image.png