带有示例的 JavaScript 模块模式 [关闭]

Question

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

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

Answer 1

为了接近模块化设计模式，您需要先了解这些概念：

立即调用函数表达式 (IIFE)：

(function() {
      // Your code goes here 
}());

您可以通过两种方式使用这些功能。 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

jsfiddle for the code above.

目标是向外界隐藏变量可访问性。

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

Answer 2

在这里https://toddmotto.com/mastering-the-module-pattern 你可以找到详细解释的模式。我要补充一点，关于模块化 JavaScript 的第二件事是如何在多个文件中构建代码。很多人可能会建议您在这里使用 AMD，但我可以根据经验说，由于大量 HTTP 请求，您最终会在某些时候页面响应缓慢。出路是将您的 JavaScript 模块（每个文件一个）预编译为遵循 CommonJS 标准的单个文件。在这里查看示例http://dsheiko.github.io/cjsc/

Answer 3

你可以在这里找到模块模式 JavaScript http://www.sga.su/module-pattern-javascript/

Answer 4

我想通过讨论如何将模块组合到应用程序中来扩展上述答案。我在 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>

看起来折叠标签会导致事情失败 - 虽然它看起来像 xml，但它确实是一些更疯狂的规则！

命名空间文件

MasterFile.js

myAppNamespace = {};

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

模块

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'。

您还可以使用这种风格来定义构造函数，方法是返回一个函数，该函数返回一个包含函数集合的对象，而不是立即调用它。

Answer 5

我真的会推荐任何进入这个主题的人阅读 Addy Osmani 的免费书籍：

“学习 JavaScript 设计模式”。

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

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