jQuery, Crockford闭包新手示例

Question

有数百个jQuery代码片段，琐碎的，神秘的，有时是错误的。很少有一个独立完整的例子。这段使用Crockford闭包的代码是否正确地放置在ready()函数中?如果不是，应该如何改进或修复?这是不是矫枉过正?我试图将用户界面从程序逻辑中分离出来，最终将模拟一个简单的微控制器。此示例在按下Step按钮时增加程序计数器。

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

根据这个有用的建议，这里是一个名称空间内的自包含的、完整的、可工作的版本。它可以很容易地分割成单独的源代码文件，但在这里，这些单独的文件被合并成一个文件。

这是对小项目的"圣杯"的追求，结构充分，jQuery代码，这样新手可能有一些机会理解它，没有快捷方式的。ready()函数。

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

Answer 2

你的代码是一个很好的例子，应用程序可以在层之间进行拆分。我不喜欢代码中有很多缩进——任何意图似乎都是为了管理更多的逻辑。

只有一些变化

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

和两个模拟器的一些变化:http://jsfiddle.net/vw9kN/