jQuery 模式 - 这是有效的还是有更好的方法？

Question

我已经陷入了这种 javascript 组织中，并且想知道我是否错过了这里的要点，或者是否有更优雅的方法来做到这一点。

基本上，我将所有内容包装在函数（对象）中，然后在该对象上设置方法，然后实例化包装器对象的实例并传入任何选项和依赖项。

我预感有一种方法可以自动运行 .init() 以及一些其他可以进行的调整。我做对了吗？

function AppModuleCore(){

    var AppModuleCore = this; //keep internals sane

    // Various global vars, objects
    AppModuleCore.defaultOptions = {};

    AppModuleCore.init = function(opts) {

        // todo: that thing where you extend an options object a la juery

        AppModuleCore.bindEvents();

    };

    AppModuleCore.bindEvents = function() {

        // bind events here, send to functions within AppModuleCore.<FUNCTIONNAME>();

        // Example:
        $("a#clicker").unbind("click");
        $("a#clicker").click(function(event){

            AppModuleCore.handleClickerClick(event);

        });

    };

    AppModuleCore.handleClickerClick = function(event){

        alert("clicker was clicked");

    };

}

// --------------------------------------------------------------------
// instantiate AppModuleCore object and initialize with opts, 
// dependency injection
// --------------------------------------------------------------------
$(document).ready(function(){
    AppModuleCore = new AppModuleCore;

    var options = {};
    AppModuleCore.init(options);

});

Answer 1

好的，一些要点
时，将代码包装在构造函数中才有意义。

1. 只有当您要实例化多个对象
2. 您要调用的对象上有“公共”方法，

您的代码不会表现出这些特征。我这样说是因为您的 jQuery 选择器 a#clicker 是硬编码的，所以我假设您不想将相同的事件多次绑定到它们？

你最好使用一个函数（也许是你的 init ）或一个对象文字来限制你的范围。

function init( options ) {

    var defaultsOptions = {};    
    var privateVar = 'only in this scope';

    //extend your default options with options here
    //using jquery
    options = $.extend( defaultOptions, options );

    // this function is completely private to this scope
    function privatefunction() {
        //do stuff
    }

    function handleClickerClick( event ){
        alert("clicker was clicked");
    }

    // you don't need to wrap your handler in an anonymous function unless
    // you're doing some work to the event before forwarding:- just give a 
    // reference to your handler
    // the handler has access to other members of this scope, we're in a closure
    $(options.selector).click( handleClickerClick );

    //etc

}

init( {selector: 'a#clicker'} );

在风格上：当你使用与构造函数相同的名称来别名 this ，然后添加方法到别名，乍一看就像您正在向构造函数添加静态方法。这可能会让稍后查看您的代码但没有注意到别名的人感到困惑。

function C() {

    // a static method i.e a property of the constructor, C not objects created with it
    // it is a bit wierd that it is defined in the constructor but not unheard of
    C.staticMethod = function(){};

    //quite plainly a method of objects of this type, easy to understand
    this.method = function(){};

}