你会如何来管理所有CSS文件,JS与图片

html-css08

你会如何来管理所有CSS文件,JS与图片,第1张

先说CSS文件:

现在一般用CSS预处理器,比如SCSS 或者 LESS 来进行管理。个人喜好使用SCSS,因为基本语法跟CSS一样,甚至CSS文件后缀名改成SCSS,就是一个SCSS文件了~!所以,我用SCSS来管理CSS文件。

一个网站中,设计到的板块很多,样式也很多,功能也多,所以SCSS我一般我会按照功能,板块之类的分成几大块。比如,我会用以下SCSS文件:

_public.scss  公用样式,去掉浏览器的差异

_button.scss  按钮样式模块,专门做按钮用的。

_font.scss  字体图标。

_banner.scss  banner部分的样式

_header.scss   头部样式。等等

然后在一个  web.scss中,通过 @import 命名导入对应的样式。比如:

@import "public"

@import "button"

这样,scss会把多个scss文件整合为一个css文件~!非常方便~!具体scss,你可以查看中文官网。https://www.sass.hk

至于图片:

一般我都放在 images文件夹中。也有人喜欢用 img 作为这个文件夹名字,无所谓。

然后再images里面,根据项目需要再分几个文件夹就ok了。只要目录关系正确,清晰,能提高开发效率,怎么都可以。

别人项目中到底是怎么管理的我不知道, 就你举例的那几个问题可以瞎扯一下。

1. osc 的 js, css 加了版本参数是因为这些文件都被缓存在了客户端,当服务器有修改的时候把参数改一下,客户端会取最新的

2. 猪八戒JS和CSS, http://t4.zbjimg.com/min/ 是个后台服务,把参数传递给他的所有js 或者css 合并压缩成一个文件,为的是减少客户端的请求数(我想后台也应该有个合并后的缓存文件,最后的参数 v 和上面说的作用一样)

3. 百度的我没有帐号,也就没有去看, 如果真如你所说的那样js/css和每个用户相关,那可能是模版生成的吧。

4. css / js 放到单独的文件还是直接写在页面这是需要自己权衡。 共用的代码建议放到单独的文件,方便管理。 如果是某个页面才会用到那放到页面更合适。

2.0的变化相信大家都看到了,其中对一个资源包概念做出了很完美的实现,那就是AssetBundle,但是很多初学者朋友可能不太能够正确的领会其中的含义

我画了一张图,大家可以将就看一下:

其中,控制器动作的视图(view)渲染顺序是优先于我们的模板页(layout)的,那么一旦我们在某个视图中使用了新的JS库,或新的CSS样式文件,那么我们如何去处理呢?

以下方式是错误的,请避免使用:

有的人会直接在视图里添加对css或者js的link引用,这样引入的文件是在视图区域,而yii的默认JS加载会放在模板页的最后,这样可能导致依赖关系混乱。

比如你视图中引用的js文件里调用了jquery包,但是执行时jquery的加载代码在HTML页面的末尾,这样导致页面脚本错误。

还有人会图省事,直接把项目中所有的js或css文件都书写layout模板页里,这样产生大量的无效样式或js,影响了加载效率及页面错位风险。

所以正确的方式应该是通过AssetBundle去解决这个问题,先发一个简单的类给大家看一下:

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样式的加载也是一样的道理。

这样做的好处是,即使在视图里加载css或js也会因为依赖关系而出现在视图外面的常规加载区域中,规范了很多。

同时也因为依赖关系,你在视图里加载的文件肯定会排在你的基础样式或脚本的后面,不会出错。