0

嘿伙计们，我处理这种“模式”已经有一段时间了，但我无法欣赏这种架构选择。在我看来，代码很糟糕而且毫无意义。

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

所有这些在文件之外声明的 IIFE 是否都准备好了？这是一种模式还是只是 Spaghetti JS？任何弱点或架构错误？

索引.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/scope.js'></script>


</html>

范围.js

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


    var 
        $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'
        };


    var init = function() {

        $second.hide(); // init ops
    }

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

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

    appendChunk();
    animateChunk();

    $M.one = init;
})();


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

    var 
        $second = $('#second'),
        $chunk = $("#chunk"),
        animationTime = 1000,
        style = {
            'border':'2px solid red',
            'height': '150px',
            'width': '150px'
        };

    var init = function() {

        $second.hide(); // init ops
    }

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

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

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

    $M.two = init;
})();


$(document).ready(function () {

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

});
4

2 回答 2

2

注意：在撰写本文时，您的问题中没有代码。它现在在那里，见下文。

所有这些在文件之外声明的 IIFE 是否都准备好了？

一点也不，它们对于范围界定很有用。

我通常不使用 jQuery ready，因为我更喜欢将script元素放在页面底部，所以我使用 IIFE 来避免使用任何全局变量并noConflict兼容：

(function($) {
    // My code here
}(jQuery);

（现在问题中有代码......）

但是，如果您担心不良做法，则应将其标记出来：

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

这依赖于隐式全局的恐怖，并且单独地与 ES5 的“严格”模式不兼容。

这是您可以在这种情况下使用的模式：

// By default, global scope is not strict
(function(global) {
    // Now we turn on strict
    "use strict";

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

    // ...

})(this);

或者在浏览器上，只需使用window：

(function() {
    // Now we turn on strict
    "use strict";

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

    // ...

})();
于 2013-09-24T12:28:48.467 回答
1

大多数人（或者至少是我！）出于以下原因使用 IIFE：

将变量包装在函数中，这样它们就不会成为全局变量

这很有用。您将使用其他文件的无用变量污染您的浏览器环境 - 因此您将所有代码包装在 IIFE 中并且它们不会全局化，同时可以访问函数范围内的所有代码。基本上，这是在 JS 中获取“私有变量”的一种方式。

通过削减一些全局变量来减小缩小尺寸

例如，当您执行以下操作时：

(function( window, document, undefined ) {
  // ...
})( window, document );

考虑到您确实在该范围内使用了很多这 3 个变量，您的最终缩小文件将小得多：

(function( a, b, c ) {
  // code with all references to window, document and undefined renamed
})( window, document );

我希望这可以帮助您理解为什么要使用 IIFE。
此外，阅读Ben Almann 对他们的评价总是很好。他是Grunt.js的创造者:)

于 2013-09-24T12:40:40.577 回答