Yii資源(Asset)


資源(asset)是一個檔案,該檔案可在網頁中被參照(CSS,JS,視訊,音訊或影象等)。Yii使用資源包管理asset. 資產包的目的是要有一組程式碼庫關聯JS或CSS檔案,並能夠在一個單一的PHP呼叫中註冊。資源包還依懶於其他資源包。
在assets檔案夾裡面,可找到基本的應用程式模板資源包-
<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   /**
   * @author Qiang Xue <[email protected]>
   * @since 2.0
   */
   class AppAsset extends AssetBundle {
      public $basePath = '@webroot';
      public $baseUrl = '@web';
      public $css = [
         'css/site.css',
      ];
      public $js = [];
      public $depends = [
         'yii\web\YiiAsset',
         'yii\bootstrap\BootstrapAsset',
      ];
   }
?> 

上述類指定資原始檔位於 @webroot 檔案夾中,其對應於URL @web 。 此資源包不包含 JS 檔案和 CSS 檔案。該包依賴於其他包-

yii\web\YiiAsset 和 yii\bootstrap\BootstrapAsset

AssetBundle的屬性

以下是資源包的屬性。
  • basePath ? 定義在此綑綁包包含資原始檔的Web存取目錄。

  • baseUrl ? 指定對應於根路徑屬性的URL

  • js ? 定義包含在此綑綁包的JS檔案陣列

  • css ? 定義包含在這個綑綁包的CSS檔案陣列

  • depends ? 定義了該包依賴於資源包陣列。這意味著,當前資源包的CSS和JS檔案將被包括在資源包,這是取決於屬性宣告之後。

  • sourcePath ? 定義包含資原始檔的根目錄。如果根目錄不是通過Web存取,應該要設定這個屬性。

    否則應該設定basePath和baseUrl屬性。
  • cssOptions ? 定義選項將傳遞到 yii\web\View∷registerCssFile 函式

  • jsOptions ? 定義的選項被傳遞到 yii\web\View::registerJsFile 函式

  • publishOptions: 指定選項將被傳遞到yii\web\AssetManager::publish 函式

資源的分類

根據位置,assets 可以被歸類為-
  • Source Assets ? assets是位於無法通過網路直接存取的目錄。在頁面使用源資源應該被複製到網站目錄。

    這個過程被稱為資源發布。
  • Published Assets ? 該 assets 為位於一個Web存取的目錄

  • External Assets ? 該 assets 位於另一台Web伺服器上。

使用資源包

第1步 - 在 assets 檔案夾裡面建立一個名為 DemoAsset.php 的新檔案包含以下內容。
<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   class DemoAsset extends AssetBundle {
      public $basePath = '@webroot';
      public $baseUrl = '@web';
      public $js = ['js/demo.js'];
   }
?> 

第2步 - 宣告一個demo.js檔案的新資源包。現在,在 web/js 檔案夾中,建立一個名為 demo.js 檔案並使用以下程式碼。

console.log("hello from Demo asset");
第3步 - 要註冊新建立的資源包,轉到 views/layouts 目錄,並在 main.php 檔案的頂部,新增以下行。
\app\assets\DemoAsset::register($this);
第4步 - 如果在Web瀏覽器中開啟URL:http://localhost:8080/index.php,你應該看到下面的 chrome 控制台輸出。

還可以定義jsOptions和cssOptions屬性來客製化該CSS和JS檔案包含在一頁面。 預設情況下,JS檔案包括在結束標記之前。

步驟5 - 在JS檔案包函在頭部分,使用以下列方式修改 DemoAsset.php 檔案。
<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   use yii\web\View;
   class DemoAsset extends AssetBundle {
      public $basePath = '@webroot';
      public $baseUrl = '@web';
      public $js = ['js/demo.js'];
      public  $jsOptions = ['position' => View::POS_HEAD];
   }
?>
第6步 - 現在進入到 http://localhost:8080/index.php,應該看到 demo.js 指令碼包含在頁面的 head 部分。

這是一個Web應用程式的普遍做法,在生產模式下執行,以使HTTP快取 assets 資源。通過這樣做,最近修改的時間戳將被附加到所有已發布的 assets 資源。

第7步 - 轉到 config/web.php 並修改檔案web.php,如下面的程式碼。
<?php
   $params = require(__DIR__ . '/params.php');
   $config = [
      'id' => 'basic',
      'basePath' => dirname(__DIR__),
      'bootstrap' => ['log'],
      'components' => [
         'assetManager' => [
            'appendTimestamp' => true,
         ],
         'request' => [
            // !!! insert a secret key in the following (if it is empty) - this is
               //required by cookie validation
            'cookieValidationKey' => 'tw511.com',
         ],
         'cache' => [
            'class' => 'yii\caching\FileCache',
         ],
         'user' => [
            'identityClass' => 'app\models\User',
            'enableAutoLogin' => true,
         ],
         'errorHandler' => [
            'errorAction' => 'site/error',
         ],
         'mailer' => [
            'class' => 'yii\swiftmailer\Mailer',
            // send all mails to a file by default. You have to set
            // 'useFileTransport' to false and configure a transport
            // for the mailer to send real emails.
            'useFileTransport' => true,
         ],
         'log' => [
            'traceLevel' => YII_DEBUG ? 3 : 0,
            'targets' => [
               [
                  'class' => 'yii\log\FileTarget',
                  'levels' => ['error', 'warning'],
               ],
            ],
         ],
         'db' => require(__DIR__ . '/db.php'),
      ],
      'modules' => [
         'admin' => [
            'class' => 'app\modules\admin\Admin',
         ],
      ],
      'params' => $params,
   ];
   if (YII_ENV_DEV) {
      // configuration adjustments for 'dev' environment
      $config['bootstrap'][] = 'debug';
      $config['modules']['debug'] = [
         'class' => 'yii\debug\Module',
      ];
      $config['bootstrap'][] = 'gii';
      $config['modules']['gii'] = [
         'class' => 'yii\gii\Module',
      ];
   }
   return $config;
?>
我們已經增加了AssetManager 元件,並設定 appendTimestamp 屬性。

第8步,在Web瀏覽器的位址列中輸入: http://localhost:8080/index.php 。你會發現,所有的 assets 資源現在有一個時間戳,如下面的圖片所示。

Yii的核心Assetbundles

以下是 Yii 核心Assetbundles
  • yii\web\JqueryAsset ? 包含 jquery.js 檔案

  • yii\web\YiiAsset ? 包含yii.js檔案,它實現在模組組織JS程式碼的機制

  • yii\bootstrap\BootstrapAsset ? 包含yii.js檔案,它在模組組織實現JS程式碼的機制

  • yii\bootstrap\BootstrapPluginAsset ? 包函來自Twitter Bootstrap 框架JS檔案

  • yii\jui\JuiAsset ? 包括 jQuery UI庫中的CSS和JS檔案