模块化开发 调用函数（例如ajax）not defind问题

当我们使用模块化开发时，有可能会遇到类似于这样的问题：

这里的具体代码是调用ajax函数。

出现这样的错误，一般是使用了不存在或者未获取的元素。
但是我们在调用之前已经在主js中引入了含有ajax函数的Ajax.js：

require("./Ajax.js");

并且配置了文件，将Ajax.js打包进了主js。按照我以前的理解，此时就相当于C语言的分模块一样，只要在主程序里引入了其他需要的模块，就可以随意使用了。

但是现在并不是这样的，出现了错误。

我们来分析，
首先需要判断： 是否成功引入了Ajax.js。
我们在Ajax.js的第一行打印一下试试：

console.log('asd');

打印出来了，这说明我们的引入和打包并没有问题，Ajax.js文件是确确实实被引进了主js。

在什么情况下函数存在但是调用时却找不到呢？---- 立即执行函数。
Ajax.js被引入后，整个文件作为一个立即执行函数在主js的环境下执行了，这也仍然可以解释为什么console.log(‘asd’);会在主函数里立即打印出来。

那我们针对这一点进行分析：

• 首先，因为立即执行函数执行完就释放。
  所以说，除了console.log这类函数的执行会对页面产生影响外，函数的定义是完全不生效的，它不被执行，且随着立即执行函数的释放而释放。

要解决这个问题

• 我们就应该想办法将需要的函数定义从模块返回到主js里。
  我们介绍两种方法：
  1.exports.变量名=值/函数;
  2.module.exports={属性}
  这两种方法是将模块里的内容通过对象返回给主js函数,相当于将模块里的内容暴露在主js之下。
  需要注意的是：模块里的内容可以通过方法暴露在主js之下，但并没有方法可以将主js里的内容暴露在模块里。如果需要在模块里使用主js的变量，需要在模块里重新获取，需要使用函数，需要在模块里重新引入。
  eg：

exports.a=5;
module.exports={
	a:5;
}

exports.asd=function()；
module.exports={
	asd:function();
}

注释：这两种方法均可以返回对象，且这两种方法实际上是等同的：因为当我们使用exports.a=5;的时候，程序会自动隐式地将它作为对象的属性a:5放进module.exports中。

• 有了返回，我们还需要在主js里面用一个变量来接收返回的内容，之后再调用时，直接用这个变量就可以了。

可是为什么非要通过对象来传递内容呢？
1.程序确实提供了这种方法。
2.对象里面可以包含多个属性和方法，因为这一特性我们可以通过一个对象同时传递多种不同类型的信息。

两种方法的使用：
exports和module.exports两种方法本质上是一样的，但是在不同的情况下使用也会带来不同的便利。
module.exports用于需要一次性传递多种信息，前面也说过了，通过一个对象来简化我们的操作。
exports用于在整个程序中，有些需要发送，有些不需要发送，这种断断续续的，我们就用很多个exports来代替。

最后附上示例代码：
Ajax.js

exports.ajax=function ajax(object){
    xhr=new XMLHttpRequest();
    xhr.withCredentials = true;//携带cookie
    xhr.addEventListener("readystatechange",function(){
        if(xhr.readyState==4){
            var status=xhr.status;
            if(status>=200&&status<300){
                object.success(xhr.responseText);
            }else{
                object.fail(status);
            }
        }
    })
    var message=transfrom(object.data);
    if(object.type=="get"){
        xhr.open("get",object.url+"?"+message,object.async);
        xhr.send(null);
    }else if(object.type=="post"){
        xhr.open("post",object.url,object.async);
        xhr.setRequestHeader("Content-Type","application/X-www-form-urlencoded");
        xhr.send(message);
    }
    function transfrom(data){
        var arr=[];
        for(thing in data){  //用thing来接收data的属性名
            arr.push(encodeURIComponent(thing)+"="+encodeURIComponent(data[thing]));
        }
        return arr.join("&");
    }
}

主js：

var ajax=require("./Ajax.js").ajax;
//后续代码可以直接调用ajax