js中模块化编程思想

Question

今天碰到一个题目：
如果你是一个熟悉模块化打包工具的前端开发者。不考虑使用如require.js等这些已经实现的工具。要求用原生的方法实现，如何引入三个模块,即三个js文件，比如a.js ,b.js和c.js。要求同时引入，然后在执行相应的回调函数。
思路：模块化思想的核心

Answer 1

根据上面那位兄得的答案，顺手写了一下，可能不正确，never mind

就写两个子模块吧，原理应该是一样的

main.js

var opt1 = {
  type: 'GET',
  url: './1.js',
  headers: {
    "Content-Type": "text/plain"
  },
  dataType: "script"
}
var opt2 = {
  type: 'GET',
  url: './2.js',
  headers: {
    "Content-Type": "text/plain"
  },
  dataType: "script"
}

var pro1 = ajax(opt1)
var pro2 = ajax(opt2)

Promise.all([pro1, pro2]).then(function(result) {
  for(var i = 0, len = result.length; i < len; i ++) {
    eval(result[i])
  }
  this.mod1 = mod1
})

function ajax(options) {
  options = options || {};
  options.type = (options.type || "GET").toUpperCase();
  options.async = (options.async == false) ? false : true;
  options.dataType = options.dataType || "json";
  //form-data上传文件可以用{}覆盖默认设置
  options.headers = options.headers || { "Content-Type": "application/json" };
  var xhr = _createXHR();
  var isPost = options.type == 'POST';
  return new Promise(function (resolve, reject) {
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        if (xhr.status == 200) {
          resolve((options.dataType == 'json') ? JSON.parse(xhr.responseText) : xhr.responseText);
        }
        else {
          reject(xhr.status);
        }
      }
    }
    xhr.open(options.type.toUpperCase(), isPost ? options.url : encodeURI(options.url), options.async);
    for (var key in options.headers) {
      xhr.setRequestHeader(key, options.headers[key]);
    }
    xhr.send(isPost ? options.data : null);
  });
  function _createXHR() {
    if (window.XMLHttpRequest) {
      return new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
      return new ActiveXObject('Microsoft.XMLHTTP');
    }
    else {
      alert('Your browser does not support Ajax');
    }
  }
}

1.js

var mod1 = {
  say: function (it) {
    console.log(it)
  }
}

2.js

var mod2 = {
  bark: function () {
    alert('wong wong')
  }
}

然后放在浏览器里面执行：

暂时只想到把模块里的对象放到window上面变全局变量这个方法

至于你说的会向服务器发请求，我觉得一般主模块和子模块都是放在同个服务器上面的，就算主模块要发起请求加载子模块，也是相当于服务器本地加载js文件而已，没什么大问题

仅供参考。

---

刚看了看Promise.all是按顺序同步发出请求，在这里说明一下免得误导，不过都是异步操作，按顺序发出请求也不会相互阻塞

Answer 2

ajax请求js文件后用wrapper包起来eval，我猜是这样。

另外你可以看看node.js的解决方法，把其中的读文件部分换成发请求应该就行了，但模块的解析策略上可能会稍有变动。