Javascript：使用模块声明要全局使用的函数答案

【问题标题】：Javascript: Declaring functions to be used globally using modulesJavascript：使用模块声明要全局使用的函数
【发布时间】：2018-06-28 07:41:42
【问题描述】：

我正在寻找一种方法来拥有一个 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'])。

我试图具体说明一个对我来说相当新的领域。当然，我很感谢您的帮助。

【问题讨论】：

你有什么浏览器兼容的要求，或者你有没有使用“babel”之类的东西来支持es6？
最佳情况下，代码应尽可能广泛兼容，即最新版本的 chrome、firefox、safari，即。在这个项目中没有使用任何工具，比如 babel

标签： javascript jquery uglifyjs

【解决方案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

【讨论】：

谢谢你的好回答。我一直在研究像“babel”（如 cmets 中提到的）这样的工具，以使项目 es6 兼容。

【解决方案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();

【讨论】：

【解决方案3】：

我最终用 minify 实现了 'babel' 以支持 es6 并解决 .js 文件的解析/混搭问题。谢谢你的好答案:)

【讨论】：