JsModule

jQuery源码分析系列
JS的模块化

最近在使用kendo ui的时候遇到一些问题，有一个需求是希望在打开LOV组件的时候不执行查询操作。但是在kendo官网上并没有看到任何有关LOV的文档或者API，于是猜想LOV可能是公司基于kendo ui封装的一个组件。经过查看源码发现确实如此，所有代码都在kendo.all.js 这个文件中，差不多7W行的代码，能找到LOV组件的实现代码着实是依赖于IDEA这个强大的工具。问题最终得到解决，稍微修改一下部分源代码，可以满足这个需求，而且发现这个LOV组件在设计之初确实没有提供一个参数来选择是否在打开的时候查询，这其实算是一个比较通用的需求，应该算是设计上的一点缺陷吧。没有见过LOV的童鞋这里可以给你们展示一下，它是长这样的：
初始化的时候，是长这样的，和一个普通的 输入框 很像，箭头标注的地方就是LOV

当我们点击那个小小的搜索按钮时，会弹出一个窗口，窗口中的内容更像是一个Grid，如图：

当我们双击grid中的一行记录的时，会把值重新带回到界面的那个输入框中。

这里展示了LOV组件的基本使用，在实际开发中，配置这样的一个LOV只需要短短的几分钟，可以节约大量的时间成本。当然还有很多细节，这里不过多介绍，因为这是需要前端和后台一起支持才能使用的。
需求可以实现了，这给了我极大的信心，毕竟从这么多代码里找出一部分然后修改一部分也很有意思。于是在修改之后又去看了一部分kendo ui的源码，感觉还好，有很多地方并不清楚，但是大概能知道什么意思，我目前要的就是这个效果，也不指望能马上明白每一行代码的用意，这需要特别特别扎实的基础功，我目前是做不到的。效果还是有一些的，很多之前不知道的API在源码里面都可以看到，这至少对我之后在使用kendo时是有帮助的，另一个好处就是让我明确了目前这一阶段在前端这一块的学习方向：JQuery。kendo 中到处都是JQuery，因为之前简单的看过一点点JQuery源码，那时候根本一点都看不懂，但还是有一点点印象。虽然我菜，但是我有一颗学习的心啊，当时就觉得JQuery很重要，我想看它的目的也不是想要完全理解这个库，而是希望通过学习它来帮助自己对JS一些特性的理解，在学习的过程中会遇到各种各样的问题，然后就会有针对性的去找文档、查资料，我觉得这种学习方式很好。

闭包与IIFE

什么是闭包？我觉得我肯定是说不清楚的，或者我根本就没理解吧，因为在很多情况下，我并不知道那到底属不属于闭包，JS太灵活了。网上找了一点说明，可能时间久了就有感觉了吧。

闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收，因此可以用来封装一个私有变量。

function a(){
  var n = 0;
  function inc(){
    n++; 
    console.log(n);
  }
  return inc;
}
var c = a();
c();  //控制台输出1
c();  //控制台输出2

有权访问另一个函数作用域内变量的函数都是闭包。

• 一个陷阱

function createFunctions(){
  var result = new Array();
  for (var i=0; i < 10; i++){
    result[i] = function(){
      return i;
    };
  }
  return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){
  console.log(funcs[i]());
}

输出结果不是 0-9， 而是10 个 10 ！
这里面这句话是关键 “闭包就是一个函数引用另外一个函数的变量，因为变量被引用着所以不会被回收”。
在这段JS中，for语句块并没有自己的作用域，也就是说 i 的作用域是属于 createFunctions 函数的。这里的 匿名函数访问了 createFunctions 函数里面的 i 变量，所以形成了一个闭包。

  for (var i=0; i < 10; i++){
    result[i] = function(){
      return i;
    };
  }

在执行完这段循环之后，i 的值变成了 10 ，而在 i 变成 10 之前， 函数并没有调用。函数带()才是执行函数！
所以在执行以下语句的时候，i 的值已经是 10 了。

for (var i=0; i < funcs.length; i++){
  console.log(funcs[i]());
}

IIFE(Immediately-Invoked Function Expression)，即 立即调用的函数表达。
比如，下面就是一个 立即执行函数

;(function (参数) {
  // 模块代码
  // return something;
})(参数));

它的结构可以看作是以下三部分组成：；、匿名函数、（）
最后的一对括号是对匿名函数的调用，因此必不可少。而前面的一对围绕着函数表达式的一对括号并不是必需的，但它可以用来给开发人员一个指示 – 这是一个 IIFE。也有一些开发者在函数表达式前面加上一个惊叹号（!）或分号（;)，而不是用括号包起来：

!function (参数) {
  // 代码
  // return something
}(参数);

还可以用一个大括号包起来

(function (参数) {
  // 代码
  // return something
}(参数));

在有些人的代码中，将 undefined 作为上面代码中的一个参数，他们那样做是因为 undefined 并不是 JavaScript 的保留字，用户也可以定义它，这样，当判断某个值是否是 undefined 的时候，判断可能会是错误的。将 undefined 作为一个参数传入，是希望代码能按预期那样运行。

(function (参数1, undefined ) {
  // 代码
  // return something
}(参数1));

如上，当传入入第二个参数的时候， undefined 就是真正的undefined。
我为什么要一开始的时候就写这个？因为JQuery一开始就是这么干的啊，不光是JQuery，大部分框架一开始都是这么干的。作为一个技术，我觉得如果我想理解JQuery，我一开始就想知道这开头代码是什么意思，要不然心里不舒服。So,I have no choice.

了解了这个，下面可以开始看看源码了，版本 3.3.1。

( function( global, factory ) {

    "use strict";

    if ( typeof module === "object" && typeof module.exports === "object" ) {

        // For CommonJS and CommonJS-like environments where a proper `window`
        // is present, execute the factory and get jQuery.
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }

// Pass this if window is not defined yet
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {

    //代码

});

传入两个参数，第二个参数是一个 函数，JQuery的主要代码，就是在这个函数中实现。其实这里面涉及到另一个知识点，JS模块。有关于JS模块的内容，在文章的开头处已经给了相关链接。

if ( typeof module === "object" && typeof module.exports === "object" ) {
}

这只是对JS执行环境的一个检测，判断当前的JS执行环境是在浏览器，还是支持 CommonJS Modules 规范。与 CommonJS Modules 对应的，还有 AMD，还有就是ES6 标准的模块化解决方案。