用于 jquery 应用程序的 Javascript 模块模式答案

【问题标题】：Javascript module pattern for jquery applications用于 jquery 应用程序的 Javascript 模块模式
【发布时间】：2013-09-27 23:21:56
【问题描述】：

我给大家写信是因为我想就我正在使用的一个特征模块模式获得一些建议和技巧。

在网络和书籍中搜索该主题，除了某些概念外，我找不到与此架构选择类似的任何内容。

简单的模式： ° 每个网页必须只包含一个范围，并且可以包含多个模块。 ° 每个模块都是一个带有子功能的 IIFE。 ° 每个范围都有一个准备好的文档并调用一个或多个模块。

我附上一个代码示例，以便更明确。

这种模式是否让您想起以前见过的东西？是一个好的架构选择吗？这种模式有任何弱点或架构错误吗？这是对 IIFE 函数和命名空间的好用吗？

提前谢谢你，最好的问候。

index.html

<html>
<head>
    <meta HTTP-EQUIV='content-type' CONTENT='text/html; charset=utf-8'/>
</head>

<body>

    <div id="first"></div>
    <div id="second" style="border:2px solid green;width:150px;height:190px;"></div>

</body>

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script type='text/javascript' src='js/module.one.js'></script>
<script type='text/javascript' src='js/module.two.js'></script>
<script type='text/javascript' src='js/scope.js'></script>

module.one.js

(function () {


// Module namespace

if (typeof $M === 'undefined') { 
    $M = {}; 
}

// Variables declaration chained
var 
    $first,
    $second,
    $chunk,
    documentHeight,
    animationTime,
    style,
    style2;

/* ===========================================================================================================
    INIT FUNCTION
============================================================================================================= */

var init = function() {

    // calls setup first 
    setup();                        

    // calls other functions
    appendChunk();
    animateChunk();
};

function setup() {

    // Vars caching
    $document = $(document);
    $first = $('#first');
    $second = $('#second');
    $chunk = $("<div id='chunk'> truffle shuffle </div>");
    documentHeight = $document.height(); 
    animationTime = 1000;

    style = {
        'border':'2px solid red',
        'height': documentHeight / 8,
        'width': '150px'
    };

    style2 = {
        'height': documentHeight / 4,
        'width': '300px'
    };

    $second.hide();
}

/* ===========================================================================================================
    OTHER FUNCTIONS
============================================================================================================= */

function appendChunk() {
    $first.append($chunk);
    $chunk.css(style);
}

function animateChunk() {
    $chunk.animate(style2,animationTime,function(){
        $(this).trigger('animationComplete');
    });
}



/* ===========================================================================================================
    INIT MODULE
============================================================================================================= */

$M.one = init;

})();

module.two.js

(function () {


    // Module namespace

    if (typeof $M === 'undefined') { 
        $M = {}; 
    }

    // Variables declaration chained
    var 
        $second,
        $chunk,
        animationTime,
        style;

    /* ===========================================================================================================
        INIT FUNCTION
    ============================================================================================================= */

    var init = function() {

        // calls setup first 
        setup();                        

        // calls other functions
        chunkListener();
        secondListener();
        isSecondVisible();
    };

    function setup() {

        // Vars caching

        $second = $('#second');
        $chunk = $("#chunk");

        animationTime = 1000;

        style = {
            'border':'2px solid red',
            'height': '150px',
            'width': '150px'
        };

    }

    /* ===========================================================================================================
        OTHER FUNCTIONS
    ============================================================================================================= */

    function chunkListener() {
        $chunk.on('animationComplete',function(){
            $second.fadeIn().trigger('animationComplete');
        });
    }

    function secondListener() {
        $second.on('animationComplete',function(){
            $chunk.animate(style,animationTime);
        });
    }


    function isSecondVisible() {
        var time = setInterval(function() {
            if($second.is(':visible')) {
                console.log("visible");
                clearInterval(time);
            } else {
                $second.html("finished!");
            }
        },200);
    }


    /* ===========================================================================================================
        INIT MODULE
    ============================================================================================================= */

    $M.two = init;

})();

scope.js

$(document).ready(function () {

$M.one();
$M.two();

});

【问题讨论】：

无法得到问题.....;/
现在应该更清楚了。

标签： javascript jquery design-patterns module module-pattern

【解决方案1】：

这种模式是否让您想起了一些以前见过的东西？

模块结构类似于Module Pattern。扩展您称为$M 的“超级”模块的原理看起来也很熟悉。见Module Augmentation

这是一个好的架构选择吗？这种模式有任何弱点或架构错误吗？

Thinking Modular 通常（当然取决于上下文，将“hello world”应用程序模块化有点过分）是一个很好的架构选择。但是，在阅读您的模块逻辑时，我对在内部以程序方式进行设计而不公开任何 api 有点怀疑。我相信您有机会通过实施类似 M-V-* 的架构来改进您的模块设计。

这是对 IIFE 函数和命名空间的良好使用吗？ 我认为你的用法很好。我可能会添加“超级”模块（$M）作为您模块 IIFE 的参数，这应该可以更好地将您的模块与外部世界（全局范围）隔离。

参考文献

Learning JavaScript Design Patterns

Immediately-Invoked Function Expression (IIFE)

【讨论】：

@Mahoney 如果这个答案让你满意，那么你应该接受它作为你问题的答案，这对未来可以看到这个答案和好运的用户有好处。:)