JavaScript 模块模式及示例

小开

最佳答案

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

立即调用函数表达式:

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

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

希望这个能帮上忙，祝你好运。

小开

我真的建议任何进入这个主题的人阅读艾迪•奥斯马尼(Addy Osmani)的免费书籍:

“学习 JavaScript 设计模式”。

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

当我开始编写更易维护的 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>

它似乎崩溃的标记导致事情失败-虽然它看起来像 xml，但它真的是一些疯狂的规则！

命名空间文件

MasterFile.js

myAppNamespace = {};

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

单元

一些组件

myAppNamespace.messageCounter= (function(){


var privateState = 0;


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


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

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

概念

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

目前我只做了一些小的工作(我正在从 extjs 应用程序中重构一些普通的 javascript，这样我就可以测试它了) ，但是它看起来很不错，因为你可以定义一些小的函数单元，同时避免陷入这个的泥潭。

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

小开

在这里 https://toddmotto.com/mastering-the-module-pattern你可以找到模式完全解释。我要补充的是，关于模块化 JavaScript 的第二件事是如何将代码结构化为多个文件。许多人可能会建议您在这里使用 AMD，但是我可以从经验中说，由于大量的 HTTP 请求，您最终将在某个点上使用缓慢的页面响应。解决方法是按照 CommonJS 标准将 JavaScript 模块(每个文件一个)预编译成单个文件。看看这里的样本 http://dsheiko.github.io/cjsc/

小开

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