Tips for loading css and js at the bottom of yii2 page

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 display it because of loading js If the page remains blank for too long, users will be lost in vain 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 really need to register for an account...

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

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

Yes, just use the registerJs method above to register, there are small My friends don’t understand. What is registration? To simply understand it is to place your js code on the page where you want it to be.

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 first The backendassetsAppAsset.php file took a look at what it is. I wiped it. It is really advanced. I looked like I couldn't understand it at all. It's over. I can't write more. I don't understand how to explain it. Let's get back to the topic. We have to hurry up. Expand below.

We have 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 = &#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;,
  ];  //定义按需加载JS方法，注意加载顺序在最后 
  public static function addScript($view, $jsfile) { 
    $view->registerJsFile($jsfile, [AppAsset::className(), &#39;depends&#39; => &#39;backend\assets\AppAsset&#39;]); 
  } 
  //定义按需加载css方法，注意加载顺序在最后 
  public static function addCss($view, $cssfile) { 
    $view->registerCssFile($cssfile, [AppAsset::className(), &#39;depends&#39; => &#39;backend\assets\AppAsset&#39;]); 
  } 
}

Let’s first talk about what the added addScript and addCss do and what their intentions are. As mentioned above, no. It is recommended to directly use the $this->registerJsFile method to register the file in the view layer. 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 complicated 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']]);

That’s it, We have completely implemented loading css, js code or external files at the bottom of the page in yii2.

The above is the content of the techniques for loading css and js at the bottom of the yii2 page. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!