jQuery，克罗克福德关闭新手示例

Question

There are hundreds of jQuery code snippets, trivial, arcane and sometimes wrong. Rarely is there a self contained complete example. Is this code using Crockford closures OK and correctly placed in the ready() function? If not, how should it be improved or fixed? Is this overkill? I'm trying to separate the user interface from the program logic which will eventually simulate a simple microcontroller. This example increments a Program Counter when the Step button is pressed. It works OK.

// ==================================================================
$(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));
});
// ==================================================================

Answer 1

Your code is very good example how application can be split between layers. I don't like many indentations in the code - any intention seems to manage more logic.

Only a few changes

$(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
}

Variation with init method

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

And some variation with two simulators: http://jsfiddle.net/vw9kN/

Answer 2

Based on this useful advice, here is a self-contained, complete and working version inside a namespace. It can be split into separate source code files easily but here the separate files are combined into one.

This is the quest for the "Holy Grail" of small-project, adequately structured, jQuery code, written so newbies might have some chance of understanding it and without a short cut for the .ready() function.

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

Are we there yet?

// ==========================================
// 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();
});
// ==========================================