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

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

}