前端优化杂谈（一）

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

咱们的目标是：

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

 

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

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

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

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

 

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

 

css文件大概分为三大类：

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

 

1、全局通用样式：这类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 }

 

 

 

2、局部通用样式：这类样式仅在部分页面引用，通常根据某些特征来为他们划分，好比：

1. 表单样式（form.css），常出如今编辑页面
2. 插件样式（dialog.css），这类样式通常不会去修改它，可是能够重写覆盖样式。

 

假如一个页面涉及的模块较多，这类样式的文件数量可能不少，但仍是有优化的空间。建议对不一样样式遵循如下规则：一开始加载便影响到页面外观的样式，建议css文件头部引入。而对于其余可延迟类样式（如弹窗插件的样式），可对其延迟加载，通常是跟随插件异步的引入时引入（依赖引入）。

 

 

3、私有样式：这类样式每每只有一个页面有，很奇葩，并且代码量不会不少，每每连1K都不到，若是把这些样式单独写进一个css文件显得有点浪费，对于这类样式，能够几个页面的样式写在一块儿。