140

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

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

4

5 回答 5

264

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

立即调用函数表达式 (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 用于上面的代码。

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

希望这可以帮助。祝你好运。

于 2013-11-05T23:41:42.467 回答
39

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

“学习 JavaScript 设计模式”。

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

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

于 2013-12-15T20:55:17.793 回答
19

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

我来自 ac# 背景，所以添加了一些我觉得有用的术语。

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，但它确实是一些更疯狂的规则！

命名空间文件

主文件.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，以便我可以测试它）但它看起来非常好，因为你可以定义小的功能单元，同时避免“这个”的泥潭' .

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

于 2014-05-14T15:41:53.017 回答
6

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

于 2014-08-11T09:11:55.270 回答
-3

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

于 2015-05-13T19:09:22.407 回答