Analysis on the use of the front-end resource package that comes with the Yii framework in PHP-PHP Tutorial-php.cn

This article mainly introduces the use of front-end resource packages in PHP's Yii framework, and lists some commonly used JavaScript and CSS resources in Yii. Friends in need can refer to the following

The resources in Yii are and Files related to Web pages can be CSS files, JavaScript files, pictures 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 yii\jui\DatePicker widget in a page, it will automatically include the required CSS and JavaScript files instead of requiring you to find them manually. These files are also included. When you upgrade the widget, it will automatically use the new version of the resource files. In this tutorial, we will detail the powerful resource management functions provided by Yii.

Resource package

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

Define resource package

The resource package is specified as a PHP class that inherits yii\web\AssetBundle. The package name is the 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 on other packages.

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

<?php

namespace app\assets;

use yii\web\AssetBundle;

class AppAsset extends AssetBundle
{
 public $basePath = &#39;@webroot&#39;;
 public $baseUrl = &#39;@web&#39;;
 public $css = [
  &#39;css/site.css&#39;,
 ];
 public $js = [
 ];
 public $depends = [
  &#39;yii\web\YiiAsset&#39;,
  &#39;yii\bootstrap\BootstrapAsset&#39;,
 ];
}

Copy after login

As above, the resource files specified by the AppAsset class are placed in the @webroot directory. The corresponding URL is @web. The resource bundle contains a CSS file css/site.css. There is no JavaScript file. It depends on the other two packages yii\web\YiiAsset and yii\bootstrap\BootstrapAsset. About the properties of yii\web\AssetBundle More details are described below:

yii\web\AssetBundle::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 yii\web\AssetBundle::basePath property and yii\web\AssetBundle::baseUrl should be set. Path aliases can be used here;
yii\web\AssetBundle::basePath: specifies the directory that contains the resource files in the resource bundle and can be accessed by the Web. When specifying yii\web\AssetBundle ::sourcePath attribute, the resource manager will publish the package's resources to a Web-accessible directory and override this attribute. If your resource file is in a Web-accessible directory, you should set this attribute so that you do not need to publish it again. Path aliases can be used here.

yii\web\AssetBundle::baseUrl: Specifies the URL corresponding to the yii\web\AssetBundle::basePath directory, similar to yii\web\AssetBundle::basePath. If you specify yii\web\AssetBundle::sourcePath property, the asset manager will publish these resources and override this property, path aliases can be used here.
yii\web\AssetBundle::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 expressed as a local JavaScript file (such as js/main.js). The actual path of the file is preceded by yii\web\AssetManager::basePath. The actual path of the file is The URL has yii\web\AssetManager::baseUrl in front of the path.
Absolute URL address is represented as an external JavaScript file, 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.
yii\web\AssetBundle::css: A JavaScript file containing the resource bundle Array, the array format is the same as yii\web\AssetBundle::js.
yii\web\AssetBundle::depends: A list of other resource bundles that this resource bundle depends on (detailed introduction in the next two sections).
yii\web\AssetBundle::jsOptions: When calling yii\web\View::registerJsFile() to register each JavaScript file in the bundle, specify the options passed to this method.
yii\web\AssetBundle::cssOptions: When calling yii\web\View::registerCssFile() to register each css file in the bundle, specify the options passed to this method.
yii\web\AssetBundle::publishOptions: Specify the options passed to this method when calling yii\web\AssetManager::publish() to publish the package resource file to the Web directory. Only used when the yii\web\AssetBundle::sourcePath attribute is specified.

Resource location

Resources can be divided into:

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

推荐将资源文件放到Web目录以避免不必要的发布资源过程，这就是之前的例子指定 yii\web\AssetBundle::basePath 而不是 yii\web\AssetBundle::sourcePath.

对于扩展来说，由于它们的资源和源代码都在不能Web访问的目录下，在定义资源包类时必须指定yii\web\AssetBundle::sourcePath属性。

注意: yii\web\AssetBundle::sourcePath 属性不要用@webroot/assets，该路径默认为 yii\web\AssetManager资源管理器将源资源发布后存储资源的路径，该路径的所有内容会认为是临时文件，可能会被删除。
资源依赖

当Web页面包含多个CSS或JavaScript文件时，它们有一定的先后顺序以避免属性覆盖，例如，Web页面在使用jQuery UI小部件前必须确保jQuery JavaScript文件已经被包含了，我们称这种资源先后次序称为资源依赖。

资源依赖主要通过yii\web\AssetBundle::depends 属性来指定，在AppAsset 示例中，资源包依赖其他两个资源包： yii\web\YiiAsset 和 yii\bootstrap\BootstrapAsset 也就是该资源包的CSS和JavaScript文件要在这两个依赖包的文件包含之后才包含。

资源依赖关系是可传递，也就是人说A依赖B，B依赖C，那么A也依赖C。

资源选项

可指定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 = [&#39;condition&#39; => &#39;lte IE9&#39;];

Copy after login

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

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

Copy after login

为链接标签包含