前端优化杂谈(一)

如何组织前端开发中的css以及js代码,相信在开发的过程中是一个比较让人头疼的问题。

我们的目标是:

1. 让代码拥有较好的可维护性,提高代码的重复利用率。
2. 尽可能少的减少引入的css以及js的文件数量,因为过多的http请求会一定程度影响页面加载的效率。
3. 尽量少的引入与页面无关的代码,即减少代码冗余。

 

但要同时满足以上三个条件不容易,在后续的优化中,我们只能尽可能的平衡这种关系。

说到底就是如何处理代码的可维护性以及代码的性能,但不管怎么样,代码的可维护性应该是我们更应该重视的。现在的计算机都比较快,未来还会更快,在保证拥有较好的用户体验下,我们尽可能的提高我们的代码质量,这样就够了。

目前的开发中,我们用requireJs来实现模块化开发,一个大模块就是一个js文件,大模块中还有小模块,模块与模块之间通过接口互相调用,模块之间拥有较低的耦合度可以方便我们对代码的管理,提高代码利用率。

对模块的加载方式也是我们应该考虑的问题之一,这里参考AMD和CMD的规范。简单的说就是加载模块时采用预加载还是延时加载。具体问题具体分析,不同场景使用不同的方式。requireJs一开始是基于AMD的规范开发出来的,现版本的requireJs同样支持CMD的使用模式。

 

接着说说怎么组织css代码。

 

css文件大概分为三大类:

1. 全局通用模块
2. 局部通用模块
3. 私有模块

 

一、全局通用样式:这类css每个页面都会引用,需要在页面头部引用,前期开发可分成多个文件方便管理,后期生产环境可压缩合并成一个文件(common.css)。

1. 重置样式(reset.css),这类样式主要是统一各大浏览器的默认样式。
2. 图标样式(icon.css),使用css sprites管理的图标样式。
3. 自定义通用样式(custom.css),自定义一些页面常用样式以及对常用插件样式的重写,比如:

 1 /* 清除浮动 */
 2 .clear-fixed:after {
 3     content: '';
 4     display: block;
 5     clear: both;
 6 }
 7 /* 文字超过部分变成... */
 8 .nowrap {
 9     overflow: hidden;
10     white-space: nowrap;
11     text-overflow: ellipsis;
12 }
13 /* 页面导航栏 */
14 .nav {
15     overflow: hidden;
16     white-space: nowrap;
17     text-overflow: ellipsis;
18 }
19 /* 重置弹框插件的默认样式 */
20 .dialog {
21     border: 0;
22     box-shadow: 1px 2px 5px #ccc;
23 }

 

 

 

二、局部通用样式:这类样式仅在部分页面引用,一般根据某些特征来为他们划分,比如:

1. 表单样式(form.css),常出现在编辑页面
2. 插件样式(dialog.css),这类样式一般不会去修改它,但是可以重写覆盖样式。

 

假如一个页面涉及的模块较多,这类样式的文件数量可能很多,但还是有优化的空间。建议对不同样式遵循以下规则:一开始加载便影响到页面外观的样式,建议css文件头部引入。而对于其他可延迟类样式(如弹窗插件的样式),可对其延迟加载,一般是跟随插件异步的引入时引入(依赖引入)。

 

 

三、私有样式:这类样式往往只有一个页面有,很奇葩,而且代码量不会很多,往往连1K都不到,如果把这些样式单独写进一个css文件显得有点浪费,对于这类样式,可以几个页面的样式写在一起。

 

posted @ 2016-03-04 14:44  骚界翘楚  阅读(170)  评论(0编辑  收藏  举报