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的解决方法，把其中的读文件部分换成发请求应该就行了，但模块的解析策略上可能会稍有变动。