本文實例講述了JavaScript 模塊化開發。分享給大家供大家參考，具體如下：

JS開發的問題

沖突

依賴

JS引入的文件,產生依賴.

使用命名空間解決：

命名空間的弊端

調用的時候 名字比較長.

只能減低沖突，不能完全避免

SeaJs使用

引入sea.js的庫

如何變成模塊？ define

如何調用模塊？ exports 和 seajs.use

如何依賴模塊？ require

//html：<script src='http://www.aoyou183.cn/bcjs/js/sea.js' type='text/javascript' charset='utf-8'></script><script type='text/javascript'>// console.log( seajs );seajs.use(’./js/main.js’,function ( main ) { main.show(); });</script>

//main.jsdefine(function ( require,exports,module ) { var header = require(’./header.js’); function show () {alert(123); } exports.show = show; });seajs.use()

加載一個或多個模塊

// 加載一個模塊seajs.use(’./main.js’);// 加載一個模塊，在加載完成時，執行回調seajs.use(’./main.js’, function ( main ) { });// 加載多個模塊，在加載完成時，執行回調seajs.use([’./main.js’, ’./b’], function(a, b) { a.doSomething(); b.doSomething();});

seajs.use 與 DOM ready 事件沒有任何關系。如果某些操作要確保在 DOM ready 后執行，需要使用 jquery 等類庫來保證。

seajs.use([’jquery’,’./main’],function ( $,main ) { $(function () { main.init(); })});

use方法第一個參數一定要有，但是可以是null，也可以是一個變量

var app = [’app.js’, ’header.css’, ’header.js’];seajs.use(app, function( app ) { //do something});

seajs.use() 只用于加載啟動， 不應該出現在define的模塊代碼中，如果模塊代碼里需要加載其它模塊時，使用 require() ，需要加載異步其它異步模塊時，使用 require.async()

seajs.use 是模塊加載器必備的一個接口

define函數

當傳遞一個參數時候，那么這個參數就是一個模塊，參數可以是任意類型傳遞一個字符串，那么這個模塊就是一個字符串模塊傳遞一個對象的時候，那么這個模塊就是一個對象模塊

傳遞一個函數（最常用的方式） 這函數自帶三個參數Require：引用其他模塊的工廠方法Exports：返回的接口對象Module：模塊module屬性

當傳遞過參數時（兩個，或者三個）如果傳遞兩個參數的時候，第一個該模塊依賴的模塊數組集合，最后一個參數是function如果傳遞三個參數的時候，第一個表示該模塊的名稱，第二個參數表示該模塊依賴的模塊集合，第三個

//第一個參數，當前模塊的ID，也就是當前模塊的地址//第二個參數，以來模塊的地址的數組define(’./main.js’,[’./drag.js’],function( require,exports,moduels ){ });

三個參數解釋

require

require不能簡寫

require不能被重定義 不能賦值：var req = require 不能定義函數：function require 不能被子函數當成參數 不能在子函數作用域內重定義

// 錯誤 - 重命名 'require'！ var req = require, mod = req('./mod');

// 錯誤 - 重定義 'require'! require = function() {};

// 錯誤 - 重定義 'require' 為函數參數！ function F(require) {}

// 錯誤 - 在內嵌作用域內重定義了 'require'！ function F() {

var require = function() {};

}

require的參數只能是完整的字符串 require(‘abc’ + ‘bcd’)是不允許的

exports

模塊的接口

第一種，直接對exports添加屬性，如exports.color = ’red’

第二種，通過module來定義，module.exports.color = ’red’

第三種，通過module來定義，module.exports = {color: ’orange’}

第四種，通過return來定義， return {color: ’green’}

在一個模塊中定義接口時候要用一種方式，不能混用

注意，不可以直接對exports賦值新對象

module

模塊的屬性

id：表示模塊的id

uri：表示該模塊文件對應的url

exports：表示模塊返回的接口集合

dependencies：表示依賴模塊集合（數組表示形式）

deps：表示依賴模塊集合（對象表示形式）

CMD 模塊定義規范

一個模塊就是一個文件

define 是一個全局函數， 用來定義模塊

define( facotry )

facotry可以是一個函數，也可以是一個對象或字符串

definde( { color: ’tan’ } );

當參數為 函數時。 默認會有三個參數 ：require，exports，module

definde( function ( require,exports,module ) { } );define ([id,deps],factory)

define 也可以接受兩個以上的參數，字符串id表示模塊標識。deps是模塊依賴。

define(’main’,[’mina.js’],function ( require,exports,module ) { //模塊代碼});

id ,deps 參數省略，可以通過構建工具自動生成。id和 deps 參數， 不屬于CMD規范。

require function

require 是一個方法，接受 模塊標識 作為唯一參數，用來獲取其他模塊提供的接口。

deifne(function ( requrie,exports ) { //獲取模塊 main 的接口 var main = require(’./main’); //調用 模塊 main 中的定義方法 main.init();});

require.async(id,[cb]); 模塊內部異步加載模塊，并在加載完成后執行指定的回調函數。

require.async(’./a’,function(){});//加載多個異步模塊require.async([’./a’,’./b’],function(){});

//異步加載 所需要的模塊define(function ( require,expotrs,module ) { var loadSync = false; if ( loadSync ) { var skin = require.async(’./skin’); } else { var header = require.async(’./header’); }});exports

exports , 用來向外提供模塊接口

define(function ( require, exports,module ) { // 對外提供 foo 屬性 exports.color = ’pink’; // 對外提供 doSomething 方法 exports.doSomething = function() {};});

通過return 提供接口

define(function () { //通過 return 直接提供接口 return { color: ’deeppink’, sayName: function () {} }});

CMD模塊中，經常使用的API 有：define，require,require.async,exports,module.expotrs

seajs 配置seajs.config()alias

定義模塊別名當引用一些基礎庫的時候，涉及到基礎庫升級，在alias中定義這個模塊時，修改只需要修改這個別名配置。

seajs.config({ alias: { jquery: ’lib/jquery.1.10.1’ }});

模塊中使用

require(’jquery’);paths

定義模塊路徑一些模塊創建目錄結構很深的時候，可以將這個層級定義成一個簡寫的path， 引用這個模塊的時候，直接通過 pathName+模塊名稱。

seajs.config({

paths: { hd: ’./modules/header’}

});

模塊中使用

require(’hd/header.js’);vars

在某些情況下，模塊路徑在運行時才能確定，可以使用 vars 變量來配置。

seajs.config({ vars: { skin: ’header/skin’ }});

模塊中使用

require(’{skin}/skin.js’); //需要使用 {} 來標識map

映射配置,匹配文件，做映射處理開發完一些模塊時候，需要打包或壓縮處理，此時文件名可能會不同，可以通過map映射，來找到這個文件，修改成對應的文件名

seajs.config({ map: [ [’main.js’,’main-min.js’] ]});seajs.use([’main’],function ( main ) { // do ...});base

設置模塊的根目錄有時候開發用seajs不一定在當前頁面目錄下，此時想引用這個模塊比較麻煩，可以通過base來重定義該頁面模塊文件根目錄。

charset

設置模塊的編碼格式

seajs.config({ charset: ’utf-8’});

seajs.config({ charset: function(url) { // xxx 目錄下的文件用 gbk 編碼加載 if (url.indexOf(’http://example.com/js/xxx’) === 0) { return ’gbk’; } // 其他文件用 utf-8 編碼 return ’utf-8’; }});

常用的配置項： alias，paths，base

seajs插件seajs-preload.js

<script type='text/javascript' src='http://www.aoyou183.cn/bcjs/js/lib/seajs-preload.js'></script>加載js文件

seajs.config({ //預加載jquery文件 preload: [’jquery.js’]});

模塊中文件使用

definde(function ( require,exports,module ) { $(document).css(’background’,’tan’);});seajs-css.js

加載css文件

<script type='text/javascript' src='http://www.aoyou183.cn/bcjs/js/seajs-css.js'></script>

definde(function ( require,expotrs,module ) { require(’../css/css.css’);});requireJs

引入模塊文件時候，requirejs是根據引用了require文件的script標簽中data-main屬性對應的文件所在的目錄

define定義模塊

傳遞一個對象可以傳遞一個函數(commonjs規范的實現)區別 在于module

id表示模塊的id，id沒有后綴名(注意：seajs有后綴名) 沒有依賴的模塊集合config配置屬性

模塊接口

在AMD規范定義的模塊中，沒有exports參數，只能通過return將接口暴露出來。

return 對象，這種方式可以將模塊內部多個屬性多個方法暴露出來。

return 方法，這種方式將一個方法返回出來，引用這個模塊就是引用這個接口方法，在它父模塊(引用它的模塊中)可以直接調用該方法。是在自己模塊的作用域中。

requirejs配置baseUrl

設置根目錄用途：有時候啟動文件不在預期的位置，可以通過baseUrl來設置根目錄

require.config({ baseUrl: ’lib’});paths

簡寫路徑

require.config({ paths: { hd: ’module/header’ }});map

當存在多個頁面，可能每個頁面引用代碼庫不一樣，可以通過map進行配置，對每個文件配置不同的代碼庫文件。

require.config({ map: { //modules 模塊下的dom模塊引用的是lib/dom ’modules’: { ’dom’: ’lib/dom’ }, //modules-new 模塊下的dom模塊引用的是lib/dom.2.0 ’modules-new’: { ’dom’: ’lib/dom.2.0’ } }});

使用css插件

requireJs 加載css 插件

//配置require.config({ map: { ’*’: { ’css’: ’lib/css’ } }});

//使用 define([’css!css/index.css’],function () {});shim

表示配置模塊依賴關系對于一些定義在全局作用域下的代碼庫，常常獲取不到這類庫的模塊，此時通過定義shim的莫開依賴關系，可以在模塊中獲取到這類代碼庫。

require.config({ shim: { ’lib/jquery’: { //依賴的模塊集合 deps: [], expotrs: ’$’ } }});

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。