WEB学习笔记2-结构组织和文件命名

常用的前端文件的组织结构：

.js(放置javascript代码)

.lib(放置框架javascript文件)

.custom.js

.css(放置CSS样式代码)

.lib(放置框架CSS文件)

.images(放置用于样式中的背景图)

.reset.css(统一元素默认样式的样式文件)

.custom.css(业务相关样式文件)

.resource(放置页面图片文件以及其他类型资源文件)

.index.html

 

代码文件命名：

　　代码文件命名需要表明文件对应的模块内容、对应的版本号和文件格式等，例如：jquery的命名为：jquery-1.8.2.min.js，其中，jquery表明文件的内容，1.8.2表明文件的版本号，min表明此文件为文件的压缩格式版本。

 

前端代码重构过程：

1.删除无用的代码，精简代码。

　　无用的代码主要集中在CSS和javascript文件中，包括已经不起作用的CSS样式和废弃的javascript函数。

2.前端代码规范化。

　　页面HTML标签中还有大量的内联CSS样式，有些页面的head部分也有CSS样式，需要把这些样式放到独立的文件中；

　　调整代码的层次缩进格式，不同层级按照4个空格来缩进；

　　更改标准已不推荐的标签，如<center>、<b>等，改为由CSS样式控制；

　　统一命名规则，这里主要涉及HTML中的id和class名称；

　　在javascript中集中定义局部变量，并把部分全局变量转变为局部变量，缩小变量作用域。

3.整理基础库类

　　重构的内容是统一UI插件的使用，统一基础方法的使用。

4.前端代码模块化

　　按照模块归类CSS代码，放到模块对应的单独的CSS文件中

　　按照模块分离javascript代码，按照模块定义不同的命名空间

　　将javascript代码中的公共方法归类到独立的共通文件中，同时引入面向对象的思想来重构javascript代码，进一步明确公有接口和私有接口

5.提高页面的加载性能

　　将部分不影响首页展示的javascript文件延迟到页面加载后加载

　　删除页面中初始隐藏的区域，改为通过javascript按需动态生成

　　页面中的部分图片延迟加载

　　调整CSS和javascript文件中的引用顺序，即CSS在前javascript在后

　　给静态文件设置缓存

　　使用CSS sprint，合并首页背景图

　　合并和压缩发布后的CSS和javascript代码文件

 

前端重构最佳实践

1、重构前一定要预估风险，如果没有足够的自动化测试，最好是先完善自动化测试代码

2、重构的目的和范围要明确，重构的目的主要是提高代码的可维护性、可读性和性能

3、最好是先易后难，循序渐进。首先修改诸如命名、格式等不涉及具体逻辑哦内容，然后考虑模块化和性能提升等与具体逻辑相关的内容

4、重构过程中要持续测试，在多个浏览器中测试，确保重构部分功能正确

5、如果性能提升，要事先检测网站的整理性能并量化，找出性能瓶颈，重构过程中要持续检测性能，并对比性能提升的效果