JavaScript模块模式与示例

Question

我找不到任何可访问的示例，显示两个（或更多）不同模块如何连接在一起工作。所以，我想问一下是否有人有时间编写一个解释模块如何协同工作的例子。

Answer 1

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

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

(function() {

      // Your code goes here 

}());

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

这是使用函数表达式。

什么是命名空间？现在，如果我们将命名空间添加到上面的代码中那么

var anoyn = (function() {

}());

什么是JS中的闭包？

这意味着如果我们在另一个函数内部声明任何变量scope /的任何函数（在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代码如上。

目标是隐藏来自外部世界的可变可访问性。

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

Answer 2

我想我会通过讨论如何将模块组合到一个应用程序中来扩展上述答案。我在doug crockford书中读过这篇文章但是对javascript来说是新手还是有点神秘。

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

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，所以我可以对它进行测试）但是它看起来相当不错，因为你可以定义很少的功能单元，同时避免'这个的泥潭'。

您还可以使用此样式通过返回一个函数来定义构造函数，该函数返回带有函数集合的对象，而不是立即调用它。