2

我给大家写信是因为我想就我正在使用的一个典型的模块模式提供一些建议和技巧。

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

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

我附上了一个代码示例，以便更清楚地说明。

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

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

索引.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;

})();

范围.js

$(document).ready(function () {

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

});
4

1 回答 1

1

这种模式是否让您想起以前已经见过的东西？

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

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

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

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

参考

学习 JavaScript 设计模式

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

于 2013-09-23T14:17:35.537 回答