Detailed explanation of the use of front-end resource packages in PHP's Yii framework

Resources in Yii are files related to Web pages, which can be CSS files, JavaScript files, images or videos, etc. The resources are placed in a directory accessible to the Web and are directly called by the Web server.

It is better to automatically manage resources through programs. For example, when you use the yiijuiDatePicker widget in a page, it will automatically include the required CSS and JavaScript files, instead of requiring you to manually find these files and include them. When you upgrade a widget, it will automatically use the new version of the resource file. In this tutorial, we will detail the powerful resource management functions provided by Yii.

Resource Pack

Yii manages resources in resource packages. Resource packages are simply a collection of resources placed in a directory. When a resource package is registered in a view, the CSS and JavaScript files in the package will be included when rendering the web page.

Define resource package

The resource package is designated as a PHP class that inherits yiiwebAssetBundle. The package name is a PHP class name that can be automatically loaded. In the resource package class, you need to specify the location of the resource, which CSS and JavaScript files it contains, and its dependencies with other packages.

The following code defines the main resource package used by the basic application template:

<&#63;php

namespace app\assets;

use yii\web\AssetBundle;

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',
 ];
}

Copy after login

As above, the resource file specified by the AppAsset class is placed in the @webroot directory, and the corresponding URL is @web. The resource package contains a CSS file css/site.css, no JavaScript file, and relies on the other two packages yiiwebYiiAsset and yiibootstrapBootstrapAsset. About More details on the properties of yiiwebAssetBundle are described below:

yiiwebAssetBundle::sourcePath: Specifies the root directory of the bundle containing resource files. This property should be set when the root directory cannot be accessed by the Web. Otherwise, the yiiwebAssetBundle::basePath property and yiiwebAssetBundle::baseUrl should be set. Path aliases can be used here;
yiiwebAssetBundle::basePath: Specifies the directory that contains the resource files in the resource bundle and is Web-accessible. When specifying the yiiwebAssetBundle::sourcePath attribute, the resource manager will publish the resources of the package to a Web-accessible directory and override this attribute. If you If the resource file is in a Web-accessible directory, this attribute should be set so that it does not need to be published again. Path aliases can be used here.

yiiwebAssetBundle::baseUrl: Specifies the URL corresponding to the yiiwebAssetBundle::basePath directory. Similar to yiiwebAssetBundle::basePath, if you specify the yiiwebAssetBundle::sourcePath attribute, the resource manager will publish these resources and override this attribute. The path alias can be used here.
yiiwebAssetBundle::js: An array containing the JavaScript files of the resource bundle. Note that the forward slash "/" should be used as the directory separator. Each JavaScript file can be specified in one of the following two formats:

The relative path is represented as a local JavaScript file (such as js/main.js). The actual path of the file is preceded by yiiwebAssetManager::basePath. The actual URL of the file is preceded by yiiwebAssetManager::baseUrl.
Absolute URL addresses are represented as external JavaScript files, such as http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js or //ajax.googleapis.com/ajax/libs /jquery/2.1.1/jquery.min.js.
yiiwebAssetBundle::css: An array containing the JavaScript files of the resource bundle. The array format is the same as yiiwebAssetBundle::js.
yiiwebAssetBundle::depends: A list of other resource bundles that this resource bundle depends on (detailed introduction in the next two sections).
yiiwebAssetBundle::jsOptions: When calling yiiwebView::registerJsFile() to register each JavaScript file in the bundle, specify the options passed to this method.
yiiwebAssetBundle::cssOptions: When calling yiiwebView::registerCssFile() to register each css file in the bundle, specify the options passed to this method.
yiiwebAssetBundle::publishOptions: When calling yiiwebAssetManager::publish() to publish the package resource file to the Web directory, specify the options passed to this method, only used when the yiiwebAssetBundle::sourcePath attribute is specified.

Resource location

Resources can be classified according to their location:

Source resources: Resource files and PHP source code are placed together and cannot be directly accessed by the Web. In order to use these source resources, they must be copied to a Web-accessible Web directory to become published resources. This process is called publishing. Resources will be introduced in detail later.
Publish resources: Resource files are placed in a Web directory that can be directly accessed through the Web;
External resources: Resource files are placed on a different web server than your web application;
When defining the resource bundle class, if you specify the yiiwebAssetBundle::sourcePath attribute, it means that any resources using relative paths will be used as source resources; if you do not specify this attribute, it means that these resources are published resources (therefore you should specify yiiwebAssetBundle ::basePath and yiiwebAssetBundle::baseUrl let Yii know their location).

It is recommended to place resource files in the web directory to avoid unnecessary resource publishing process. This is why the previous example specifies yiiwebAssetBundle::basePath instead of yiiwebAssetBundle::sourcePath.

For extensions, since their resources and source codes are in directories that cannot be accessed by the Web, the yiiwebAssetBundle::sourcePath attribute must be specified when defining the resource bundle class.

Note: Do not use @webroot/assets for the yiiwebAssetBundle::sourcePath attribute. This path defaults to the path where the yiiwebAssetManager resource manager stores the source resources after publishing them. All contents of this path will be considered temporary files and may be deleted. .
Resource Dependencies

When a web page contains multiple CSS or JavaScript files, they have a certain order to avoid property overwriting. For example, a web page must ensure that the jQuery JavaScript file has been included before using the jQuery UI widget. We call this The sequence of resources is called resource dependency.

Resource dependencies are mainly specified through the yiiwebAssetBundle::depends attribute. In the AppAsset example, the resource bundle depends on two other resource bundles: yiiwebYiiAsset and yiibootstrapBootstrapAsset. That is, the CSS and JavaScript files of the resource bundle must be in the two dependency bundles. Included after the file is included.

Resource dependencies are transitive, that is, if people say A depends on B and B depends on C, then A also depends on C.

Resource Options

可指定yii\web\AssetBundle::cssOptions 和 yii\web\AssetBundle::jsOptions 属性来自定义页面包含CSS和JavaScript文件的方式，这些属性值会分别传递给 yii\web\View::registerCssFile() 和 yii\web\View::registerJsFile() 方法，在视图调用这些方法包含CSS和JavaScript文件时。

注意: 在资源包类中设置的选项会应用到该包中每个 CSS/JavaScript 文件，如果想对每个文件使用不同的选项，应创建不同的资源包并在每个包中使用一个选项集。
例如，只想IE9或更高的浏览器包含一个CSS文件，可以使用如下选项：

public $cssOptions = ['condition' => 'lte IE9'];

Copy after login

这会是包中的CSS文件使用以下HTML标签包含进来：

<!--[if lte IE9]>
<link rel="stylesheet" href="path/to/foo.css">
<![endif]-->

Copy after login

为链接标签包含

Detailed explanation of the use of front-end resource packages in PHP's Yii framework_php skills