AMD

Question

有人建议我阅读 AMD 并重新考虑我的库设置。目前，我已经用 IIFE 方式对所有内容进行了编码，从 全局范围 .

中隐藏了所有小组件

但是当我看到 AMD 中的 define() 东西是多么容易时，我想尝试一下！

但是我运行遇到了几个问题，我似乎无法理解 它从哪里开始以及如何加载 。现在，请注意，我已经阅读了很多关于该主题的文章并搜索了答案，但我认为 这更多是我的误解 阻碍了我理解我所读的内容哈哈。

所以我就按我的理解来问！ :)

让我们从一个简单的例子开始（顺便说一下，我不想创建一个 nodeJS 模块，而是一个网站的标准库），假设我有这段代码：

//----------------------------------------------
// main.js
//----------------------------------------------

var myLib = {}

//----------------------------------------------
// hello.js
//----------------------------------------------

myLib.hello = function() { console.log("hello"); }

//----------------------------------------------
// bye.js
//----------------------------------------------

myLib.bye = function() { console.log("bye"); }

我想把它变成类似这样的东西：

//----------------------------------------------
// main.js
//----------------------------------------------

define("myLib", ["hello". "bye"], function( hello, bye ){
    return {
        hello: hello,
        bye: bye
    };
});

//----------------------------------------------
// hello.js
//----------------------------------------------

define(function(){
    return function() { console.log("hello"); 
})

//----------------------------------------------
// bye.js
//----------------------------------------------

define(function() { 
    return function() { console.log("bye"); }
});

问题

如何将 myLib 附加到 window 对象 ( what I found )？您能否提供一个适用于 myLib 的示例？
HTML 中发生了什么？我需要多少脚本标签才能完成这项工作？一：<script ... scr="loadMyLib.js"></script> ?
据我了解，在以 AMD 方式工作时，我需要 requireJS 作为依赖项，对吗？
我对这一切的看法有问题吗？我在想也许 AMD 可能只适用于 nodeJS？

为什么要换成 AMD？

原因很多：

不用每次都写(function(){...})().
HTML 中不再有脚本标签（只有一个，库...和依赖项）。
更简单:D

Answer 1

好的，所以我终于把它记下来了。这是我的做法：

Download requireJS.

As I understood, AMD is a specification for the programming language JavaScript. It defines an application programming interface (API) that defines code modules and their dependencies, and loads them asynchronously if desired. - Wikipedia

RequireJS implements AMD.

Create your project setup.

让我们创建以下项目：

./
|-- js
|   |-- lib
|   |   |-- jquery.js
|   |   |-- babana.js   // Whatever that is.
|   |   |-- require.js  // requireJS (YES).
|   |
|   |-- src
|   |   |-- methods
|   |   |   |-- hello.js
|   |   |   |-- bye.js
|   |   |
|   |   |-- core.js     // Core of our library.
|   |
|   |-- app.js  // Important
|
|-- index.html

Create your index.html file and insert the requireJS script like so :

<script data-main="js/app" src="js/lib/require.js"></script>

这里发生了一些重要的事情：

嗯，你必须加载 require.js 库。
您必须在 data-main 属性中指定项目的 源文件 。将此文件视为您图书馆代码的入口点。在这种情况下：app.js。

这一切如何组合在一起似乎令人困惑，但不用担心，我们很快就会到达那里。 :)

Set requireJS configurations and require our library.

您还记得我们如何在脚本标签的 data-main 属性中指定 源文件 吗？让我们在其中添加我们需要的所有内容：

//------------------------------
// js/app.js
//------------------------------

// Config
requirejs.config({
    baseUrl: 'js/src',
    paths: {
        pixi: '../lib/pixi',
        jquery: '../lib/jquery',
        banana: '../lib/banana'
    }
});

// Load our library.
requirejs(['core'], function( MyLib) {

    // Set it to the global scope.
    window.MyLib = MyLib;

});

发生了很多事情，所以我会提供一些解释。

requirejs.config

baseUrl：每次我们要load/require一个js文件时，它会从我们这里指定的url开始搜索想要的文件。在我们的例子中，我们将其设置为 js/src，因为我们的大部分文件都位于此处。
paths: 如果需要，您可以在这里手动设置所有路径。一个好主意是在此处设置外部库，因为您可能会在您的库中请求它们。 另请注意 你必须如何写 ../，这是因为它从 baseUrl.

requirejs（数组？，函数）

array（可选）：这是您的 request 数组。你在这个数组中插入所有你想要加载的js文件。注意要使用加载的函数或对象，需要在其旁边的函数中设置一个参数。这里我们加载core，提供它的参数是myLib.
函数：这是动作函数。在这里，您将执行代码。 重要的是 在您的程序中的某个时刻将您的库导出到全局范围：window.

Define the core and the rest of your library.

当然，有很多方法可以创建您的库结构。这是一种方法。检查 jQuery's setup 以获得一些灵感。

//------------------------------
// js/src/core.js
//------------------------------

define( [
    "./methods/hello",
    "./methods/bye"
], function( hello, bye ) {

"use strict";

var 
    version = "1.0",
    MyLib = function() { }; // Define a local copy of MyLib

MyLib.fn = MyLib.prototype = {
    constructor: MyLib, 

    // Loaded functions
    hello: hello,
    bye: bye
};

return MyLib;

});


//------------------------------
// js/src/methods/hello.js
//------------------------------

define( function() {
    return function() {
        console.log("hello");
    };
} );


//------------------------------
// js/src/methods/bye.js
//------------------------------

define( function() {
    return function() {
        console.log("bye");
    };
} );

好吧，我不会解释所有这些是如何协同工作的，因为这个答案已经很长了哈哈。但是你明白了。

Use your library in the browser!

您的图书馆现在应该可以使用了：

MyLib.fn.hello() 或 MyLib.fn.bye().

AMD - 构建库示例

AMD - Building library example

javascript

jquery

问题

为什么要换成 AMD？

requirejs.config

requirejs（数组？，函数）