3

一段时间以来一直在研究 js 模块模式以满足“某些网站”不断升级的需求。本质上，我只需要一种对脚本进行分组/封装的好方法，以及有时需要 OO 模式。

我有一个工作正常的结构，但我对它的某些部分不满意......所以我正在重构它。这是更新的模式：

(function (global) {
    var M = {
        VERSION : 1.0
    };

    global.M = M;

    //jQ document.ready()
    global.onload = function(){
        console.log('M VERSION: %s', M.VERSION);
        var main = new M.Main();
    };

    M.Main = function(){
        var _class1;
        var _class2;
        var _class3;

        function _init(){
            _class1 = new M.Class('foo','baz');
            console.log('_class1.param2 : %s', _class1.getParam() ); //works

            _class2 = new M.OtherClass('faz','boo');
            _class2.setParam('Boozaz');
            console.log('_class2.param2 : %s', _class2.getParam() ); //works

            _class3 = new M.Class('fuz','boz')
            console.log('_class3.param2 : %s', _class3.getParam() ); //works

            _class3.prototype = new M.Super();
            console.log('_class3.__param : %s', _class3.prototype.getProtected() ) //works
        }

        _init();
        return true;
    };

    M.Super = function(){
        var __param = 'jQ';
        M.Super.API = {
            getProtected : function(){ return __param }
        }
        return M.Super.API;
    }

    M.Class = function( p1, p2){
        var _param1;
        var _param2;

        function _init(){
            _param1 = p1;
            _param2 = p2;
        }

        function _getParam(){
            return _param2;
        }

        function _setParam(e){
            _param2 = e;
        }

        M.Class.API = {
            getParam : function(){ return _getParam(); },
            setParam : function(e){ _setParam(e) },
            publicMethod : function(){  ...  }
        }

        publicMethod() //fails
        this.publicMethod() //fails, this scopes to DOM window
        M.Class.API.publicMethod() // works, but is kludgy

        _init();
        return M.Class.API;
    };

})(typeof window === 'undefined' ? this : window);

这会产生一个令人满意的 DOM 结构（通过 firebug 检查）——但我this在一个特定区域中失去了范围 = 在内部调用返回对象的“公共”方法。

publicMethod() //fails
this.publicMethod() //fails, this scopes to DOM window
M.Class.API.publicMethod() // works, but kludgy syntax

在此模式的前一次迭代中，“类”对象是自执行的，并且对的引用this保持不变：

    M.Class = function( p1, p2){
        var _param1;
        var _param2;
        var _root; 

        function _init(){
            _root   = this; //this gets referenced for later usage
            _param1 = p1;
            _param2 = p2;
        }

        function _getParam(){
            return _param2;
        }

        function _setParam(e){
            _param2 = e;
        }

        M.Class.API = {
            init     : function(){ _init();    },
            getParam : function(){ return _getParam(); },
            setParam : function(e){ _setParam(e) },
        }

        console.log('getParam, internal :%s', _root.getParam() ) //success
        return M.Class.API;
    }();

  M.Class.init();

但是，在重构模式中，我希望通过 实例化这些“类” new，以获得对执行顺序的更多控制。

我已经阅读了很多很多关于 js 中词汇范围的相当令人麻木的主题的文章......但没有得出任何结论。

我应该如何维护this更新后的模块模式的范围？

4

2 回答 2

2

这是每个人在编写库或模块时都会问的哲学问题之一：函数应该使用this还是变量名来引用容器对象？答案是：视情况而定。

如果您知道函数将始终使用正确的this值调用（例如原型上的方法），请使用this。但是，如果可以以任何其他方式调用该函数，则使用变量名。如果您在稍后阶段决定更改名称，这是一个非常简单的搜索和替换练习。并且调用myLib.utils.someFn比调用this.someFn更清晰。如果你觉得打字太多，你可以随时恢复var sF = myLib.utils.someFn并从那里开始。

编辑

要回答您的问题：

publicMethod() //fails

当前范围内没有publicMethod标识符，它将失败。

     this.publicMethod() //fails, this scopes to DOM window

如果调用是 M.Class()，那么这是对M的引用。如果您正在获取window，那么您正在以其他方式调用该函数。

     M.Class.API.publicMethod() // works, but is kludgy

因为这就是你设置它的方式。如果您不喜欢它，请以其他方式设置它。

最后：

)(typeof window === 'undefined' ? this : window);

似乎是那些似乎在网络上激增的神秘咒语之一。什么目的？如果意图是将全局对象的引用传递给函数，那么：

)(this);

在任何地方都足够了。上面的目的是确保函数具有对全局对象的引用，因为引用窗口可能会解析为其他对象。包括可能会或可能不会在全局对象中传递的逻辑似乎是一个倒退。在什么情况下最好引用全局对象的（可能重新分配的）窗口属性而不是全局对象本身？

于 2012-02-17T04:48:50.657 回答
1

如果您的所有方法都是“私有的”，除了您手动公开的方法M.Class.API怎么办？

function _getParam(){
  return _param2;
}

function _setParam(e){
  _param2 = e;
}

function publicMethod(){
  console.log("public method");
}

M.Class.API = {
  getParam : _getParam,
  setParam : _setParam,
  publicMethod : publicMethod
}

publicMethod();              // succeeds
this.publicMethod();         // still fails
M.Class.API.publicMethod();  // still works, still is kludgy

您还应该知道，使用new关键字调用该函数时，从函数返回匿名对象可能会产生意想不到的后果。请参阅此堆栈溢出问题。

于 2012-02-17T04:02:30.597 回答