seajs是一個輕量級的JavaScript模塊化開發(fā)框架,其主要特點是支持異步加載和按需加載。與其他框架不同的是,seajs不僅可以按需加載JavaScript模塊,還可以按需加載CSS樣式。
在seajs中,按需加載CSS可以使用插件seajs-style。與seajs.define定義模塊類似,seajs-style定義CSS模塊的方式也很簡單:
seajs.config({ plugins: ['style'], base: './modules/' }); seajs.use('a.css');
上面的代碼加載了名為a.css的CSS模塊。需要注意的是,在配置中加入style插件,才能正確加載CSS模塊。
使用seajs-style加載CSS,其實是動態(tài)創(chuàng)建<ilink>標簽,并設(shè)置href屬性加載CSS文件。在同一個頁面中,seajs-style可以同時加載多個CSS模塊,而且按需加載的模塊無法通過link標簽在頁面中預(yù)覽到。
除了上面的方式,在模塊中也可以直接使用require方式加載css:
define(function(require){ require('./b.css'); });
這種方式與seajs.use加載CSS的效果一樣,但更靈活。開發(fā)者可以根據(jù)代碼邏輯需要靈活地決定是否加載CSS模塊。
需要注意的是,按需加載CSS必須在seajs.config中配置style插件。否則會拋出“Unknown plugin: style”錯誤。