yii2 How to load css and js at the bottom of the page css rounded corners css layout css definition

Author: Bailang Source: www.manks.top/article/yii2_load_js_css_in_end

The copyright of this article belongs to the author, and you are welcome to reprint it. However, this statement must be retained without the author’s consent, and the original text link should be given in an obvious position on the article page, otherwise it will be retained The right to pursue legal liability.

As the saying goes, destiny is created by oneself and appearance is born by the heart, so how do our problems arise?

This question is relatively old but is often asked by people. The reason is,

Firstly, it is inevitable in actual development, and secondly, friends who are new to Yii like to hold on to it. Then

Why do people who understand this problem not worry about it? Alien: Why are you still bothering with this issue when everyone knows how to do it?

That’s okay, just take a look at it if it concerns everyone.

Generally speaking, the js files or codes inside the web page are placed in front of the bottom of the web page . This is because the web page is loaded from top to bottom. When users visit our page, try not to load js If a blank page is displayed for too long, users will be lost if they stay for too long.

yii2 is integrated with jQuery, and the jQuery file is loaded at the bottom of the page. Therefore, if our js code snippet is not loaded at the bottom of the page, a $undefined friendly prompt is very likely to occur.

I have a lot of nonsense and I really need to register for an account...

Let’s see how to deal with the js code snippet first

<?php
$this->registerJs('
$(function () {
//为所欲为的写你想要写的js代码吧
$......
});
', \yii\web\View::POS_END);

Yes, just use the registerJs method above to register, any friends are listening I don’t understand, what is registration? A simple understanding is to place your js code at the page location where you want to place it.

The first parameter is easy to understand, it is the js code block we want to write. The second parameter is that we need to specify the specific location where the code block is inserted on the page.

The second parameter is only discussed here, yiiwebView::POS_END, which means it is inserted before at the bottom of the page.

Of course there is a third parameter, which means an id mark of the js code block. If not specified, it will be generated by default and is ignored here.

Oh, by the way, don’t be confused with $this above, it refers to the yiiwebView object

Let’s take a look at how to introduce external js files.

The example on the official website is given like this

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

But people have said that we don’t recommend using it this way, because it makes the dependence and dependence complicated.

Okay, let’s take a look at how to use package management asset bundles to register.

Let’s open the file backendassetsAppAsset.php first and take a look at what it is. It’s really advanced. I look like I can’t understand it at all. It’s over. I can’t write anything below. I can’t understand how to explain it. Return. To get to the point, we need to seize the time to expand.

We added two static methods to the AppAsset class. The complete 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',
    ];<br>    //定义按需加载JS方法，注意加载顺序在最后  
    public static function addScript($view, $jsfile) {  
        $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);  
    }  
      
    //定义按需加载css方法，注意加载顺序在最后  
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);  
    }  
}

Let’s first talk about the functions and intentions of the added addScript and addCss. As mentioned above, it is not recommended to use them in the view The layer directly uses the $this->registerJsFile method to register the file. Here, we added the addScript method. In the future, the view layer will directly call this method to register the file.

Then why is this good? The benefits are very obvious. Calling this method avoids filling in dependencies in each registration file, which is very convenient.

It should be noted 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, it is very simple for us to load external js files in the view layer, like the following,

use backend\assets\AppAsset;
AppAsset::register($this);
AppAsset::addScript($this,'/css/main.js');

instead of being as cumbersome as the following:

$this->registerJsFile('/css/main.js',['depends'=>['backend\assets\AppAsset'], 'position'=> $this::POS_END]);
$this->registerJsFile('/css/left.js',['depends'=>['backend\assets\AppAsset']]);
$this->registerJsFile('/css/extension.js',['depends'=>['backend\assets\AppAsset']]);

At this point, we have completely implemented it in yii2 Load css, js code or external files at the bottom of the page.

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

Official documentation 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 introduces how yii2 loads css and js at the bottom of the page, including CSS and yii content. I hope it will be helpful to friends who are interested in PHP tutorials.