js中模塊化編程思想

ajax請(qǐng)求js文件后用wrapper包起來eval，我猜是這樣。

另外你可以看看node.js的解決方法，把其中的讀文件部分換成發(fā)請(qǐng)求應(yīng)該就行了，但模塊的解析策略上可能會(huì)稍有變動(dòng)。

根據(jù)上面那位兄得的答案，順手寫了一下，可能不正確，never mind

就寫兩個(gè)子模塊吧，原理應(yīng)該是一樣的

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上傳文件可以用{}覆蓋默認(rèn)設(shè)置
  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')
  }
}

然后放在瀏覽器里面執(zhí)行：

暫時(shí)只想到把模塊里的對(duì)象放到window上面變?nèi)肿兞窟@個(gè)方法

至于你說的會(huì)向服務(wù)器發(fā)請(qǐng)求，我覺得一般主模塊和子模塊都是放在同個(gè)服務(wù)器上面的，就算主模塊要發(fā)起請(qǐng)求加載子模塊，也是相當(dāng)于服務(wù)器本地加載js文件而已，沒什么大問題

僅供參考。

剛看了看Promise.all是按順序同步發(fā)出請(qǐng)求，在這里說明一下免得誤導(dǎo)，不過都是異步操作，按順序發(fā)出請(qǐng)求也不會(huì)相互阻塞