Seajs相關知識
seajs.Use 引入入口文件
第一個參數表示模塊id
字符串表示一個模塊id
數組,數組每個成員表示一個模塊
第二個參數表示回調函數(可有可無的)
作用就是當模塊加載完成執行回調函數
作用域是全局作用域
參數與前面加載的模塊是一致的
Use方法返回值是seajs對象,因此可以鏈式調用
Seajs默認根目錄是seajs文件所在的目錄,因此我們通常要將seajs文件放在最外面
文件只需要引入seajs文件,其他的是要通過seajs引入的
通常來說入口文件只有一個,所以鏈式調用時候,很少見,在一個use方法回調函數內部不能知道其他use方法什么時候加載完畢
Define 定義模塊的,根據傳遞的參數我們分成三類
第一類 傳遞一個參數
如果是一個值類型的數據,那么這個數據直接作為接口暴漏出來
如果是一個對象,那么這個對象就是暴漏的接口
如果是一個函數(最常見的一種方式,它符合commonjs規范),
作用域是全局作用域
參數有三個
Require 加載模塊的
Exports 定義接口的
Module 模塊的對象
第二類 傳遞兩個參數
第一個參數
如果是字符串 表示模塊的id
如果是數組 表示模塊的依賴集合
此時不論模塊有沒有使用該模塊都會去加載它,并且不會去解析模塊內部require方法
第二個參數表示模塊函數(對象等其他數據)這個函數的使用方式跟上面函數式一致的
第三類 傳遞三個參數
第一個參數 是字符串,表示模塊id
第二個參數 是數組,表示依賴集合
第三個參數 函數(其他數據),模塊函數,函數的使用方式跟上面的函數式一致
通常來說一個文件只能添加一個模塊(模塊沒有定義id),如果定義了多個模塊,后面的覆蓋前面的
如果模塊定義了id,此時這些模塊是兼容的,引用這些模塊的時候,一定要通過這些id引用
Require加載模塊
1 不能簡寫,在模塊函數的參數中
2 不能修改
不能賦值
不能定義變量
不能作為函數參數
在子函數中不能修改
3 使用時不能使用表達式
當我們定義模塊id時候,此時我們不能直接引入該模塊
想使用模塊要分成兩步
第一步 在依賴模塊集合中引入該模塊
第二步 在模塊內部用require引入模塊id
接口exports 包含commonjs規范定義接口的語法
1 exports.接口
可以繼續添加接口
2 module.exports.接口
可以繼續添加接口,并且1和2是可以混用的
3 module.exports = {}
定義全部的接口,不能在使用前面兩種定義接口方式
4 return {}
定義全部的接口,此時會將前面所有接口覆蓋掉
5 return function () {}
定義接口函數,使用時候,必須調用它
6 module.exports = function () {}
定義接口函數
7 define(值類型)
定義一個值類型的數據接口
8 module.exports = 值類型
定義一個值類型的數據接口
9 return 值類型
定義一個值類型的數據接口
10 define({})
定義一個對象接口
注意
定義接口的優先級
Return > module.exports = {}或者function > module.exports.接口 或者exports.接口
Exports絕對不能賦值對象 exports = {}
定義接口函數時候,有兩種方式
第一種
Return function 或者module.exports = function
第二種
Var demo = function () {}或者function demo (){}
Return demo 或者module.exports = demo
模塊module
Id 表示模塊的id,如果定義模塊沒有添加id的時候,模塊的id就是uri
Uri表示模塊所在文件的地址
Exports表示模塊暴漏的接口
Status 模塊的狀態
Dependencies 依賴的模塊,是一個數組 每個成員表示一個模塊的id
Deps 依賴的模塊,是個對象,對象屬性表示模塊的id,對象屬性值表示模塊的信息對象
異步加載模塊 require.async
與use方法很像,只不過一個在模塊外部使用,一個在模塊內部使用
與require的區別,require遵守commonjs規范是同步加載的,require.async是異步加載的
Require引入就可以使用
Require.async 在引入后,的回調函數中才能使用,函數返回值就是require對象
在if語句中
如果條件成立
Require會加載并執行該模塊
Require.async 會一步加載模塊,并執行
如果條件不成立
Require會加載模塊,但不會執行
Require.async 不會加載模塊,也不會執行
在異步操作中
例如在定時器中
Require會立即加載文件,但是等到定時器執行的時候才會執行模塊函數
Require.async 會等到異步操作執行的時候,加載并執行模塊
配置config
配置是seajs為我們提供的功能,但是我們想使用就要配置這些信息
Alias 創建模塊的別名
作用簡化對模塊的引用
值是一個對象
對象的屬性名稱表示別名
對象的屬性值表示真實路徑
Path 定義路徑
作用 簡化對模塊路徑書寫
值是一個對象
Key表示簡化的路徑
Value表示真實的路徑
Map 定義模塊映射關系的
批處理模塊的
值是一個二維數組
數組的每個成員表示一組映射規則,每個映射規則是一個數組
第一個成員表示匹配的規則
第二個成員表示處理的規則
Debug 進入調試模塊,可以看到js加載過程
Vars 定義路徑模板變量
作用可以是引入的模塊動態會
模板語法 {}, 在路徑的{}中我們可以使用vars中定義的變量
值是一個對象
Key 表示變量
Value表示變量的值
Charset 定義js文件加載時候的編碼格式,
Base 定義模塊的根路徑,它的值是個字符串,此時根路徑就是個字符串指向的目錄,此時seajs文件可以隨意的防止了
Seajs插件
我們需要的功能,seajs沒有幫我們實現,別人幫我們了,我們使用別人提供的代碼,這些代碼就是插件,我們使用這些插件就要去加載這些插件文件
在seajs中使用插件,一定要寫在seajs標簽后面(插件依賴于seajs),對于一些插件是需要寫配置的,例如預加載插件
預加載插件
在模塊加載過程中有限加載某些文件(通常這些文件都是一些代碼工具庫,或者框架)
這些文件的特征是,都會提供一個全局變量方便我們使用它
這個插件的作用
1 我們不用在每一個模塊內顯性的引入它,而可以直接使用他們(因為他們提供了全局變量)
2 我們不需要修改這些文件的源代碼,因為他們提供全局變量
3 在更新代碼庫的時候成本低,我們只需要更改配置就可以了,因為每個版本提供的全局變量的,
預加載插件加載時間(讓我們知道,我們什么時候可以使用這些預加載的庫)
在調用use方法之后,模塊加載之前開始加載這些庫的
所以配置項要寫在use方法之前(所有的配置都要寫在use方法之前,或者整個項目的最前面)
在配置中,我們通過preload屬性加載庫
Preload是一個數組,每一個成員代編一個文件
1 |
Css插件
到目前為止,我們學的加載文件都是加載的js文件,有時我們在工作中開發項目時候,我們寫的不僅僅是js,還有css,此時如果對于一個搜索框,我們通常將他們的js與css寫在一起,此時如果js是一個模塊化開發文件,我們通常需要將css引入進來,這樣就會是css與js產生依賴。使他們形成一個整體
使用css插件就要加載seajs-css文件
使用方式:
第一步在seajs標簽后面引入該文件標簽
第二步,哪個js模塊需要什么css文件就通過require引入它
注意引入的css文件一定要加上.css后綴名
Use方法不僅僅可以引入js文件,還可以引入css文件,所以對于一些在渲染之前就要加載的css文件我們可以寫在這里
文章列表