近幾年前端工程化越來越完善，打包工具也已經(jīng)是前端標配了，像seajs這種老古董早已停止維護，而且使用的人估計也幾個了。但這并不能阻止好奇的我，為了了解當年的前端前輩們是如何在瀏覽器進行代碼模塊化的，我鼓起勇氣翻開了Seajs的源碼。下面就和我一起細細品味Seajs源碼吧。

如何使用seajs

在看Seajs源碼之前，先看看Seajs是如何使用的，畢竟剛?cè)胄械臅r候，大家就都使用browserify、webpack之類的東西了，還從來沒有用過Seajs。

<!-- 首先在頁面中引入sea.js，也可以使用CDN資源 --><script type="text/javascript" src="./sea.js"></script><script>// 設(shè)置一些參數(shù)seajs.config({ debug: true, // debug為false時，在模塊加載完畢后會移除head中的script標簽 base: './js/', // 通過路徑加載其他模塊的默認根目錄 alias: { // 別名 jquery: 'https://cdn.bootcss.com/jquery/3.2.1/jquery' }})seajs.use('main', function(main) { alert(main)})</script>//main.jsdefine(function (require, exports, module) { // require('jquery') // var $ = window.$ module.exports = 'main-module'})

seajs的參數(shù)配置

首先通過script導入seajs，然后對seajs進行一些配置。seajs的配置參數(shù)很多具體不詳細介紹，seajs將配置項會存入一個私有對象data中，并且如果之前有設(shè)置過某個屬性，并且這個屬性是數(shù)組或者對象，會將新值與舊值進行合并。

(function (global, undefined) { if (global.seajs) { return } var data = seajs.data = {}  seajs.config = function (configData) { for (var key in configData) {  var curr = configData[key] // 獲取當前配置  var prev = data[key] // 獲取之前的配置  if (prev && isObject(prev)) { // 如果之前已經(jīng)設(shè)置過，且為一個對象  for (var k in curr) {   prev[k] = curr[k] // 用新值覆蓋舊值，舊值保留不變  }  }  else {  // 如果之前的值為數(shù)組，進行concat  if (isArray(prev)) {   curr = prev.concat(curr)  }  // 確保 base 為一個路徑  else if (key === "base") {   // 必須已 "/" 結(jié)尾   if (curr.slice(-1) !== "/") {   curr += "/"   }   curr = addBase(curr) // 轉(zhuǎn)換為絕對路徑  }  // Set config  data[key] = curr   } } }})(this);

設(shè)置的時候還有個比較特殊的地方，就是base這個屬性。這表示所有模塊加載的基礎(chǔ)路徑，所以格式必須為一個路徑，并且該路徑最后會轉(zhuǎn)換為絕對路徑。比如，我的配置為base: './js'，我當前訪問的域名為http://qq.com/web/index.html，最后base屬性會被轉(zhuǎn)化為http://qq.com/web/js/。然后，所有依賴的模塊id都會根據(jù)該路徑轉(zhuǎn)換為uri，除非有定義其他配置，關(guān)于配置點到為止，到用到的地方再來細說。

模塊的加載與執(zhí)行

下面我們調(diào)用了use方法，該方法就是用來加載模塊的地方，類似與requirejs中的require方法。