Question

我有一个看起来像这样的js文件：

$(document).ready() {
    // Mostly DOM manipulation operations
    functionOne();
    functionTwo();
    functionThree();
    ...
}

我想要实现的是在一个对象中封装和组织所有函数，并创建逻辑，以便只在特定页面上调用它们。我开始写这样的东西：

(function( window, document, $, undefined) {
    var MyNamespace = {};

    // Cache these to local scope
    MyNamespace.$window = $(window);
    MyNamespace.$document = $(document);

    // Functions
    MyNamespace.functionOne = function() {
        ...
    };

    MyNamespace.functionTwo = function() {
        ...
    };
})( window, window.document, window.jQuery );

我想知道我是否朝着正确的方向前进，如果有更好的方法可以使用我尚未开始实现的页面特定逻辑（我已经有一个页面标识符可用）。我看过this book written by Addy Osmani，只有看起来与我想要达到的相似的是Command模式，但我仍然不相信它是否是正确的选择。

Answer 1

你正在寻找的是正常OOP意义上的一类。我个人使用以下架构：

var OPTIONS = {
    selectorA: '.js-xxx'
};

var MyClass = function(el) {
    this.el = el;
    this._init() // private function called
};

MyClass.prototype._init = function () {
    // Do some stuff
};

MyClass.prototype.publicFunction = function() {
    // Do exposable stuff here
}

window.instance = new MyClass(document.querySelect('#myElement'));

为了加载这些模块，您应该需要requireJS或其他AMD加载程序。

使用什么JavaScript设计模式/通用实践来组织具有页面特定调用的多个功能

1 个答案: