Question

有数百个jQuery代码片段，琐碎，晦涩，有时甚至是错误的。很少有自成一体的例子。这个代码是否使用Crockford闭包确定并正确放置在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));
});
// ==================================================================

Answer 1

您的代码是如何在层之间拆分应用程序的非常好的示例。我不喜欢代码中的许多缩进 - 任何意图似乎都在管理更多逻辑。

只有一些变化

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

Answer 2

基于这个有用的建议，这里是命名空间内的一个自包含，完整且有效的版本。它可以轻松拆分为单独的源代码文件，但这里将单独的文件合并为一个。

这是对圣杯＆＃34;圣杯的追求。编写小型项目，结构合理的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();
});
// ==========================================

jQuery，Crockford Closures新手示例

2 个答案: