yii2 页面底部加载css和js的技巧

一般来说，网页内部的js文件或代码，都是放置在网页底部</body>的前面，这是因为网页自上而下加载，用户在访问我们页面的时候尽量不要因为加载js展现过长时间的空白页面，停留时间过长就白白流失了用户量。

yii2中是集成了jQuery的，而且jQuery文件是加载在页面底部的，因此，如果我们的js代码段不在页面底部加载，就很大可能会发生$未定义的友好提示。

我这废话一大堆得毛病确实需要去挂个号看看了...

先来看看js代码段怎么处理

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

对，就是用上面的registerJs方法注册，有小伙伴听不懂了，啥是注册，简单理解就是把你的js代码放置在你想要放的页面位置。

第一个参数嘛，很好理解，就是我们要写的js代码块。第二个参数就是我们需要指定代码块插入在页面的具体位置了。

第二个参数这里只讨论 \yii\web\View::POS_END，意思就是页面底部</body>之前插入。

当然还有第三个参数，意思是js代码块的一个id标示，不指定会默认生成，此处忽略。

哦对了，上面的$this不要混淆，这里是指yii\web\View对象

接下来一起看看怎么引入外部的js文件。

官网的例子是这样给的

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

但是人家说了，我们不建议这么用，这样依赖来依赖去关系复杂。

好了，我们来看看怎么使用包管理asset bundles进行注册吧。

我们先打开文件 backend\assets\AppAsset.php文件瞅瞅是什么高大上的东西，我擦，果然高深，我张作完全看不懂的样子，完了，下面没法写了，看不懂怎么讲，回归正题，我们要抓紧时间扩展下。

我们在AppAsset类里添加了两个静态方法，完整版的AppAsset类如下：

 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',
  ];  //定义按需加载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']);
  }
}

我们先来说说添加的addScript和addCss有啥作用，意图是啥，上面说了，不建议在view层直接用$this->registerJsFile方法注册文件，这里呢，我们添加的addScript方法，以后view层直接调用这个方法对文件进行注册。

那为啥这个就好了呢？好处是非常明显的，调用该方法避免了每次注册文件都要填写依赖关系，十分方便。

其中需要说明的是，需要注册的文件都会在yii.js和bootstrap.js文件的后面，这也正是我们所需要的。

这样一来，我们在view层加载外部js文件也就灰常简单了,像下面这样，

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

而不必像下面这样繁琐：

$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']]);

到此喃，我们就完整的实现了在yii2中页面底部加载css，js代码或外部文件了。

以上所述是小编给大家介绍的yii2 页面底部加载css和js的技巧的相关内容，希望对大家有所帮助！

赞 (0)

相关推荐

  • Yii2中使用join、joinwith多表关联查询

    表结构 现在有客户表.订单表.图书表.作者表, 客户表Customer (id customer_name) 订单表Order (id order_name customer_id book_id) 图书表 (id book_name author_id) 作者表 (id author_name) 模型定义 下面是这4个个模型的定义,只写出其中的关联 Customer class Customer extends \yii\db\ActiveRecord { // 这是获取客户的订单,由上面我们

  • Yii2如何批量添加数据

    批量添加这个操作,在实际开发中经常用得到,今天小编抽空给大家整理些有关yii2批量添加的问题,感兴趣的朋友一起看看吧. 在上篇文章给大家介绍了关于浅析Yii2 gridview实现批量删除教程,当然,着重点在于怎么去操作gridview了,今儿我们来好好谈谈yii2如何批量添加数据? 有同学嚷嚷了,这还不简单,我foreach一循环,每个循环里面直接把数据插入到数据库,简单粗暴完事!我擦嘞,哥,你要是跟我在一个公司,我觉得第二天见到你的概率可就不大了! 话不多说,说多了你在骂我,我们步入正题,先

  • Yii2增删改查之查询 where参数详细介绍

    概述 由于官方手册关于where的介绍比较少,所以想自己整理一下,以便大家的学习和自己回头查询.本篇文章会详细介绍and.or.between.in.like在where方法中的使用方法和举例. and // 我们要查询id大于1并且小于3的数据 $userInfo = User::find()->where(['and' , 'id > 1' , 'id < 3'])->all(); // 或者用以下方式,更为安全 $userInfo = User::find()->whe

  • Yii2创建表单(ActiveForm)方法详解

    本文实例讲述了Yii2创建表单(ActiveForm)的方法.分享给大家供大家参考,具体如下: 由于表单涉及到一些验证方面的信息,属性设置又比较多.比较复杂,所以哪里有什么不正确的地方请留言指点 目录 表单的生成 表单中的方法   ActiveForm::begin()方法   ActiveForm::end()方法   getClientOptions()方法   其它方法:errorSummary.validate.validateMultiple 表单中的参数   表单form自身的属性

  • Yii2框架引用bootstrap中日期插件yii2-date-picker的方法

    本文实例讲述了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法.分享给大家供大家参考,具体如下: 最近在学习yii2 框架,发现框架很强大,而且结合了时下许多新的技术在里面. 简单记录一下yii2-date-picker插件的使用方法: 首先先了解一下github中的相关资源:https://github.com/2amigos/yii2-date-picker-widget 其次:在自己的项目中利用上面链接中的相关方法下载此资源,命令为: php compos

  • Yii数据模型中rules类验证器用法分析

    本文实例讲述了Yii数据模型中rules类验证器用法.分享给大家供大家参考,具体如下: public function rules() { return array( array('project_id, type_id, status_id, owner_id, requester_id,', 'numerical', 'integerOnly'=>true), array('name', 'length', 'max'=>256), array('description', 'length

  • Yii2实现自定义独立验证器的方法

    本文实例讲述了Yii2实现自定义独立验证器的方法.分享给大家供大家参考,具体如下: 新建一个文件: <?php /** * author : forecho <caizhenghai@gmail.com> * createTime : 2015/7/1 14:54 * description: */ namespace common\helps; use yii\validators\Validator; class ArrayValidator extends Validator {

  • yii2中的rules 自定义验证规则详解

    yii2的一个强大之处之一就是他的Form组件,既方便又安全.有些小伙伴感觉用yii一段时间了,好嘛,除了比tp"难懂"好像啥都没有. 领导安排搞一个注册的功能,这家伙刷刷刷的又是百度啥啥啥好的表单样式,又是百度啥啥啥validate验证,真替这家伙捏把汗. 当然啦,废话说在前头,咱们的重点喃,是要利用ActiveForm,然后怎么去实现自定义验证规则. 先来说说场景: 条件:①.有两个字段分别是A和B ②.A有两个值分别是1和2 需求是:当用户选择的A的值等于1的时候,B的值必须填写

  • Yii2.0高级框架数据库增删改查的一些操作

    yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2使用中的一些基本的增删改查操作. User::find()->all();    //返回所有用户数据: User::findOne($id);   //返回 主键 id=1  的一条数据: User::find()->where(['name' => 'ttt'])->one();   //返回 ['name' => 'ttt'] 的一条数据: User::find(

  • Yii2验证器(Validator)用法分析

    本文实例讲述了Yii2验证器(Validator)用法.分享给大家供大家参考,具体如下: 先看一下验证器的使用. public function rules() { return [ [['email', 'password'], 'required'], ['password', 'string', 'min'=>6], ]; } 如上所示,验证器主要使用在rules里面,对当前model里面的属性值进行验证以检查是否满足某种要求. 验证器使用格式: 书写格式为:[需要验证的属性,验证器名称,

  • Yii核心验证器api详解

    本文实例讲述了Yii核心验证器api.分享给大家供大家参考,具体如下: 核心验证器 Core Validators 前言 Yii 提供了一系列常用的核心 validators, 你可在 yii\validators namespace 中找到. 不用使用长的验证器类名, 你可以使用别名代替他们. 例如, 你可以使用别名 required 代替 yii\validators\RequiredValidator 类: <?php public function rules() { return [

  • yii2.0之GridView自定义按钮和链接用法

    yii2.0之GridView自定义按钮和链接用法

    本文实例讲述了yii2.0之GridView自定义按钮和链接用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <?= GridView::widget([         'dataProvider' => $dataProvider,         //'filterModel' => $searchModel,         'columns' => [             ['class' => 'yii\grid\SerialColumn'

随机推荐