今天上午沒事，重拾知識，此處是關於yii2.0是如何引入js 和css 使用總結
學習連接1：http://www.yiiframework.com/doc-2.0/guide-output-client-scripts.html
學習連接2：http://www.manks.top/article/yii2_load_js_css_in_end
學習連接3：http://www.yii-china.com/post/detail/39.html
問題：在開發web框架中，使用Yii2.0框架，我們也許會疑問，如果使用了layout /main.php 引入了公共的頭和尾，以及css 和 js。
對於特別文檔，我們想 “單獨” 的引入js 和 css 應該怎么辦？
通過學習，Yii2.0手冊對以上疑問進行了解答：
yii\web\View 對象可以注冊腳本。專門有兩種方法:為內聯腳本registerJs() 和 外部腳本registerJsFile()。內聯腳本可用於配置和動態生成的代碼。
一、內聯腳本registerJs()
使用如下:
//內部注冊js代碼
$jsString = "$(function(){
alert(123);
});";
$this->registerjs($jsString, View::POS_END);
或則
$this->registerJs("var options = ".json_encode($options).";", View::POS_END, 'my-options');
說明：
第一個元素是我們在視圖文件中要寫入的 js 代碼
第二個元素是我們決定這段代碼插入在視圖文件中具體那一個位置，具體參數如下：
- View::POS_HEAD for head section.
- View::POS_BEGIN for right after opening
<body>. - View::POS_END for right before closing
</body>. - View::POS_READY for executing code on document
readyevent. This will register jQuery automatically. - View::POS_LOAD for executing code on document
loadevent. This will register jQuery automatically.
第三個元素是表示這段代碼的ID,它具有唯一性，如果曾經有過某個ID,則它會替代或取代之前跟它同名的哪一個，如果不寫最后一個元素，則js代碼本身就是Id，可忽略最后一個元素
$this 指 yii\web\View對象，用於管理和渲染視圖
還有這樣的一種寫法
<?php $this->beginBlock("aaa") ?> $(function () { //這里寫你的js代碼 }); <?php $this->endBlock() ?> <?php $this->registerJs($this->blocks["aaa"], \yii\web\View::POS_END); ?>
數據塊block可以在一個地方指定視圖內容在另一個地方顯示，通常和布局一起使用
例如：可在內容視圖中定義數據塊在布局中顯示它
調用 yii\base\View::beginBlock() 和 yii\base\View::endBlock() 來定義數據塊
使用 $view->blocks[$blockID] 訪問該數據塊
其中 $blockID 為定義數據塊時指定的唯一標識ID。
可見內部寫法還是蠻靈活滴~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
二、外部腳本registerJsFile()
使用如下:
<?php
use backend\assets\AppAsset;
use yii\web\View;
AppAsset::register($this);
//外部引入js文件
$this->registerJsFile(Yii::$app->request->baseUrl . 'js/mytest_js.js', ['depends' => backend\assets\AppAsset::className(), "position"=> $this::POS_END]);
說明：引入外部 js文件
第一個參數是文件的絕對路徑 Yii::$app->request->baseUrl 加js文件
第二個元素是織帶它是依賴於誰的，這里它是依賴 backend\assets\AppAsset::className() 對象的
第三個元素是引入文件的位置，POS_END 說明是在</body>之前引入
但是：通常不使用這個引入的方式引入外部文件，因為每次引入一個文件都需要指定它是依賴於誰的，相對復雜，通常情況下我們使用包管理asset bundles進行注冊；
首先： 在這個文件中 backend\assets\AppAsset.php 可見，我們引入了兩個靜態方法，完整版的AppAsset類如下：
namespace backend\assets; use yii\web\AssetBundle; class AppAsset extends AssetBundle { public $basePath = '@webroot'; public $baseUrl = '@web'; //全局CSS public $css = [ 'css/animate.css', 'css/style.min.css', ]; //全局JS public $js = [ 'js/jquery-2.1.1.js' ]; //依賴關系 public $depends = [ 'yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', ]; //定義按需加載JS方法，注意加載順序在最后 public static function addScript($view, $jsfile) { $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']); } //定義按需加載css方法，注意加載順序在最后 public static function addCss($view, $cssfile) { $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']); } }
addScript() 和 addCss() 方法則是我們在視圖文件中進行注冊的鑰匙，通過如下使用方式，我們就不需要使用 $this->registerJsFile 進行注冊了
<?php use backend\assets\AppAsset;use yii\web\View; AppAsset::register($this);
//外部引入css文件 AppAsset::addCss($this,Yii::$app->request->baseUrl."/css/blog.css");
AppAsset::addScript($this, Yii::$app->request->baseUrl . '/js/waibu_js.js');
這樣是不是更簡單一些了呢，不需要在次指定它是依賴於誰誰了~~~~~~~~~~~~~~~
其中需要說明的是，需要注冊的文件都會在yii.js和bootstrap.js文件的后面