一些相關的模組化基礎

本篇將會詳細的講解模組化基礎，如何了解這方面相關知識。

為什麼要使用模組化？

解決命名衝突，避免全域污染

解決依賴管理

提高程式碼可讀性

程式碼解耦，提高複用性

CMD、AMD、CommonJS 規範分別指什麼？有哪些應用

CMD即是Common Module Definition 通用模組定義,主要是sea.js在推廣過程中對模組化定義的規範化產出，中它推崇一個文件一個模組,經常用文件名做為模組ID,以及推崇依賴就近,主要應用為sea.js ，例子：

define(function(require,exports,module){
    var $ = require('jquery.js')
    $('div').addClass('active');

});//cmd推崇就近依賴，所以依賴寫在函數中，require是一個方法，exports是一個對象，提供對外接口，module是一個對象，儲存與目前模組相關的屬性和方法。

AMD即是Asynchronous Module Definition 非同步模組定義，主要是require.js在推廣過程中對模組定義的規範化產出，它解決了多個js檔案的依賴問題和載入js文件較多時的頁面等待問題，推崇依賴前置，主要應用為require.js，例子：

define('modal',['jQuery'],function($){
    $('modal').show();

})//define為定義關鍵字，modal為定義的模組名字，一般可以省略，[ ]內為要載入的依賴模組，緊接在回調函數。

CommonJS主要指的是運行在瀏覽器端的模組規範，主要應用是node.js。

一個檔案對應一個模組，每個模組都是單獨的作用域，載入模組是同步載入的。

在一個模組中只有一個出口，moudle.exports對象，將模組希望輸出的對象放入該模組。

載入模組使用require方法。範例：

//模块定义  myMode.jsvar name = 'jiuyi';function printName(){    console.log(name);
}
functionprintFullName(firstName){
    consoele.log(firstName+name);
}module.erports = {    printName: printName,    printFullName: printFullName
}//加载模块var nameModule = require('./myMode.js')
nameModule.printName();

如下requirejs配置中, baseUrl 有什麼作用？以什麼作為基準? paths 的作用和用法是什麼?

requirejs.config({  baseUrl: "src/js",  
  paths: {    'jquery': 'lib/bower_components/jquery/dist/jquery.min'
  }
});

baseUrl的作用是設定require載入JS檔的基礎路徑，以html所在的路徑為基準，paths作用是設定baseUrl基礎路徑之外，設定某些特定檔案的路徑，以baseUrl路徑為基準。

如下r.js 的打包配置中baseUrl 是什麼? name 是什麼

({
    baseUrl: "./src/js",
    paths: {        'jquery': 'lib/bower_components/jquery/dist/jquery.min'
    },
    name: "main",
    out: "dist/js/merge.js"})

在這裡baseUrl指的是以自身檔案路徑為基準，尋找require.js的設定檔的baseUrl

name指的是入口的主模組名字

out指的是打包輸出的路徑

本篇講解了模組化相關基礎知識，想要更多相關知識請關注php中文網。

相關推薦：

dom物件的innerText和innerHTML有什麼不同？

一些關於JS的基礎問題

#如何用前端js模組化寫require.js

以上是一些相關的模組化基礎的詳細內容。更多資訊請關注PHP中文網其他相關文章！