成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js手札--關于AMD的簡單分析

frank_fun / 1124人閱讀

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

AMD中define常見的形式
define("alpha" ,["require", "exports", "module"], function(require, exports, module) {
  var foo = require("foo");
  module.exports = exports = function() {
    foo.doSomething();
  }
});

參數(shù)

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

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

分析方法:替換部分代碼進行分析

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

1.替換require
function callback(exports, module) {
  // 假設foo是最簡單的對象,把require("foo")換成最簡答的對象看看
  var foo = {
    "doSomething": function() {}
  };

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

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

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

那么整個代碼可以換成

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();
  }
}

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

2. 替換exports和module.exports

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

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

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

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

而要說清exports和module.exports的二三事,又不是件容易的事,簡單理解,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的推測
// 這里的id相當于模塊名,deps就是需要依賴的模塊名稱列表
define = function(id , deps, callback) {
  callback(require, exports, module);
};

暈,那require,exports,module跑哪兒溜達去了?加上去看看

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里面其實放的是,foo的module.exports。

而foo對于當前模塊來說是外部的模塊。而我想調(diào)用外面的東西,只有兩種辦法,要么傳參數(shù),要么通過全局變量(不過或許大神還有其他方案,我就只曉得這兩種了)。define里面有的參數(shù)沒有一個是存放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,其實callback里的模塊都是根據(jù)deps來的,去掉require, exports, module

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

define = function(id, deps, callback) {
  
  // 相當于
  // var module = {};
  // var module.exports = {};
  var module = modules["module"];
  
  // 相當于
  //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();
  }
});

咦,精簡了不少誒。沒有exports了誒,會返回了么

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)化吧,唉。

參考(關于exports 和 module.exports 的區(qū)別)

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

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

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/79529.html

相關文章

  • 前端臨床手札——webpack構(gòu)建逐步解構(gòu)(上)

    摘要:前言由于博主最近又閑下來了,之前覺得的官方文檔比較難啃一直放到現(xiàn)在。文章會逐步分析每個處理的用意當然是博主自己的理解,不足之處歡迎指出溝通交流。后續(xù)將會補上構(gòu)建生產(chǎn)的配置分析,案例參考。前端臨床手札構(gòu)建逐步解構(gòu)下 前言 由于博主最近又閑下來了,之前覺得webpack的官方文檔比較難啃一直放到現(xiàn)在。細心閱讀多個webpack配置案例后覺得還是得自己寫個手腳架,當然這個案例是基于vue的,...

    lowett 評論0 收藏0
  • js手札--關于事件冒泡與事件捕獲

    摘要:一冒泡和捕獲事件執(zhí)行子元素在執(zhí)行某個事件的前后,會引起上層元素觸發(fā)相同事件。三補充關于和這兩個其實和捕獲與冒泡一點關系都沒有,是用來阻止事件的默認行為的。 一、冒泡和捕獲 事件執(zhí)行:子元素在執(zhí)行某個事件的前后,會引起上層元素觸發(fā)相同事件。例:我點擊了div,那么不光div會執(zhí)行click事件,上層的body和html等等也會執(zhí)行click。 冒泡與捕獲解決了:事件執(zhí)行順序由誰開始,由誰...

    lentoo 評論0 收藏0
  • 前端臨床手札——單元測試

    摘要:感覺不能這樣下去就學寫一下單元測試,等他更新代碼我都跑一遍確認一下,這樣工作安心多了。具體執(zhí)行的測試用例實現(xiàn)代碼。測試工具斷言庫測試驅(qū)動開發(fā)及測試框架入門學習 最近博主工作是和另一枚后端合作,但是經(jīng)常發(fā)現(xiàn)他寫的接口出錯,苦逼連連。感覺不能這樣下去就學寫一下單元測試,等他更新代碼我都跑一遍確認一下,這樣工作安心多了。 經(jīng)過博主一番查找,貌似被推薦比較多的有mocha和chai,下面記錄簡...

    kid143 評論0 收藏0
  • 前端臨床手札——單元測試

    摘要:感覺不能這樣下去就學寫一下單元測試,等他更新代碼我都跑一遍確認一下,這樣工作安心多了。具體執(zhí)行的測試用例實現(xiàn)代碼。測試工具斷言庫測試驅(qū)動開發(fā)及測試框架入門學習 最近博主工作是和另一枚后端合作,但是經(jīng)常發(fā)現(xiàn)他寫的接口出錯,苦逼連連。感覺不能這樣下去就學寫一下單元測試,等他更新代碼我都跑一遍確認一下,這樣工作安心多了。 經(jīng)過博主一番查找,貌似被推薦比較多的有mocha和chai,下面記錄簡...

    godlong_X 評論0 收藏0
  • 前端臨床手札——在微信播放視頻那些事

    摘要:然而我真的太天真,微信瀏覽器怎樣會讓你這樣好過問題集中于自動播放視頻這塊,需求很簡單自動播放全屏不顯示工具條自動播放一步步來,自動播放這個問題在十分肯定默認是不支持的,必須基于用戶操作下才能加載視頻。至于在微信下和一個樣。 某天收到舊同事的信息說希望我?guī)褪肿鲆幌乱粋€簡單的H5,然后我看了看的確很簡單: 就是圖片滾動到最后自動播放視頻,播完顯示個按鈕交互。 然而我真的太天真,微信瀏覽器怎...

    _Zhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<