Question

我正在寻找一种创建common.js的方法，如果可以的话，它包含一些在层次结构中更下层的其他js脚本中使用的功能。

通常，我只需要声明如下函数：function x(){...}，稍后再从其他js中调用。但是，当我尝试使用Uglifyjs解析和合并所有.js文件时，我在使用这种方法时遇到了一些麻烦。经过一番研究，我发现使用javascript modules有一些好处解决我的丑陋问题并努力实现最佳实践。

我在这里找到了使用模块的简洁解决方案： Javascript : Best way to declare functions to be used globally?

符合我需要的代码：

模块部分的定义不正确...这是一个经过整理的示例。

window.MainModule = (function($, win, doc, undefined) {
    var modules = {};

    // -- Create as many modules as you need ...
    modules["alerter"] = (function(x,y){
        var someFunction = function(){ alert(xy); };

        return { 
            init: someFunction
        };
    }());

    modules["alerter2"] = (function(){
        var someFunction = function(){ alert('I alert second'); };

        return { 
            init: someFunction
        };
    }());

    return { 
        init: function(key){
        modules[key].init();
        }
    };
}(jQuery, this, document));

$(window.MainModule.init['alerter']);

我需要帮助的问题是我想初始化module['alerter']并为该函数提供参数

modules["alerter"] = (function(x,y){
    var someFunction = function(){ alert(xy); };            
    return { 
        init: someFunction
    };
}());

通过使用$(window.MainModule.init['alerter'])。

我试图在对我来说还很陌生的领域中保持具体。我当然感谢您的帮助。

Answer 1

如果您的项目支持es6，则可以使“ mainModule.js”具有以下内容：

const alerter = function(x,y) {alert(x,y);};
const alerter2 = function() {alert('I alert second');};
export default {
  alerter,
  alerter2
}

在需要使用alerter或alerter2的文件中，您只需：

import {alerter, alerter2} from 'path/to/mainModule.js';
alerter(param1, param2); 
alerter2();

由于您具有此“ init”方法，因此我想您要创建“ aleter”和“ aleter2”类。您也可以使用javascript类使其正常工作。 https://caniuse.com/#search=Class

Answer 2

为什么不执行以下操作：

window.MainModule = (function($, win, doc, undefined) {
    var modules = {};

    // -- Create as many modules as you need ...
    modules["alerter"] = (function(){
        var someFunction = function(x,y){ alert(x+y); return this;};

        return { 
            init: someFunction
        };
    }());

    modules["alerter2"] = (function(){
        var someFunction = function(){ alert('I alert second'); return this;};

        return { 
            init: someFunction
        };
    }());

    return { 
        module: function(key){
          return modules[key];
        }
    };
}(jQuery, this, document));

然后您可以用这种简单的方式来称呼它：

window.MainModule.module('alerter').init(1,2).init(2,3).init(3,4); 
window.MainModule.module('alerter2').init().init();

Answer 3

我最终用minify实现了“ babel”，以支持es6并解决.ish文件解析/混搭的问题。谢谢您的好回答：）

Javascript：使用模块声明要在全局使用的功能

3 个答案: