0

哦，嗨，我看到了一些关于这个主题的有趣帖子，但我认为这是一个非常私人的问题，需要定制的答案。所以我问你，为一个需要更加通畅的 Javascript 插件组织我的代码的最佳方法是什么。

所以我的代码看起来像这样：

    var myApp = (function(){
        //here are my global methods or variables
        var self = this;
        return {
            method1:function(){}
            method2:function(){}
            method3:function(){}
    }

   })() || (myApp = {})
myApp.method1();

我执行调用或使用我的应用程序的整个代码的方法 1。我想我可以使用 addEventListener 方法添加和加载事件来执行这个方法1，我想我的代码可以有更好的组织。我想确切地说我的插件有点小，比如 200 条 javascript 代码通道，而且它必须是 Vanilla js。在我看来，它在网站的单个页面上使用，不需要做一个名为“new”的原型类。

4

2 回答 2

1

这实际上取决于您的项目以及您想要获得的内容。有几种模式可以帮助您更好地组织和维护代码。
一方面，我使用了多年来让自己感到舒适的模式组合。这是我的应用程序模块
的 样板：

;(function(global, udnefined){

    var app = global.app || {},
        moduleName = 'util',
        module = app[moduleName] || {};

    // "private" vars
    var version = "1.2";

    // fake "private" members (the udnerscore naming convention)
    module._bindEventHandlers = function(){
        // code here

        // for chainability purposes
        return this;
    }

    // "public" method
    module.someMethod = function(){


        // for chainability purposes
        return this;
    }

    // "public" method
    module.someOtherMethod = function(){


        // for chainability purposes
        return this;
    }

    // the init method
    module.init = function(){
        this
            ._bindEventHandlers()
            .someMethod();
    }

    app[moduleName] = module;
    global.app = app;

})(this);

然后，在您的应用程序中（在应用程序初始化或实际需要模块时）您可以简单地调用：

app.util.init();
app.util.someOtherMethod();

提供的模块对于创建新模块具有高度可重用性，因为大多数模块应该有一个初始化逻辑（init方法），它们中的大多数会监听一些事件（无论是 dom 还是自定义事件）——_bindEventHandlers方法——并且它不会污染带有变量的全局命名空间（它只是将一个对象添加到主应用程序）。

于 2013-01-21T10:51:37.930 回答
1

我用了一些东西。一切都取决于我需要完成的事情

(function(app, undefined){ 
  var module = app.module = (function(){
    var privatestuff

    return {}
  }())

  var singelton = app.singleton = (function(){
    var Module = function(){}

    module.prototype.method1 = function(){}

    return new Module()
  }())

  var ModulePrototype = app.ModulePrototype = function(){
    var Module = function(){}

    module.prototype.method1 = function(){}

    return Module
  }
}(myApp = window.myApp ||{}))
于 2013-01-21T11:08:06.807 回答