Yii - 资产

简述

资产是可以在网页中引用的文件（css、js、视频、音频或图像等）。Yii 管理资产包中的资产。资产包的目的是在代码库中包含一组相关的JS或CSS文件，并能够在单个 PHP 调用中注册它们。资产包也可以依赖于其他资产包。

在资产文件夹中，您会找到基本应用程序模板的资产包 -
```
<?php
   namespace app\assets;
   use yii\web\AssetBundle;
   /**
   * @author Qiang Xue <qiang.xue@gmail.com>
   * @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 的属性

以下是 AssetBundle 的属性。

basePath - 定义包含此捆绑包中资产文件的 Web 可访问目录。
baseUrl - 指定对应于 basePath 属性的 URL。
js - 定义此包中包含的 JS 文件数组。
css - 定义此包中包含的 CSS 文件的数组。
depends- 定义此捆绑包所依赖的资产捆绑包的数组。这意味着当前资产包的 CSS 和 JS 文件将包含在包之后，这些包由depends属性声明。
sourcePath - 定义包含资产文件的根目录。如果根目录不可通过 Web 访问，则应设置此属性。否则，您应该设置basePath和baseUrl属性。
cssOptions - 定义将传递给yii\web\View∷registerCssFile函数的选项。
jsOptions - 定义将传递给yii\web\View::registerJsFile函数的选项。
publishOptions：指定将传递给yii\web\AssetManager::publish函数的选项。

资产分类

根据位置，资产可分为 -

源资产- 资产位于无法通过 Web 直接访问的目录中。应将它们复制到 Web 目录，以便在页面中使用源资产。这个过程称为资产发布。
已发布资产- 资产位于网络可访问目录中
外部资产- 资产位于另一个 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 浏览器指向http://localhost:8080/index.php，您应该会看到以下 chrome 控制台输出。

您还可以定义jsOptions和cssOptions属性来自定义CSS和JS文件包含在页面中的方式。默认情况下，JS 文件包含在结束 body 标记之前。

第 5 步- 要在 head 部分包含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 缓存是一种常见的做法。通过这样做，最后修改时间戳将附加到所有已发布的资产。

第 7 步- 转到config文件夹并修改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' => 'ymoaYrebZHa8gURuolioHGlK8fLXCKjO',
         ],
         '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' => [
         'hello' => [
            'class' => 'app\modules\hello\Hello',
         ],
      ],
      '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。您会注意到所有资产现在都有一个时间戳，如下图所示。

核心 Yii 资产包

以下是 Core Yii Assetbundles。
- yii\web\JqueryAsset - 包含 jquery.js 文件。
- yii\web\YiiAsset - 包含 yii.js 文件，它实现了在模块中组织 JS 代码的机制。
- yii\bootstrap\BootstrapAsset - 包括来自 Twitter Bootstrap 框架的 CSS 文件。
- yii\bootstrap\BootstrapPluginAsset - 包含来自 Twitter Bootstrap 框架的 JS 文件。
- yii\jui\JuiAsset - 包含来自 jQuery UI 库的 CSS 和 JS 文件。

Yii - 资产

简述

AssetBundle 的属性

资产分类

使用资产包

核心 Yii 资产包