Javascript: 使用模块声明要全局使用的函数

Question

我正在寻找一种方法来获得一个 common.js，如果你愿意的话，它包含一些要在层次结构下方的其他 js 脚本中使用的函数 。

通常我会这样做，只需简单地声明一个像这样的函数：function x(){...} 稍后从其他 js 调用。但是，当我尝试使用 Uglifyjs 解析和混合所有 .js 文件时，我运行使用这种方法遇到了一些麻烦。经过一些研究，我了解到使用 javascript modules 的一些优势解决我的丑化问题并努力实现最佳实践。

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

符合我需要的代码：

The modules section isn't properly defined ... here's a slightly tidied up example.

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" 方法，我猜你想创建 classes "aleter" 和 "aleter2"。您也可以使用 javascript class 使其工作。 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 并解决了 parse/mash .js 文件的 solve:ish 问题。谢谢你的好答案:)

Javascript: 使用模块声明要全局使用的函数

Javascript: Declaring functions to be used globally using modules

javascript

jquery

uglifyjs