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


Posted in PHP onApril 21, 2016

一般来说,网页内部的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的技巧的相关内容,希望对大家有所帮助!

PHP 相关文章推荐
随时给自己贴的图片加文字的php水印
Mar 16 PHP
PHP使用CURL获取302跳转后的地址实例
May 04 PHP
50个PHP程序性能优化的方法
Jun 02 PHP
ThinkPHP中自定义目录结构的设置方法
Aug 15 PHP
PHP获取二维数组中某一列的值集合
Dec 25 PHP
YII使用url组件美化管理的方法
Dec 28 PHP
PHP5.5迭代生成器用法实例详解
Mar 16 PHP
PHP发送AT指令实例代码
May 26 PHP
php mongodb操作类 带几个简单的例子
Aug 25 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
Nov 29 PHP
php实现文件与16进制相互转换的方法示例
Feb 16 PHP
PHP实现根据数组某个键值大小进行排序的方法
Mar 13 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
Apr 20 #PHP
又拍云异步上传实例教程详解
Apr 19 #PHP
ThinkPHP中order()使用方法详解
Apr 19 #PHP
ThinkPHP中limit()使用方法详解
Apr 19 #PHP
ThinkPHP中where()使用方法详解
Apr 19 #PHP
yii2中的rules 自定义验证规则详解
Apr 19 #PHP
PHP序列化/对象注入漏洞分析
Apr 18 #PHP
You might like
PHP中is_file()函数使用指南
2015/05/08 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
Python入门教程之if语句的用法
2015/05/14 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
Python 寻找局部最高点的实现
2019/12/05 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
最热门的自我评价
2013/12/30 职场文书
2014年大学生自我评价
2014/01/19 职场文书
青春寄语大全
2014/04/09 职场文书
伊索寓言读书笔记
2015/06/30 职场文书
2015年女工委工作总结
2015/07/27 职场文书
公司保洁员管理制度
2015/08/04 职场文书
PHP解决高并发问题
2021/04/01 PHP
python缺失值的解决方法总结
2021/06/09 Python