js手札--關(guān)于AMD的簡(jiǎn)單分析

frank_fun 發(fā)布于2019-08-19 18:23 / 1121人閱讀

摘要：廢話真多，是的哈而要說清和的二三事，又不是件容易的事，簡(jiǎn)單理解，和指向同一內(nèi)存區(qū)域。而對(duì)于當(dāng)前模塊來說是外部的模塊。參考關(guān)于和的區(qū)別和的區(qū)別這篇文章很不賴。

AMD中define常見的形式

define("alpha" ,["require", "exports", "module"], function(require, exports, module) {
  var foo = require("foo");
  module.exports = exports = function() {
    foo.doSomething();
  }
});

參數(shù)

第一個(gè)是要定義的模塊名字（id）
第二個(gè)是要用到的模塊名，其實(shí)更專業(yè)點(diǎn)講是定義的這個(gè)模塊所依賴的模塊名稱
第三個(gè)回調(diào)函數(shù)，是要定義模塊內(nèi)容

分析define的回調(diào)函數(shù)

分析方法：替換部分代碼進(jìn)行分析

先來把回調(diào)中的require，exports，module替換了看看。

1.替換require

function callback(exports, module) {
  // 假設(shè)foo是最簡(jiǎn)單的對(duì)象，把require("foo")換成最簡(jiǎn)答的對(duì)象看看
  var foo = {
    "doSomething": function() {}
  };

  module.exports = exports = function() {
    foo.doSomething();
  }
}

那么其實(shí)已經(jīng)不難看出，require其實(shí)就相當(dāng)于是個(gè)查詢函數(shù)吧，我給他傳個(gè)對(duì)象名，它就能給我一個(gè)具體的對(duì)象。

var require = function(name) {
  var modules = {"foo": {"doSomething": function() {}}};
  return modules[name] || {};
}

那么整個(gè)代碼可以換成

var require = function(name) {
  var modules = {"foo": {"doSomething": function() {}}};
  return modules[name] || {};
}

function callback(exports, module) {
  var foo = require("foo");
  module.exports = exports = function() {
    foo.doSomething();
  }
}

看起來好像有點(diǎn)道理哦，等會(huì)兒，等會(huì)兒，這里的modules又從哪兒冒出來的，哈哈哈，被發(fā)現(xiàn)了，別急慢慢來

2. 替換exports和module.exports

在替換之前，先來了解下exports和module.exports這兩貨是干啥的，而要了解他們先來看看模塊是啥。

其實(shí)模塊么，簡(jiǎn)單來說就是一個(gè)高級(jí)別的function，輸入，處理，輸出。至于為啥js的模塊化為啥這么困難，這個(gè)問題不是三言兩語(yǔ)就能解釋清楚的，就不展開了（其實(shí)真實(shí)情況是，我也不清楚，哈哈哈）

既然模塊要做輸出，那么輸出什么東西總要知道吧，而module.exports的作用就是這個(gè)，存儲(chǔ)模塊輸出的內(nèi)容。

也就是說，這個(gè)模塊中要給外部使用的東西全放在module.exports里頭了。廢話真多，是的哈- -.

而要說清e(cuò)xports和module.exports的二三事，又不是件容易的事，簡(jiǎn)單理解，exports和module.exports指向同一內(nèi)存區(qū)域。有興趣可以看看exports 和 module.exports 的區(qū)別。

那來改造一下，把module.exports，exports也提煉出來看看

var require = function(name) {
  var modules = {"foo": {"doSomething": function() {}}};
  return modules[name] || {};
}

var module = {};
var module.exports = exports = {};

function callback() {
  var foo = require("foo");

  module.exports = exports = function() {
    foo.doSomething();
  }
}

define的推測(cè)

// 這里的id相當(dāng)于模塊名，deps就是需要依賴的模塊名稱列表
define = function(id , deps, callback) {
  callback(require, exports, module);
};

暈，那require，exports，module跑哪兒溜達(dá)去了？加上去看看

define = function(id , deps, callback) {
  
  var require = function(name) {
    var modules = {"foo": {"doSomething": function() {}}};
    return modules[name] || {};
  }

  var module = {};
  var module.exports = exports = {};

  callback(require, exports, module);
};

看上去挺有道理的么，那么modules這玩意兒到底是哪兒冒出來的呢。

可以看出來modules 里面存放著的是foo模塊的內(nèi)容，那這些內(nèi)容是怎么來的呢？通過foo的module.exports提供的啊。那么modules里面其實(shí)放的是，foo的module.exports。

而foo對(duì)于當(dāng)前模塊來說是外部的模塊。而我想調(diào)用外面的東西，只有兩種辦法，要么傳參數(shù)，要么通過全局變量（不過或許大神還有其他方案，我就只曉得這兩種了）。define里面有的參數(shù)沒有一個(gè)是存放module.exports的。那么答案呼之欲出了，modules是全局變量。

modules = {};
function load(id, exports) {
  (modules || (modules = {}))[id] = exports;
}

再來看看完整的代碼，變成啥樣了

modules = {};
function load(name, exports) {
  (modules || (modules = {}))[name] = exports;
}

define = function(id, deps, callback) {
  
  var require = function(name) {
    return modules[name] || {};
  }

  var module = {};
  var module.exports = exports = {};

  callback(require, exports, module);

  load(id, module.exports);
};

到現(xiàn)在差不多已經(jīng)成型了，那么這里的require, exports, module都是外來的模塊吧bingo，其實(shí)callback里的模塊都是根據(jù)deps來的，去掉require, exports, module

modules = {};
function load(name, exports) {
  (modules || (modules = {}))[name] = exports;
}

define = function(id, deps, callback) {
  
  // 相當(dāng)于
  // var module = {};
  // var module.exports = {};
  var module = modules["module"];
  
  // 相當(dāng)于
  //var require = function(name) {
  //  return modules[name] || {};
  //}
  var require = modules["require"];

  var args = deps.map(require);

  callback.apply(null, args);

  load(id, module.exports);
};

來看define的另一種形式

define("alpha" ,["foo"], function(foo) {
  return function() {
    foo.doSomething();
  }
});

咦，精簡(jiǎn)了不少誒。沒有exports了誒，會(huì)返回了么

modules = {};
function load(name, exports) {
  (modules || (modules = {}))[name] = exports;
}

define = function(id, deps, callback) {
  
  var module = modules["module"];
  
  var require = modules["require"];

  var args = deps.map(require);

  var exports = callback.apply(null, args);

  load(id, exports || module.exports);
};

OK,先告一段落了，累死我丫了。在慢慢優(yōu)化吧，唉。

參考（關(guān)于exports 和 module.exports 的區(qū)別）

exports 和 module.exports 的區(qū)別這篇文章很不賴。

人家大神已經(jīng)說得非常好了。我在了淺薄的打個(gè)比方，我有個(gè)文件夾叫module.exports，然后我創(chuàng)建了一個(gè)超鏈接叫exports，那我在任何一個(gè)里面操作最終都會(huì)反應(yīng)到另一個(gè)里，但如果我把超鏈接exports刪了把它的指向地址改了，并不會(huì)影響真正的文件夾module.exports。

而有很多人明明已經(jīng)改了超鏈接exports的指向地址（如：exports = 123;），再在超鏈接里面做了很多操作（如：exports.hello = 456;），那都不會(huì)對(duì)真正的文件夾module.exports起到任何作用(你是見不到module.exports.hello === 456的)。