Question

正在研究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

在此模式的上一次迭代中，“class”对象是自执行的，并且保留了对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的范围？

Answer 1

这是每个人在编写库或模块时都会问的哲学问题之一：函数是否应该使用 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);

随处可见。上述目的是确保函数具有对全局对象的引用，因为引用 window 可能会解析为某个其他对象。包括可能会或可能不会在全局对象中传递的逻辑似乎是向后步骤。在什么情况下，最好引用全局对象的（可能重新分配的） window 属性而不是全局对象本身？

Answer 2

如果您通过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关键字调用该函数时，从函数返回匿名对象可能会产生意想不到的后果。请参阅this Stack Overflow question。

Javascript模块模式 - 失去了这个范围

2 个答案:

修改