How to load css and js at the bottom of the page in yii2, yii2 loads cssjs

How to load css and js at the bottom of the page in yii2, yii2 loads cssjs_PHP tutorial

WBOY

Release： 2016-07-12 08:54:05

Original

849 people have browsed it

yii2 How to load css and js at the bottom of the page, yii2 loads cssjs

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 a link to the original text must be provided in an obvious position on the article page. Otherwise, we reserve 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,

First of all, it is inevitable in actual development, and secondly, friends who are new to Yii like to hold on to it. That

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

That’s okay, just take a look at it for everyone involved.

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 it because of js displays a blank page for too long, and if it stays for too long, users will be lost in vain.

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 get an account checked...

Let’s first take a look at how to deal with js code snippets

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

Copy after login

Yes, you just use the registerJs method above to register. Some friends don’t understand. What is registration? The simple understanding is to place your js code on the page 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 as follows

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

Copy after login

But people have said that we don’t recommend using it this way. It’s complicated to rely on it.

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 looked like I couldn’t understand it at all. It’s over. I can’t write anything below. I can’t understand how to explain it. Back to the topic, we must 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']);  
    }  
}

Copy after login

Let’s first talk about the function and intention of the added addScript and addCss. As mentioned above, it is not recommended to directly use the $this->registerJsFile method to register files in the view layer. Here, we add 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, as shown below,

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

Copy after login

Without having to be 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']]);

Copy after login

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

If you 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