Javascript 模块模式、原型和 Google Closure

2023-12-24

我无法让此代码结构在 Google Closure 编译器的混淆中幸存下来。这是一些示例代码:

var MyModule = (function()
{   
    function myModule()
    {
        // Constructor
    }

    function moduleFoo(url)
    {
        // Method
    }

    function moduleBar()
    {
        // Method
    }

    myModule.prototype = {
        constructor: myModule,
        foo: moduleFoo,
        bar: moduleBar
    };

    return myModule;

})();

在我的代码的其他地方,我需要能够编写如下内容:

var myMod = new MyModule();
myMod.foo();
myMod.bar();

然而,编译器正在重命名所有内容(如预期)。混淆后,如何使我定义的原型在代码中的其他位置可用?我尝试过导出如下:

// In place of the prototype object above
myModule.prototype['constructor'] = myModule;
myModule.prototype['foo'] = moduleFoo;
myModule.prototype['bar'] = moduleBar;

window['myModule'] = myModule;

但是,当调用原型方法或执行相应的闭包时,事情似乎就会崩溃。

任何帮助表示赞赏。


这种确切的模式不适用于使用 ADVANCED_OPTIMIZATIONS 的闭包编译器。相反,您需要稍微重构您的代码:

/** @constructor */
function MyModule()
{
    // Constructor
}

(function() {
    function moduleFoo(url)
    {
        // Problem using "this" keyword. Will require @this annotation.
    }

    MyModule.prototype = {
        foo: moduleFoo
    };

    MyModule.prototype.bar =  function() {
        // "this" keyword works fine.
    };
})();

Or like:

/** @const */
var MyNamespace = {};

(function() {
    /** @constructor */
    MyNamespace.MyModule = function() {};

    MyNamespace.MyModule.prototype = {
        constructor: function() {},
        foo: function(url) {},
        bar: function() {}
    };
})();

使用上述任一方法,您的导出应该可以正常工作。

注意:第二个选项仅适用于从最新源构建的编译器,因为它涉及上周刚刚修复的错误。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript 模块模式、原型和 Google Closure 的相关文章

随机推荐