什么是JQuery源代码中的“模块”和“定义”？ [英] What are 'module' and 'define' in JQuery source code?

问题描述

我试图阅读并理解jQuery的源代码。但我找不到有关下面部分的任何信息。我试图理解旁边的评论，但不能从中获得任何有用的意义。

I was trying to read and understand the source code of jQuery. But I can't find any information about the below part. I tried to understand the comments beside it, but can't get any helpful meaning from it.

if ( typeof module === "object" && module && typeof module.exports === "object" ) {
    // Expose jQuery as module.exports in loaders that implement the Node
    // module pattern (including browserify). Do not create the global, since
    // the user will be storing it themselves locally, and globals are frowned
    // upon in the Node module world.
    module.exports = jQuery;
} else {
    // Otherwise expose jQuery to the global object as usual
    window.jQuery = window.$ = jQuery;

    // Register as a named AMD module, since jQuery can be concatenated with other
    // files that may use define, but not via a proper concatenation script that
    // understands anonymous AMD modules. A named AMD is safest and most robust
    // way to register. Lowercase jquery is used because AMD module names are
    // derived from file names, and jQuery is normally delivered in a lowercase
    // file name. Do this after creating the global so that if an AMD module wants
    // to call noConflict to hide this version of jQuery, it will work.
    if ( typeof define === "function" && define.amd ) {
        define( "jquery", [], function () { return jQuery; } );
    }

我还调试了代码，发现两个模块和 define 是 undefined 。

I also debugged the code and found that both module and define are undefined.

我想知道模块和定义在哪里来从？我怎么能理解呢？它用于什么？

I wondered where does the module and define come from? How can I understand it? What is it used for?

推荐答案

这部分是 UMD包装器。

UMD包装器？

它旨在支持用于导入或加载库的不同方法。
为此，它正在检查是否有一个受支持的模块系统可用。

It is meant to support the different methods that are used to import or load libraries. To do so, it is checking if one of the supported module system is available.

总之， jQuery 在此之前检查它应该如何定义自己。
这样，它支持全局插入以及两种最常见的模块模式（ commonJS 和< a href =https://github.com/amdjs/amdjs-api/blob/master/AMD.md =nofollow noreferrer> AMD ）。

In summary, jQuery is checking here how it should define itself before doing so. This way, it supports global insertion as well as the two most common module patterns (commonJS and AMD).

模块模式？

ES5和之前没有像大多数语言那样正式支持模块（例如在java中导入my.module 。因此，默认情况下很难将代码拆分为不同的模块或文件以保持组织良好。

ES5 and prior did not officially support modules like most languages do (e.g. import my.module in java). As a result, by default it is hard to split your code into different modules or files to keep it well organised.

默认情况下，导入模块的唯一方法是在HTML中使用脚本标记，并依赖全局上下文（即窗口）来链接它们。
它不检查模块的依赖关系，你必须手动添加你依赖的每个源文件（并确保在之前插入文件的依赖关系）。

By default, The only way to import modules is to use the script tag in the HTML and rely on the global context (i.e. window) to link them. It does not check module's dependencies and you have to manually add each source files you depend on (and make sure that the dependencies of a file are inserted before it).

为解决这个问题，目前已经制定了3个主要策略，以便您可以定义模块，它依赖什么，以及它导出什么。
它允许自动化模块和依赖项导入：

To solve this issue, there is currently 3 main strategies that have been developed so that you can define a module, what it depends on, and what it exports. It allows to automate module and dependencies import:

1. commonJS 模式最初是节点的模块模式它现在也通过 browserify 或 webpack 。这是使用 module.exports 来定义模块的模式（然后其消费者使用 var module = require（'modulePath）请求该模块'）; ）。


2. AMD（异步模块定义）模块模式，是 RequireJS 例如。这是使用 define 的模式（ define 用于请求依赖项和定义新模块）。 / li>
   
3. 最后，最近， ES6导入模式，将导入具有下一个JavaScript版本的模块（实际上有一些令人惊奇的工具，如 babel ，允许你已经使用它）。这里的代码段不支持它（但大多数ES6模块构建器也支持上述两个）。

1. The commonJS pattern that is originally node's module pattern though it is now also very used with web applications through builders like browserify or webpack. This is the pattern that is using module.exports to define a module (the module is then requested by its consumer with var module = require('modulePath');).
2. The AMD (Asynchronous Module Definition) module pattern that is the pattern used by RequireJS for example. This is the pattern that is using define (define is used both to request dependencies and define a new module).
3. And finally, more recently, the ES6 import pattern that will be the way to import modules with next JavaScript's version (actually there is amazing tools such as babel that allows you to already use it). It is not supported in the snippet here (but most ES6 module builders also support the two above-mentioned).

这篇关于什么是JQuery源代码中的“模块”和“定义”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！