seajs

1、模塊化配置信息 seajs config
用於配置seajs的一些選項參數，接受一個對象，該對象的屬性值就是咱們的配置項目
配置信息基本語法：
在seajs.use()上邊：

seajs.config({

alias:{},

paths:{}

})

　　

1.alias定義模塊別名
當咱們在項目中引入一些基礎類庫，常常會涉及到類庫的版本升級問題，纔是每一個模塊都引入了類庫，那麼升級就須要修改每一個模塊中的名字，風險比較大，
若是使用alias定義這個模塊（類庫）、使用別名調用，更新只須要更新版本號，就能夠作到全局更新
eg:
jq:jquery-1,12.2.min.js
全部模塊中都使用jq，若是我將這個版本改成jq:jquery-1.5.min.js
全部使用了jq的模塊中的jquery都會變爲1.5的版本

2.paths 路徑配置
當模塊目錄比較深的時候，或者須要跨目錄調用模塊時，可使用paths簡化路徑
也可使用{}匹配語法調用變量（vars）

eg:
require('header/skin/top/top')
===>
paths:{
h:'header/skin/top'
}
require('h/top');

 

3.vars 聲明變量
有些場景下，模塊路徑在運行時才能肯定（動態處理），這是可使用vars變量來配置
若是模塊開發時路徑比較複雜，也可使用vars進行簡化路徑，將路徑的一部分定義爲變量，使用{}進行拼接，與paths有點相似

 

4.map 映射處理
該配置可對模塊路徑進行映射修改，可用於路徑轉換，在線調試等
當模塊開發時，咱們使用的文件名字進行調用，此時文件並無被壓縮，當開發結束，文件進行了壓縮，文件名字發生了變化，此時在調用沒壓縮的是名字會報錯，此時經過map進行映射處理，找到這些文件，修改對應的文件名
map是數組

eg：
文件：mian.js
調用：require('mian')
文件壓縮：main.min.js
配置：map：['main.js','main.min.js']
調用：require('main')
map:['.js','.min.js']

 

5.base根路徑
sea.js在解析頂級標識時，會相對base路徑來解析
sea.js所在的目錄爲默認的根目錄，可是使用base可自行手動設置根目錄

 

6.charset 設置字符集（編碼方式）
用於設置模塊的編碼方式

 

7.debug調試模式
值爲true，標識加載器不會刪除動態插入的
script標籤，插件也能夠根據debug配置來決定log等信息輸出

 

8.preload 預加載
使用preload配置項，能夠在普通模塊加載前，提早加載1並初始化好某個特定的模塊
預加載的模塊能夠在全局模塊下直接使用，不須要引入
使用preload預加載須要在sea.js下引入sea-preload.js

 

9.css 加載css文件
若是須要在模塊中生成html標籤，並使用css樣式，可使用css加載這些css文件
須要引入文件：seajs-css.js
任何模塊引入的css文件都將會在全局發揮做用，不須要單獨引入

 

10.requirejs
1.簡介：

地址：http://www.requirejs.org.cn/
github：https://github.com/requirejs/requirejs
npm安裝 ： npm i requirejs

 

requirejs也是一種模塊化開發依賴管理的代碼工具，與seajs有着類似的api，但也有不一樣之處，requirejs與seajs的區別：
1）seajs引入的默認根目錄是sea.js文件所在的目錄，可是requirejs的根目錄是引入require.js文件的html文件所在的目錄
2）在模塊內部引入其餘模塊，seajs依然是對seajs文件所在的根目錄爲基礎寫路徑，可是requirejs則是相對當前文件所在位置爲基礎寫路徑
3）seajs能夠對define定義模塊傳遞一個字符串爲參數來定義一個字符串模塊，可是requirejs不容許

2.模塊定義 define
與seajs對比：
1）不能單獨寫一個字符串或數字
2）能夠傳遞一個對象，對象模塊
3）能夠傳遞一個函數（commonjs規範），參數同樣

module不同：
1）id表示模塊id，id沒有後綴，seajs有後綴
2）沒有依賴集合
3）config配置不一樣

相同點：
1）uri是同樣的
2）exports是同樣的
4）傳遞兩個參數時，第一個參數表示依賴模塊集合數組，第二個參數時模塊主體數組，函數的參數表示前邊依賴集合所引入的內容，順序是引入依賴的順序

 

requirejs模塊調用：
1）html文件中須要引入根文件（不是模塊）
<scritp src='../require.js' data-main='./js/app.js'></script>

app.js就是一個單純的js文件（根文件），不是模塊
2）根js文件或子模塊中引入其餘模塊
require(['./header/header','./header/skin/skin'],function(h,s){
//h表示1header返回內容。s表明skin返回內容
})

3）子模塊中引入其餘模塊
define(['./header/header','./header/skin/skin'],function(h,s){
//h表示1header返回內容。s表明skin返回內容
})

4）子模塊中引入其餘模塊，define1個參數
define(function(require,exports,module){
var h=require('header/header');
})