跳坑之js调用另一个js文件中函数

最近在做electron的内容，但是踩了很多坑，其中一个坑：

问题背景：对于进程间的通信，实现带参数的输入输出，就是直接写一些函数，可以实现其他文件对于函数的调用

问题内容：其中一个js是实现功能函数（renderer.js），也就是带参数的输入输出，另一个js是调用这些功能（hello.js)，那么如何实现这个调用过程呢？

我的hello.js和renderer.js在同一个文件夹下面。

来尝试一下网上的方法：

方法一：在html文件中body标签后加入js文件，在index.html中的body标签（与之间插入所引用的hello.js），代码如下：

然后，对于hello.js文件，为了调用renderer.js中的函数，需要在hello.js中添加以下代码：

new_element = document.createElement("script");
new_element.setAttribute("type","text/javascript");
new_element.setAttribute("src", "renderer.js");
document.body.appendChild(new_element);

function testBtn(struct, buttonId, msg){
    //renderer.js中函数为test
    test(struct, buttonId, msg);
  }
testBtn('click', 'asynchronous message', 'ping');

对于代码，网上解释如下：
让我们来分析一下关键的几句代码：首先，我们利用document.createElement("script")生成了一个script的标签，设置其type属性为text/javascript，src为renderer.js(这里的renderer.js同hello.js放在同一个目录，也可放在不同的目录)。最后将这个标签动态地加入body中。如此一来，我们就可以调用到不同js文件中的方法了。

注意：一定要放在body下面。
因为hello.js中用到了body（document.body.appendChild(new_element);）
如果将引如hello.js的代码放在body上面，也就是说，
进入页面后，还没有生成body就已经执行hello.js里的document.body.appendChild(new_element);了。
这时body不存在就会抛javascript错误。

而实际效果呢，并不行（至少我没有测试成功，目前还不知道原因出现在哪里，求告知！！）

方法二：在调用者程序的开始直接加入要被调用的js文件，代码如下：

//加入下面的代码
document.write("");
//调用函数
test('click', 'asynchronous message', 'ping');

结果呵呵了。。。。。还是不行。。。。。又是一头雾水

方法三：在html文件中加入两个脚本程序，注意，加入的位置在和两个标签之间，（也有的在两个标签之间加入的），代码如下：

之后在hello.js中直接调用函数就行。

test('click', 'asynchronous message', 'ping');

然后呢？如果说前两种方法不行我还信了，毕竟没有看到执行结果，但是第三种人家明明成功了，而且两种加入的方法都成功了，到我这儿走不通了，几近崩溃。。。

冷静冷静，如果你试了试前面的方法也不行，一定要淡定，我也不知道怎么想的，然后试了一下下面这个方法。。竟然成功了！！

方法四：首先，在方法三的基础上，在html中直接利用require，将两个js文件直接加载进去，然后就可以实现调用了。
html中的代码：

//首先，方法三中的加入内容不变

  
  
  
    

    //方法四加入的内容
    
  
 

至于调用函数的代码，与方法三一样，直接在hello.js中调用即可。

解释解释，知其然必须知其所以然（个人理解）：
对于方法三，为什么不行呢？我打开electron调试工具的时候，第一次加载页面时，输出了这个信息（极为重要）：
test is not defined----我的test函数没有被定义，为什么没有被定义，我明明已经写好了的，看一下方法三中的加载顺序，先加载的hello.js，之后加载的renderer.js，也就是说，先加载了的hello.js中的test方法没有被定义，然后自然函数执行不成功。
看了看程序，发现方法四的加载顺序与方法三完全相反，在查看了文档之后，发现方法三与方法四的加载的最终结果并没有什么不同，只不过：require引入的的文件，内部声明的最外层变量不属于全局变量，而script引入的属于全局变量。

最重要的信息：
如果用script引入需要考虑引入顺序，避免变量冲突和前置依赖。考虑顺序，考虑顺序，考虑顺序，重要的事情说三遍（之后自己也试了试，把方法三的顺序颠倒，发现可以，之所以没删除这些内容，是想记得更清，也避免让更多的人入坑）

哈哈哈哈，脑子真的被门给夹了，这个坑跳的真的值（说的我自己都信了）
不过，以方法三加载脚本程序的方法并不好:
（来自阮一峰先生的日志：http://www.ruanyifeng.com/blog/2012/11/require_js.html) 首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

最后，介绍一种我最喜欢的方式，对于功能的封装这种方式应该再好不过了，exports和require大法好。

在nodejs中，提供了exports 和 require 两个对象，其中 exports 是模块公开的接口，require 用于从外部获取一个模块的接口，即所获取模块的 exports 对象。而在exports抛出的接口中，我们可以抛出变量或者函数。
如果你希望你的模块就想为一个特别的对象类型，请使用module.exports；如果希望模块成为一个传统的模块实例，请使用exports.xx方法；module.exports才是真正的接口，exports只不过是它的一个辅助工具。最终返回给调用的是module.exports而不是exports。
总而言之，二者的关系是：

    exports 是指向的 module.exports 的引用，二者指向同一块内存
    module.exports 初始值为一个空对象 {}，所以 exports 初始值也是 {}
    require() 返回的是 module.exports 而不是 exports

下面给出代码：
renderer.js中使用exports导出函数：

//在这里面写好函数的封装，然后在hello.js中调用
var test = function(struct, buttonId, msg){
    const asyncMsgBtn = document.getElementById(buttonId);
    asyncMsgBtn.addEventListener(struct, function(){
        switch(struct){
            case 'click':
                ipc.send('asynchronous-message', msg);
                console.log("调用成功");
                break;
            default:
                console.log('Error!!!')
        }
    })
}
//这种方式是成功的
exports.test = test;
//这种方式也是可以得
//module.exports.test = test;

而hello.js中对于代码的使用如下：

//利用require加载模块
const renderer = require('./renderer')

renderer.test('click', 'asynchronous message', 'ping');
renderer.test('click', 'changeView', 'change');

可以说，这种方式完全符合我们程序封装的概念，思路统一，结构规整，个人最爱。而且，上面的程序中两种方法都可以输出成功，其原因就在于：
exports变量是在模块的文件级别作用域内有效的，它在模块被执行前被赋于 module.exports 的值。它有一个快捷方式，以便 module.exports.f = ... 可以被更简洁地写成exports.f = ...。 注意，就像任何变量，如果一个新的值被赋值给exports，它就不再绑定到module.exports(其实是exports.xx会自动挂载到没有命名冲突的module.exports.xx)
而且，对于require函数，exports只是函数内部一个局部变量，最后返回的仍是module.exports，这应该就是exports称为module.exports的引用所在。代码内容如下（应该很清晰了）：

function require(...) {  
  var module = { exports: {} };
  ((module, exports) => {
    // 你的被引入代码 Start
    // var exports = module.exports = {}; (默认都有的)
    function some_func() {};
    exports = some_func;
    // 此时，exports不再挂载到module.exports，
    // export将导出{}默认对象
    module.exports = some_func;
    // 此时，这个模块将导出some_func对象，覆盖exports上的some_func    
     // 你的被引入代码 End
  })(module, module.exports);
 // 不管是exports还是module.exports，最后返回的还是module.exports 
  return module.exports;
}

最后，这个坑跳的真的值！！！