2.0的變化相信大家都看到了，其中對(duì)一個(gè)資源包概念做出了很完美的實(shí)現(xiàn)，那就是AssetBundle，但是很多初學(xué)者朋友可能不太能夠正確的領(lǐng)會(huì)其中的含義

我畫了一張圖，大家可以將就看一下：

其中，控制器動(dòng)作的視圖（view）渲染順序是優(yōu)先于我們的模板頁(yè)（layout）的，那么一旦我們?cè)谀硞€(gè)視圖中使用了新的JS庫(kù)，或新的CSS樣式文件，那么我們?nèi)绾稳ヌ幚砟兀?/p>

以下方式是錯(cuò)誤的，請(qǐng)避免使用：有的人會(huì)直接在視圖里添加對(duì)css或者js的link引用，這樣引入的文件是在視圖區(qū)域，而yii的默認(rèn)JS加載會(huì)放在模板頁(yè)的最后，這樣可能導(dǎo)致依賴關(guān)系混亂。比如你視圖中引用的js文件里調(diào)用了jquery包，但是執(zhí)行時(shí)jquery的加載代碼在HTML頁(yè)面的末尾，這樣導(dǎo)致頁(yè)面腳本錯(cuò)誤。

還有人會(huì)圖省事，直接把項(xiàng)目中所有的js或css文件都書寫layout模板頁(yè)里，這樣產(chǎn)生大量的無(wú)效樣式或js，影響了加載效率及頁(yè)面錯(cuò)位風(fēng)險(xiǎn)。

所以正確的方式應(yīng)該是通過(guò)AssetBundle去解決這個(gè)問(wèn)題，先發(fā)一個(gè)簡(jiǎn)單的類給大家看一下：

namespace appassets;use yiiwebAssetBundle;class AppAsset extends AssetBundle { public $basePath = ’@webroot’; public $baseUrl = ’@web’; public $css = [’public/skin/default_skin/css/theme.css’, ]; public $js = [’public/vendor/jquery/jquery-1.11.1.min.js’,’public/vendor/jquery/jquery_ui/jquery-ui.min.js’,’public/js/bootstrap/bootstrap.min.js’, ]; //依賴包 public $depends = [//這里寫你的依賴包即可，沒(méi)有就別寫 ]; //導(dǎo)入當(dāng)前頁(yè)的功能js文件，注意加載順序，這個(gè)應(yīng)該最后調(diào)用 public static function addPageScript($view, $jsfile) {$view->registerJsFile($jsfile, [AppAsset::className(), ’depends’ => ’appassetsAppAsset’]); } //導(dǎo)入編輯器 public static function addCkeditor($view) {$view->registerJsFile(’/public/js/utility/ckeditor/ckeditor.js’, [AppAsset::className(), ’depends’ => ’appassetsAppAsset’]); } }可以看到上面我創(chuàng)建的類中已經(jīng)預(yù)定義了兩個(gè)靜態(tài)方法addPageScript和addCkeditor，其中addCkeditor是一個(gè)第三方的js組件，是個(gè)編輯器，具體的開發(fā)環(huán)境中你們可以寫別的方法名及加載別的組件。那么上的這個(gè)東西寫好后應(yīng)該如何去使用呢？我們?cè)谀０屙?yè)開頭部分加上這句話：//自動(dòng)加載資源AppAsset::register($this);這樣會(huì)在模板頁(yè)加載基礎(chǔ)的項(xiàng)目資源文件，比如css和js什么的。現(xiàn)在我們有一個(gè)視圖叫create-mail，需要使用ckeditor編輯器，那么我們應(yīng)該在create-mail視圖的開頭加上這句話：//導(dǎo)入ckeditor包資源appassetsAppAsset::addCkeditor($this);最后解釋一下，addCkeditor（）方法是我們預(yù)先定義好的，這樣我們可以把一些常見的包都拆包并預(yù)處理好，如果你覺(jué)得麻煩可以直接使用如下的方式：//導(dǎo)入ckeditor包資源appassetsAppAsset::addPageScript($this,’js文件相對(duì)路徑或url’);以上的例子只是使用了js文件作為一個(gè)簡(jiǎn)單的介紹，css樣式的加載也是一樣的道理。這樣做的好處是，即使在視圖里加載css或js也會(huì)因?yàn)橐蕾囮P(guān)系而出現(xiàn)在視圖外面的常規(guī)加載區(qū)域中，規(guī)范了很多。同時(shí)也因?yàn)橐蕾囮P(guān)系，你在視圖里加載的文件肯定會(huì)排在你的基礎(chǔ)樣式或腳本的后面，不會(huì)出錯(cuò)。