歡迎您光臨本站 註冊首頁

JavaScript 模塊化開發實例詳解【seajs、requirejs庫使用】

←手機掃碼閱讀     ml5rwbikls @ 2020-05-13 , reply:0

JS開發的問題
衝突
依賴
JS引入的文件,產生依賴.
使用命名空間解決:
命名空間的弊端
調用的時候 名字比較長.
只能減低衝突,不能完全避免
SeaJs使用
引入sea.js的庫 如何變成模塊? define 如何調用模塊? exports 和 seajs.use 如何依賴模塊? require
//html:


//main.js define(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
加載js文件
seajs.config({ //預加載jquery文件 preload: ['jquery.js'] });
模塊中文件使用
definde(function ( require,exports,module ) { $(document).css('background','tan'); });
seajs-css.js
加載css文件
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: '$' } } });


[ml5rwbikls ] JavaScript 模塊化開發實例詳解【seajs、requirejs庫使用】已經有113次圍觀

http://coctec.com/docs/javascript/show-post-234291.html