Question

嘿伙计我已经有一段时间处理这种“模式”，但我不能理解这种建筑选择。在我看来，糟糕而无意义的代码。

我附上一个代码示例，以便更具说明性。

在文件外宣布的所有IIFE是否都是不好的做法？这是一个模式还是只是Spaghetti JS？任何弱点或架构错误？

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


</html>

scope.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();

});

Answer 1

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

在文件之外宣布的所有IIFE是否都是不好的做法？

完全没有，它们对范围界定很有用。

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

noConflict

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

但如果你担心不良行为，你应该举报：

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

依赖于The Horror of Implicit Globals，并且单独与ES5的“严格”模式不兼容。

这是一种可以用于这种情况的模式：

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

或者在浏览器上，只需使用// 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

Answer 2

大多数人（或至少是我！）出于以下原因使用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的原因另外，阅读what Ben Almann's have to say about them总是好的。他是Grunt.js的创造者：）

JQuery IIFE外部文件准备好 - 坏模式

2 个答案:

在函数中包装变量，因此它们不会全局

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