如何灵活使用AssetBundle管理CSS样式及JS脚本

html-css011

如何灵活使用AssetBundle管理CSS样式及JS脚本,第1张

参考下面代码:

namespace app\assets

use yii\web\AssetBundle

class AppAsset extends AssetBundle {

public $basePath = '@webroot'

public $baseUrl = '@web'

public $css = [

'public/skin/default_skin/css/theme.css',

]

public $js = [

'public/vendor/jquery/jquery-1.11.1.min.js',

'public/vendor/jquery/jquery_ui/jquery-ui.min.js',

'public/js/bootstrap/bootstrap.min.js',

]

//依赖包

public $depends = [

//这里写依赖包即可,没有就别写

]

//导入当前页的功能js文件,注意加载顺序,这个应该最后调用

public static function addPageScript($view, $jsfile) {

$view->registerJsFile($jsfile, [AppAsset::className(), 'depends' =>'app\assets\AppAsset'])

}

//导入编辑器

public static function addCkeditor($view) {

$view->registerJsFile('/public/js/utility/ckeditor/ckeditor.js', [AppAsset::className(), 'depends' =>'app\assets\AppAsset'])

}

}

可以看到上面创建的类中已经预定义了两个静态方法addPageScript和addCkeditor,其中addCkeditor是一个第三方的js组件,是个编辑器,具体的开发环境中可以写别的方法名及加载别的组件。

那么上的这个东西写好后应该如何去使用呢?

在模板页开头部分加上这句话:

//自动加载资源

AppAsset::register($this)

这样会在模板页加载基础的项目资源文件,比如css和js什么的。

现在有一个视图叫create-mail,需要使用ckeditor编辑器,那么应该在create-mail视图的开头加上这句话:

//导入ckeditor包资源

\app\assets\AppAsset::addCkeditor($this)

最后解释一下,addCkeditor()方法是预先定义好的,这样可以把一些常见的包都拆包并预处理好,如果觉得麻烦可以直接使用如下的方式:

//导入ckeditor包资源

\app\assets\AppAsset::addPageScript($this,'js文件相对路径或url')

以上的例子只是使用了js文件作为一个简单的介绍,css样式的加载也是一样的道理。

//声明函数startList()

startList = function() {

//如果浏览器支持DOM

if (document.all&&document.getElementById) {

//将id为nav的元素赋给变量navRoot,(貌似这个navRoot是全局变量,不然要用var声明)

navRoot = document.getElementById("nav")

//定义一个循环,循环变量i的上限是id为nav的元素的字节点数量,此时navRoot的子节点的集合是数组,i自加1

for (i=0i<navRoot.childNodes.lengthi++) {

//将数组navRoot.childNodes下标索引为i的元素赋给变量node

node = navRoot.childNodes[i]

//如果node的标签的是LI

if (node.nodeName=="LI") {

//当鼠标移动到这个LI标签上时触发以下函数

node.onmouseover=function() {

//这句相当于this.className = this.className + " over",className是其class属性对应的css类名

this.className+=" over"

}

//当鼠标离开该元素时出发以下函数

node.onmouseout=function() {

//此时元素的class属性中的" over"被""替换,""表示空

this.className=this.className.replace(" over", "")

}

}

}

}

}

//当页面读取时,触发startList函数

window.onload=startList