JavaScript模块模式与示例


JavaScript module pattern with example

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

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

相关讨论

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

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

1
2
3
(function() {
      // Your code goes here
}());

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

这里使用的是函数表达式。

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

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

JS中的闭包是什么？

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

1
2
3
4
5
6
7
var scope ="I am global";
function whatismyscope() {
    var scope ="I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

上面代码的jfiddle。

其目的是为了从外部世界隐藏变量的可访问性。

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

相关讨论

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

"学习javascript设计模式"。

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

当我开始编写可维护性更强的JavaScript时，这本书极大地帮助了我，我仍然把它用作参考。看看他不同的模块模式实现，他非常好地解释了它们。

相关讨论

我想通过讨论如何将模块组合到一个应用程序中来扩展上面的答案。我在DougCrockford的书中读到过这个，但作为一个新的javascript，它仍然有点神秘。

我来自C背景，因此添加了一些我认为有用的术语。

HTML

你会得到一些顶级的HTML文件。它有助于将此视为项目文件。你添加到项目中的每个javascript文件都想进入这个项目，不幸的是你没有得到这个项目的工具支持(我正在使用IDEA)。

您需要使用如下脚本标记向项目添加文件：

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

看起来折叠标签会导致失败——虽然它看起来像XML，但它确实有更疯狂的规则！

命名空间文件

主文件

1
myAppNamespace = {};

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

模块(s)

一些组件.js

1
2
3
4
5
6
7
8
9
10
11
12
13
myAppNamespace.messageCounter= (function(){

    var privateState = 0;

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

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

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

概念

我认为将somecomponent中的顶行看作是声明某些内容的名称空间有助于理解。唯一要注意的是，您的所有名称空间都需要首先出现在其他文件中—它们只是应用程序变量的根对象。

目前我只做了一些小的步骤(我正在从一个extjs应用程序中重构一些普通的javascript，这样我就可以测试它了)，但这看起来相当不错，因为您可以在避免"this"的困境的同时定义一些小的功能单元。

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

在这里toddmotto.com HTTPS：/ / /掌握- the -模型explained You can find the模式完全。我会add that thing about the second is how to构模的JavaScript代码文件在你的多。许多人可能建议你去这里与AMD喃喃说，我可以从你的经验会端上有点慢一些在线主页http requests because of numerous响应。预编译的方式你out is of modules(一个JavaScript文件)文件后进入commonjs单身标准。samples here take a look at dsheiko.github.io http：／／／／公司P＞＜／

相关讨论

你可以在这里找到模模式www.sga.su http：／／JavaScript JavaScript /模式/模块P＞＜／