JavaScript模块模式与示例

我找不到任何可访问的例子来说明两个（或更多）不同的模块是如何连接在一起工作的

---

所以，我想问一下，是否有人有时间写一个例子来解释模块是如何协同工作的。

为了接近模块化设计模式，您需要首先理解以下概念：

立即调用的函数表达式（IIFE）：

有两种方法可以使用这些函数。1.函数声明2。函数表达式

下面是使用函数表达式

什么是名称空间？ 现在，如果我们将名称空间添加到上述代码段，那么

var anoyn = (function() {
}());

JS中的闭包是什么

这意味着，如果我们在另一个函数中声明任何具有任何变量作用域的函数（在JS中，我们可以在另一个函数中声明一个函数！），那么它将始终计算该函数的作用域。这意味着将始终读取外部函数中的任何变量。它不会读取具有相同名称的全局变量（如果有）。这也是使用模块化设计模式避免命名冲突的目标之一

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

现在，我们将应用上述三个概念来定义我们的第一个模块化设计模式：

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

其目的是向外界隐藏可变的可访问性

---

希望这有帮助。祝你好运。

我真的建议任何进入这个主题的人阅读艾迪·奥斯马尼的免费书籍：

“学习JavaScript设计模式”

---

当我开始编写更易于维护的JavaScript时，这本书给了我极大的帮助，我仍然将它作为参考。看看他不同的模块模式实现，他解释得很好。

我想我应该通过讨论如何将模块装配到应用程序中来扩展上述答案。我在doug crockford的书中读到了这一点，但对于javascript来说，这一切仍然有点神秘

我来自c#背景，因此我在这里添加了一些我觉得有用的术语

Html

您将拥有某种顶级html文件。将其视为项目文件会有所帮助。您添加到项目中的每个javascript文件都希望进入这个过程，不幸的是，您没有得到对此的工具支持（我使用IDEA）

您需要使用以下脚本标记将文件添加到项目中：

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

就这样。这只是为了添加一个全局变量，以便我们的其余代码可以使用。您还可以在此处（或在其自己的文件中）声明嵌套的名称空间

模块

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

我们在这里所做的是为应用程序中的变量分配一个消息计数器函数。它是一个函数，返回一个我们立即执行的函数

概念

我认为将SomeComponent中的顶行视为声明某个内容的名称空间会有所帮助。唯一需要注意的是，您的所有名称空间都需要首先出现在其他文件中——它们只是由应用程序变量根化的对象

目前我只采取了一些小步骤（我正在从一个extjs应用程序中重构一些普通的javascript，以便对其进行测试），但它看起来相当不错，因为您可以定义一些小的功能单元，同时避免陷入“this”的泥潭

---

您还可以使用此样式来定义构造函数，方法是返回一个函数，该函数返回一个包含函数集合的对象，并且不立即调用它。

在这里您可以找到详细解释的模式。我想补充一点，关于模块化JavaScript的第二件事是如何在多个文件中构造代码。许多人可能会建议您选择AMD，但我可以从经验中说，由于大量HTTP请求，您最终会出现页面响应缓慢的情况。解决方法是按照CommonJS标准将JavaScript模块（每个文件一个）预编译成单个文件。看看这里的示例

您可以在这里找到模块模式JavaScript

我还建议您阅读我关于Addy Osmani的书中未涉及的“最终模块模式”的文章：这与Stoyan StefanovStoyan的书中的“JavaScript模式”相比如何更全面。它不仅涵盖高级模式，还更深入地讨论了其他JS最佳实践。Stoyan Stefanov的“学习JavaScript设计模式”评论“JavaScript模式”。注意：这似乎比“学习JavaScript设计模式”中的版本要好得多。所有AMD实现都提供了到单个文件中的预编译。这是正确的，但是得到的优化文件需要加载程序库（只是用r.js v2.1.14重新检查了它），这通常非常重要。一旦我们编译了代码，就不需要解析异步加载的依赖项，我们也不需要这个库。试想一下：我们将模块封装到AMD中，这意味着异步。加载，然后将它们编译成单个文件（不再单独加载），但加载整个库来解决它们（现在是多余的）。对我来说，这听起来不是一个最佳的方式。为什么我们不异步加载AMD呢？与RequireJS相比，almond.js为成品代码提供的加载程序重量更小，但相对而言，不发出单个http请求的性能优势远远超过向模块中添加加载程序代码的成本，因此虽然它的优化程度较低，它的规模要小得多。在我看来，这个问题应该扭转过来——为什么在浏览器不同步的情况下却假设同步？实际上，我认为RequireJS和CommonJS都应该内置promise实现。这两种格式都是CommonJS模块/2.0的有效路径，并提供相同的可伸缩性。对我来说，处理CJS模块/1.1（这就是我所说的CommonJS）要容易得多，代码看起来更干净。我遇到了AMD的好处：*可以加载mo

myAppNamespace = {};

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();