Detailed description of the use of the front-end resource pack in the PHP yii framework, the YII Framework _php Tutorial

Source: Internet
Author: User
Tags aliases

In the context of PHP's YII framework, the use of the front-end resource bundle, YII framework


The resources in Yii are files related to Web pages, which can be called by the Web server, such as CSS files, javascript files, pictures or videos, and resources placed in a Web accessible directory.

It's a little better to manage resources automatically through programs, for example, when you use the Yii\jui\datepicker widget on a page, it automatically contains the CSS and JavaScript files you need, rather than asking you to manually find the files and include them when you upgrade the widgets. It will automatically use the new version of the resource file, and in this tutorial we will dwell on the powerful resource management capabilities that YII provides.

Resource bundle

Yii manages resources in a resource bundle, a resource bundle is simply a collection of resources placed in a directory, and when a resource bundle is registered in a view, the CSS and JavaScript files in the package are included when the Web page is rendered.

Defining Resource Bundles

The resource bundle is specified as a PHP class that inherits Yii\web\assetbundle, the package name is a PHP class name that can be loaded automatically, and in the resource bundle class, you specify the location of the resource, which CSS and JavaScript files are included, and the dependencies that are related to the other packages.

The following code defines the primary resource bundle used by the underlying app template:

<?phpnamespace 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\bo Otstrapasset ',];}

As the Appasset class specifies that the resource file is placed in the @webroot directory, the corresponding URL is @web, the resource bundle contains a CSS file Css/site.css, no JavaScript file, dependent on the other two packages Yii\web\yiiasset and Yii\bootstrap\bootstrapasset, more details on the properties of Yii\web\assetbundle are described below:

    • Yii\web\assetbundle::sourcepath: Specifies that the package contains the root directory of the resource file, which should be set when the root directory cannot be accessed by the web, otherwise the Yii\web\assetbundle::basepath property should be set and yii\ Web\assetbundle::baseurl. Path aliases can be used here;
    • Yii\web\assetbundle::basepath: Specifies a directory that contains resource files in the resource bundle and can be accessed by the Web, when the Yii\web\assetbundle::sourcepath property is specified, the resource Manager Will publish the package's resources to a web-accessible and overwrite this property, and if your resource file is in a Web-accessible directory, you should set the property so that it doesn't have to be published anymore. 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 The Yii\web\assetbundle::sourcepath property, which the resource manager publishes and overrides, the path alias can be used here.
YII\WEB\ASSETBUNDLE::JS: An array containing the resource bundle JavaScript files, note that the forward slash "/" should be used as the directory delimiter, and each JavaScript file can be specified as one of the following two formats:

    • The relative path is represented as a local JavaScript file (such as Js/main.js), and the actual path of the file is preceded by the relative path with Yii\web\assetmanager::basepath, and the actual URL of the file is preceded by the path yii\web\ Assetmanager::baseurl.
    • An 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: An array containing the resource bundle JavaScript file, which is in the same format as YII\WEB\ASSETBUNDLE::JS.
    • Yii\web\assetbundle::d epends: An additional resource bundle that lists the resource bundle dependencies (described in more detail in the next two sections).
    • Yii\web\assetbundle::jsoptions: Specifies the option to pass to this method when calling Yii\web\view::registerjsfile () to register each JavaScript file for the package.
    • Yii\web\assetbundle::cssoptions: Specifies the option to pass to the method when Yii\web\view::registercssfile () is called to register each CSS file for the package.
    • Yii\web\assetbundle::p ublishoptions: When calling Yii\web\assetmanager::p ublish () publishes the package resource file to the Web directory when specifying the option to pass to the method, only when the yii\web\ is specified The Assetbundle::sourcepath property is used.

Resource Location

Depending on their location, resources can be divided into:

SOURCE resources: Resource files and PHP source code together, cannot be directly accessed by the Web, in order to use these source resources, they are copied to a Web-accessible web directory to become a published resource, this process is known as publishing resources, which are described in detail later.
Publish resource: The resource file is placed in a web directory that can be accessed directly through the web;
External resources: Resource files are placed on different Web servers of your Web application;
When you define a resource bundle class, if you specify the Yii\web\assetbundle::sourcepath property, any resource that uses a relative path is treated as a source resource, and if the attribute is not specified, it means that the resource is a publishing resource (so you should specify Yii\web\ Assetbundle::basepath and Yii\web\assetbundle::baseurl let Yii know where they are.

It is recommended that you put the resource file in the Web directory to avoid unnecessary publishing of the resource process, which is the previous example specifying Yii\web\assetbundle::basepath instead of Yii\web\assetbundle::sourcepath.

For extensions, the Yii\web\assetbundle::sourcepath property must be specified when defining a resource bundle class, because both their resources and source code are in directories that cannot be accessed by the Web.

Note: The Yii\web\assetbundle::sourcepath property does not use @webroot/assets, which defaults to the path that Yii\web\assetmanager resource Manager will store resources after it is published. All contents of the path are considered temporary files and may be deleted.
Resource dependency

When a Web page contains multiple CSS or JavaScript files, they have a certain order of precedence to avoid property overrides, for example, Web pages must ensure that jquery JavaScript files are included before using the jquery UI widget. We call this resource prioritization called resource dependency.

Resource dependencies are specified primarily through the Yii\web\assetbundle::d Epends property, in the Appasset example, the resource bundle relies on the other two resource bundles: Yii\web\yiiasset and Yii\bootstrap\ Bootstrapasset the CSS and JavaScript files for this resource bundle are included only after the files of the two dependent packages are included.

Resource dependencies are transitive, that is, people say a relies on b,b C, then a also relies on C.

Resource Options

You can specify the Yii\web\assetbundle::cssoptions and Yii\web\assetbundle::jsoptions properties to customize how the page contains CSS and JavaScript files, which are passed to yii\ The Web\view::registercssfile () and Yii\web\view::registerjsfile () methods are called when the view calls these methods to contain CSS and JavaScript files.

Note: The options set in the resource pack class apply to each Css/javascript file in the package, and if you want to use different options for each file, you should create a different resource bundle and use an option set in each package.
For example, a browser that only wants to IE9 or higher contains a CSS file that can use the following options:

Public $cssOptions = [' condition ' = ' LTE IE9 '];

This will be the CSS file in the package that is included with the following HTML tags:

 
  

The following code can be used for the link label Inclusion:

Public $cssOptions = [' noscript ' = ' = True];

To include the JavaScript file in the page Head area (the JavaScript file is included by default at the end of the body), use the following options:

Public $jsOptions = [' Position ' = \yii\web\view::P os_head];

Bower and NPM Resources

Most JAVASCRIPT/CSS packages are managed by bower and/or NPM, and if your app or extension uses these packages, it is recommended that you follow these steps to manage resources in the library:

Modify the application or extension of the Composer.json file to include the package in require, use the Bower-asset/packagename (Bower package) or Npm-asset/packagename (NPM package) to correspond to the library.
Create a resource bundle class and include the Javascript/css file you want to use with your app or extension in your class, set the Yii\web\assetbundle::sourcepath property to @bower/packagename or @npm/ PackageName, because the alias composer installs the Bower or NPM package to the corresponding directory.
Note: Some packages place their distributed files in a subdirectory, in which case you should specify a subdirectory as the Yii\web\assetbundle::sourcepath property value, for example, Yii\web\jqueryasset use @bower/ Jquery/dist rather than @bower/jquery.
Using Resource Bundles

To use a resource bundle, call the Yii\web\assetbundle::register () method in the view to register the resource first, for example, in a view template to register a resource bundle with the following code:

Use App\assets\appasset; Appasset::register ($this); $this represents a View object

If you register a resource bundle elsewhere, you should provide a view object, such as registering a resource bundle in a widget class, and you can get the View object by $this->view.

When registering a resource bundle in the view, Yii registers the resource bundle on which it depends, and if the resource bundle is placed in a directory that is inaccessible to the Web, it is published to an accessible directory, and subsequent when the view renders the page, the corresponding CSS and JavaScript files that are included in these registration packages are generated. And

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.