Yii2 page Bottom load css and JS tips _php instance

Source: Internet
Author: User
Tags blank page yii

In general, the Web page inside the JS file or code, are placed in the bottom of the page </body> front, this is because the Web page loaded from the top down, users visit our page as far as possible because the load JS show too long blank page, stay too long to lose the amount of users in vain.

YII2 is integrated in jquery, and the jquery file is loaded at the bottom of the page, so if our JS code segment is not loaded at the bottom of the page, it is likely that $ undefined friendly hints will occur.

I really need to hang up a number to see if I've got a lot of crap.

First to see how the JS code section to deal with

 <?php
$this->registerjs ('
$ (function () {
//do whatever you want to write JS code
$ ...
});
', \yii\ Web\view::P os_end);

Yes, is to use the above Registerjs method registration, have a small partner to understand, what is registered, simple understanding is to put your JS code placed in the page you want to place.

The first parameter, very good understanding, is that we want to write the JS code block. The second argument is that we need to specify where the code block is inserted in the page.

The second argument here only discusses \yii\web\view::P os_end, meaning that the page is inserted at the bottom </body> before.

Of course, there is a third parameter, meaning that a JS code block ID indicator, do not specify the default generated, here ignored.

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

Next look at how to introduce the external JS file.

The official website example is this gives the

 

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

OK, let's see how to use Package management asset bundles for registration.

We first open the file backend\assets\appasset.php file to see what tall things, I rub, really advanced, I Zhang completely do not understand the appearance, finished, below can not write, see do not understand how to speak, return to the topic, we should 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< c7/>{public
  $basePath = ' @webroot ';
  Public $baseUrl = ' @web ';
  Public $css = [
    ' Css/site.css ',
  ];
  Public $JS = [
  ];
  Public $depends = [
    ' Yii\web\yiiasset ',
    ' Yii\bootstrap\bootstrapasset ',
  ];  Defines the on demand load JS method, noting that the load order is in the last public 
  static function Addscript ($view, $jsfile) { 
    $view->registerjsfile ($ Jsfile, [Appasset::classname (), ' Depends ' => ' backend\assets\appasset ']); 
  Define on-demand loading of CSS methods, noting that the load order is in the last public 
  static function Addcss ($view, $cssfile) { 
    $view->registercssfile ($ Cssfile, [Appasset::classname (), ' Depends ' => ' backend\assets\appasset ']); 
  } 

We first say add addscript and addcss what role, the intention is what, said above, do not recommend the view layer directly with the $this->registerjsfile method to register files, here, we add the Addscript method, The view layer will then call this method directly to register the file.

Then why is this so good? The benefits are obvious, and calling this method avoids the need to fill in dependencies every time a registration file is completed.

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

As a result, it is often easy to load external JS files in the view layer, as follows,

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

Instead of having to be as cumbersome 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 ']]);

In this Nan, we are fully implemented in the yii2 of the bottom of the page load CSS,JS code or external files.

The above mentioned is a small set of Yii2 page to introduce the bottom of the load CSS and JS skills related content, I hope to help you!

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.