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

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

javascript jquery architecture design-patterns

Javascript jQuery模式-这是有效的还是有更好的方法？,javascript,jquery,architecture,design-patterns,Javascript,Jquery,Architecture,Design Patterns,我已经进入了javascript的组织中，我想知道我是否在这里遗漏了要点，或者是否有一种更优雅的方法来实现这一点基本上，我将所有内容包装在一个函数（对象）中，然后在该对象上设置方法，然后实例化包装对象的实例，并传递任何选项和依赖项我有一种预感，有一种方法可以自动运行.init（），还有一些其他的调整。我做得对吗 function AppModuleCore(){ var AppModuleCore = this; //keep internals sane // Vari

我已经进入了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);

});

函数AppModuleCore（）{
var AppModuleCore=this；//保持内部状态正常
//各种全局变量、对象
AppModuleCore.defaultOptions={}；
AppModuleCore.init=函数（opts）{
//todo:将选项对象扩展为la juery
AppModuleCore.bindEvents（）；
};
AppModuleCore.bindEvents=函数（）{
//在此处绑定事件，发送到AppModuleCore中的函数。（）；
//例如：
$（“点击器”）。解除绑定（“点击”）；
$（“点击器”）。点击（功能（事件）{
AppModuleCore.handleClickerClick（事件）；
});
};
AppModuleCore.handleClickerClick=函数（事件）{
警报（“点击了点击器”）；
};
}
// --------------------------------------------------------------------
//实例化AppModuleCore对象并使用opts初始化，
//依赖注入
// --------------------------------------------------------------------
$（文档）.ready（函数（）{
AppModuleCore=新的AppModuleCore；
var选项={}；
AppModuleCore.init（选项）；
});

好的，有几点
只有在以下情况下，将代码包装在构造函数中才真正有意义

您将实例化多个

在要调用的对象上有“public”方法

您的代码没有显示这些特征。我这样说是因为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(){};

}