YII學習筆記之------04前端資源（Yii2.0靈活使用AppAssets管理CSS樣式及JS腳本 ）

@原文url：http://www.yiichina.com/doc/guide/2.0/structure-assets  來自Yii2.0中文社區

@原文url:http://blog.csdn.net/maclechan/article/details/45803821

　　資源

　　Yii中的資源是和Web頁面相關的文件，可為CSS文件，JavaScript文件，圖片或視頻等， 資源放在Web可訪問的目錄下，直接被Web服務器調用。

　　通過程序自動管理資源更好一點，例如， 當你在頁面中使用 yii\jui\DatePicker 小部件時， 它會自動包含需要的CSS和JavaScript文件，而不是要求你手工去找到這些文件並包含， 當你升級小部件時，它會自動使用新版本的資源文件， 在本教程中，我們會詳述Yii提供的強大的資源管理功能。

　　資源包

　　Yii在資源包中管理資源，資源包簡單的說就是放在一個目錄下的資源集合， 當在視圖中注冊一個資源包， 在渲染Web頁面時會包含包中的CSS和JavaScript文件。

　　定義資源包

　　資源包指定為繼承yii\web\AssetBundle的PHP類， 包名為可自動加載的PHP類名， 在資源包類中，要指定資源所在位置， 包含哪些CSS和JavaScript文件以及和其他包的依賴關系。

　　Yii2.0靈活使用AppAssets管理CSS樣式及JS腳本

　　(注：以下為Yii2.0高級應用測試)

　　Yii2.0對於CSS/JS 管理，使用AssetBundle資源包類。

　　視圖如何按需加載CSS/JS ?

　　資源包定義：

　　backend/assets/AppAsset.PHP

　　

　　@原文url：http://www.yiichina.com/tutorial/387

　　2.0的變化相信大家都看到了，其中對一個資源包概念做出了很完美的實現，那就是AssetBundle，但是很多初學者朋友可能不太能夠正確的領會其中的含義

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

　　　

　　其中，控制器動作的視圖（view）渲染順序是優先於我們的模板頁（layout）的，那么一旦我們在某個視圖中使用了新的JS庫，或新的CSS樣式文件，那么我們如何去處理呢？

　　以下方式是錯誤的，請避免使用：
　　有的人會直接在視圖里添加對css或者js的link引用，這樣引入的文件是在視圖區域，而yii的默認JS加載會放在模板頁的最后，這樣可能導致依賴關系混亂。
　　比如你視圖中引用的js文件里調用了jquery包，但是執行時jquery的加載代碼在HTML頁面的末尾，這樣導致頁面腳本錯誤。

　　還有人會圖省事，直接把項目中所有的js或css文件都書寫layout模板頁里，這樣產生大量的無效樣式或js，影響了加載效率及頁面錯位風險。

　　所以正確的方式應該是通過AssetBundle去解決這個問題，先發一個簡單的類給大家看一下：

namespace app\assets;
use yii\web\AssetBundle;

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 = [
        //這里寫你的依賴包即可，沒有就別寫
    ];

    //導入當前頁的功能js文件，注意加載順序，這個應該最后調用
    public static function addPageScript($view, $jsfile) {
        $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'app\assets\AppAsset']);
    }

    //導入編輯器
    public static function addCkeditor($view) {
        $view->registerJsFile('/public/js/utility/ckeditor/ckeditor.js', [AppAsset::className(), 'depends' => 'app\assets\AppAsset']);
    }
    
}

　　可以看到上面我創建的類中已經預定義了兩個靜態方法addPageScript和addCkeditor，其中addCkeditor是一個第三方的js組件，是個編輯器，具體的開發環境中你們可以寫別的方法名及加載別的組件。

　　那么上的這個東西寫好后應該如何去使用呢？
　　我們在模板頁開頭部分加上這句話：

//自動加載資源
AppAsset::register($this);

　　這樣會在模板頁加載基礎的項目資源文件，比如css和js什么的。

　　現在我們有一個視圖叫create-mail，需要使用ckeditor編輯器，那么我們應該在create-mail視圖的開頭加上這句話：

//導入ckeditor包資源
\app\assets\AppAsset::addCkeditor($this);

　　最后解釋一下，addCkeditor（）方法是我們預先定義好的，這樣我們可以把一些常見的包都拆包並預處理好，如果你覺得麻煩可以直接使用如下的方式：

//導入ckeditor包資源
\app\assets\AppAsset::addPageScript($this,'js文件相對路徑或url');

　　以上的例子只是使用了js文件作為一個簡單的介紹，css樣式的加載也是一樣的道理。

　　這樣做的好處是，即使在視圖里加載css或js也會因為依賴關系而出現在視圖外面的常規加載區域中，規范了很多。

　　同時也因為依賴關系，你在視圖里加載的文件肯定會排在你的基礎樣式或腳本的后面，不會出錯。