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>

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

});
4

2 に答える 2