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

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

"学习JavaScript设计模式".

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

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

Answer 3

我想我会通过讨论如何将模块组合到一个应用程序中来扩展上述答案.我在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,所以我可以对它进行测试)但是它看起来相当不错,因为你可以定义很少的功能单元,同时避免了这个问题的泥潭'.

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

Answer 4

在这里https://toddmotto.com/mastering-the-module-pattern你可以找到彻底解释的模式.我想补充说,关于模块化JavaScript的第二件事是如何在多个文件中构建代码.很多人可能会建议你使用AMD,但我可以从经验中说,由于HTTP请求很多,你最终会因为页面响应速度慢而终结.解决方法是按照CommonJS标准将JavaScript模块(每个文件一个)预编译到单个文件中.看看这里的样品http://dsheiko.github.io/cjsc/