Yii2 how to load CSS and js css css layout at the bottom of the page CSS set

Author: White Wolf Source: Www.manks.top/article/yii2_load_js_css_in_end

The copyright belongs to the author, welcome reprint, but without the consent of the author must retain this paragraph, and in the article page obvious location to the original link, otherwise reserves the right to pursue legal responsibility.

The so-called life is made by oneself, the heart is born, then our problem is how to throw out of the Nan?

This question is a long-time but often asked question. The reason,

The actual development of the inevitable, and secondly, just contact Yii small partners like to hold on. That

Why is it that people who have known the problem don't struggle with it? Aliens: Lou Zhu you si not si Satan, others know how to do it still tangled this problem why.

That's OK, it's about the people who are looking at it.

In general, the Web page inside the JS file or code, are placed in front of the bottom of the page, this is because the page load, the user in the visit to our page as far as possible not because the loading JS show too long blank page, stay too long on the loss of the user volume.

YII2 is integrated with jquery, and the jquery file is loaded at the bottom of the page, so if our JS snippet does not load at the bottom of the page, it is very likely that an undefined friendly hint will occur.

I really need to hang a number to see the problem of a lot of nonsense ...

Let's take a look at how JS code snippet handles

 
  Registerjs (' $ ' (function () {//) write the JS code you want to write the $ ...}); ', \yii\web\view::P os_end);

Yes, is to use the above Registerjs method registration, there are small partners do not understand, what is registered, simple to understand is to put your JS code in the page you want to place.

The first parameter, well understood, is the JS code block we are going to write. The second parameter is that we need to specify the code block to be inserted in the specific location of the page.

The second parameter is discussed here only \yii\web\view::P os_end, meaning that is inserted before the bottom of the page.

Of course there is a third parameter, which means that the JS code block of an ID, not specified by default generated, ignored here.

Oh yes, don't confuse the $this above, this refers to the Yii\web\view object

Next look at how to introduce the external JS file.

This is the case for the official website.

$this->registerjsfile (' http://example.com/js/main.js ', [' depends ' = [\yii\web\jqueryasset::classname ()]]);

But it is said that we do not recommend such use, so rely on to rely on the complexity of the relationship.

Well, let's see how to register with package management asset bundles.

We first open the file backend\assets\appasset.php file to see what is tall on the thing, I rub, really advanced, I coupon completely do not understand the look, finished, the following can not write, do not understand how to say, return to the point, we have to seize the time to expand.

We have added two static methods to the Appasset class, and the full version of the Appasset class is as follows:

namespace backend\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 ',]; 
//define on-demand load JS method, note load order at last public static function Addscript ($view, $jsfile) {$view->registerjsfile ($      Jsfile, [Appasset::classname (), ' depends ' = ' backend\assets\appasset ']); }//define load CSS method on demand, note load order at last public static function Addcss ($view, $cssfile) {$view->REGISTERCSSF      Ile ($cssfile, [Appasset::classname (), ' depends ' = ' backend\assets\appasset ']); }  }
 

We first say add addscript and addcss have what role, intention is what, above said, do not recommend in the view layer directly with $this->registerjsfile method register file, here, we add Addscript method, Later, the view layer calls this method directly to register the file.

Then why is this so good? The benefit is very obvious, it is very convenient to call this method to avoid having to fill in dependencies for each registration file.

It is necessary to note that the files that need to be registered will be behind the yii.js and Bootstrap.js files, which is exactly what we need.

In this way, we load the external JS file in the view layer is often simple, like the following,

Use Backend\assets\appasset; Appasset::register ($this); Appasset::addscript ($this, '/css/main.js ');

It doesn't have to be as tedious as the following:

$this->registerjsfile ('/css/main.js ', [' Depends ' =>[' backend\assets\appasset '], ' position ' = $this::P os_ END]), $this->registerjsfile ('/css/left.js ', [' Depends ' =>[' backend\assets\appasset ']); $this Registerjsfile ('/css/extension.js ', [' Depends ' =>[' backend\assets\appasset ']);

To this, we complete the implementation of the YII2 in the bottom of the page load CSS,JS code or external files.

If you still want to learn more, you can continue to refer to the official documentation.

Official Document Http://www.yiiframework.com/doc-2.0/guide-structure-assets.html

Http://www.yiiframework.com/doc-2.0/guide-output-client-scripts.html

The above describes how yii2 in the bottom of the page to load CSS and JS, including the css,yii aspects of the content, I hope that the PHP tutorial interested in a friend helpful.

