0

何百ものjQueryコードスニペットがあり、些細で難解で、時には間違っています。自己完結型の完全な例はめったにありません。Crockford クロージャーを使用するこのコードは OK で、ready() 関数に正しく配置されていますか? そうでない場合、どのように改善または修正する必要がありますか? これはやり過ぎですか？最終的に単純なマイクロコントローラーをシミュレートするプログラム ロジックからユーザー インターフェイスを分離しようとしています。この例では、ステップ ボタンが押されたときにプログラム カウンターをインクリメントします。それは正常に動作します。

// ==================================================================
$(document).ready(function(){
    // ==============================================================
    // The simulator code - NO UI CODE HERE
    // ==============================================================
    var sim = (function(){
        // Private vars
        var pc = 0;    // Program Counter

        // Public functions
        return {
            step: function(){
                pc += 1;
                return pc;
            }
        }
    }());
    // ==============================================================
    // jQuery UI Code - NO SIMULATOR CODE HERE
    // ==============================================================
    var ui = (function($){
        // Private vars
        var step = $('#step'),    // <button id="step">Step</button>
            pc   = $("#pc");      // <p id="pc">Program Counter = 0</p>

        // Private functions
        step.click(function() {
            pc.html('Program Counter = ' + sim.step());
        });
    }(jQuery));
});
// ==================================================================
4

2 に答える 2

0

あなたのコードは、アプリケーションをレイヤー間で分割する方法の非常に良い例です。私はコード内の多くのインデントが好きではありません - どんな意図でもより多くのロジックを管理しているようです.

わずかな変更のみ

$(init); // shortcut for $(document).ready()

function init() {
    // ==============================================================
    // The simulator code - NO UI CODE HERE
    // ==============================================================
    var sim = (function(){
        // Private vars
        var pc = 0;    // Program Counter

        // Public functions
        return {
            step: function(){
                return pc += 1;
            }
        }
    }());
    // ==============================================================
    // jQuery UI Code - NO SIMULATOR CODE HERE
    // ==============================================================
    var ui = (function(sim){
        // Private vars
        var $step = $('#step'), // variable with $ to mark than it contain jQuery collection
            $pc   = $("#pc");

        // Private functions
        $step.click(function() {
            $pc.html('Program Counter = ' + sim.step());
        });
    }(sim)); // pass sim as dependency
}

init メソッドによるバリエーション

$(init);

function init() {
    var sim = simlulator();
    ui(sim);
}

function simlulator() {
    var pc = 0;

    return {
        step: function () {
            return pc += 1;
        }
    };
}

function ui(sim) {
    var $step = $('#step'),
        $pc = $("#pc");

    $step.click(function () {
        $pc.html('Program Counter = ' + sim.step());
    });
}

そして、2 つのシミュレーターによるいくつかのバリエーション: http://jsfiddle.net/vw9kN/

于 2014-06-23T00:46:05.573 に答える
0

この有用なアドバイスに基づいて、名前空間内で自己完結型の完全な作業バージョンを次に示します。個別のソース コード ファイルに簡単に分割できますが、ここでは個別のファイルを 1 つにまとめています。

これは、初心者が理解する可能性があり、.ready() 関数のショートカットなしで、適​​切に構造化された小さなプロジェクトの jQuery コードの「聖杯」の探求です。

http://jsfiddle.net/nbauers/pu4bK/27/

私たちはまだそこにいますか？

// ==========================================
// Make a Name Space
// ==========================================
var myApp = myApp || {};
// ==========================================

// ==========================================
// simUI.js // User Interface Functionality
// ==========================================
myApp.ui = function (sim) {
    var $step     = $('#step'),        // A Button
        $assemble = $("#assemble"),    // A Button
        $source   = $("#source"),      // Source Text Area
        $lst      = $("#lst"),         // List Text Area
        $pc       = $("#pc");          // A Paragraph

    // ======================================
    // Single Step the Program
    // ======================================
    $step.click(function () {
        $pc.html('Program Counter = ' + sim.step());
    });
    // ======================================
    // Assemble the Source Code
    // ======================================
    $assemble.click(function () {
        $lst.val(sim.assemble($source.val()));
    });
    // ======================================
}
// ==========================================

// ==========================================
// simCore.js // Simulator Functionality
// ==========================================
myApp.simlulator = function() {
    var pc  = 0;

    var step = function () {
        return pc += 1;
    };

    var assemble = function(src) {
        step();
        return 'HELLO ' + pc + ' ' + src;
    };

    return {
        step:     step,        
        assemble: assemble
    };
}
// ==========================================

// ==========================================
// simInit.js // Initialise the environment
// ==========================================
myApp.init = function() {
    myApp.sim = myApp.simlulator();
    myApp.ui(myApp.sim);
}
// ==========================================
$(document).ready(function(){
    myApp.init();
});
// ==========================================
于 2014-06-24T11:43:23.493 に答える