【Web前端开发最佳实践系列】前端代码推荐和建议

时间:2020-12-17 20:33:32

一、常用的前端文件的组织结构:

1、js (放置JavaScript代码)

  • lib(放置框架JavaScript文件)
  • custom.js

2、css(放置CSS样式代码)

  • lib(放置框架CSS文件)
  • images(放置用于样式中的背景图)
  • reset.css( 统一元素默认样式的样式文件)
  • custom.css(业务相关样式文件)

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

4、index.html

代码文件整体按照文件类型的不同归类,同一类型的代码文件则需要安装具体的业务模块来划分,切记把多个模块的代码编写到同一个文件中。划分的粒度已最大代码复用为标准,这样易于维护和管理。不同模块的代码放置到不同的文件中叶更有利于多人协作开发。

如果每种分类下面的文件过多,则可以根据对应的模块来归类到不同的模块文件夹中。例如,某个项目业务模块很多,导致前端JavaScript脚本文件数量过多,如果放置于同一文件夹下,将会增加维护的难度。我们可以分模块,分模块的话会使得文件增多增加请求时间,所以在发布时需要对文件进行压缩和合并。

  1. 雅虎公司的YUI Compressor(Java开发的)
  2. 微软公司的Web Optimization(.NET开发的)

代码文件的命名原则主要是需要表明文件对应的模块内容,对应的版本号和文件格式等。

二、前端重构的最佳实践

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

2、重构的目的和范围要明确,切记盲目修改。前端代码的重构目的主要是提高代码的可维护性,可读性和性能。

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

3、重构过程中要持续测试,在多个浏览器中测试,确保重构的部分功能正确。切记在大量重构后再进行测试,因为大量重构后基本很难记得重构的逻辑,也就有肯遗漏部分测试用例

4、如果是性能提升,要事先检测网站的整体性能并量化,找出性能瓶颈。重构过程中要持续监控性能,并对比性能提升的效果。

三、Web前端性能分析

常用的Web前端性能分析工具有YSlow、PageSpeed及各浏览器知道的开发工具等,

1、雅虎的YSlow的特性:

  • 基于不同的规则评定网站整体性能评分
  • 给出提高网页性能的建议
  • 统计页面加载的组件
  • 页面的统计信息视图
  • 相关性能分析的工具集,如JSLint、Smush.it等

2、chrome自带的开发工具:

  • NetWork中可以查看各资源请求和下载所用的时间。
  • Timeline中可以查看网页渲染和交互过程中各步骤所花费的时间,从资源的加载到JavaScript的解释执行、样式的额应用和绘制。
  • Profiles中可以查看网页的CPU及内存占有情况报告
  • Audits中提供了各种资源和配置优化的建议和未使用CSS规则的列表。

四、代码和资源的压缩与合并

发布的时候,一般会压缩前端HTML、CSS、JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页以更快的速度展现。当日,CDN分发、缓存等方式也是加快代码或资源文件传输的方式,但是压缩代码和资源文件是最有效的手段。

1、Web服务器开启Gzip压缩

在HTTP中允许客户端可以选择从服务器上下载压缩的内容,Gzip就是其中一种支持的格式。Gzip是一种常见的压缩算法,目前Gzip得到了大部分主流的Web服务器(IIS  Nginx  Apache  Lighttpd等)和主流的浏览器的支持。服务器配置人员可以查看服务器对应的配置文档,开启Gzip压缩,服务器启用了Gzip压缩后,代码文件有更小的体积,尤其是文本文件。Web服务器开启Gzip压缩后,会在Response的header中增加Content-Encoding:gzip.可以通过检查此header项来判断服务器是否开启了Gzip压缩。

2、JavaScript代码压缩

JavaScript压缩的原理一般是去掉多余的空格和回车、替换长变量名、简化一些代码写法等。JavaScript代码压缩工具很多,有在线工具、应用程序、编辑器插件等。使用最多的就是UglifyJS、YUI Compressor、Closure Compiler【Google公司的】.UglifyJS不仅仅是一个压缩工具,同时具有JavaScript语法分析和代码美化功能,包括代码缩减、代码转化等。

3、CSS代码压缩

CSS代码压缩原理和JavaScript代码压缩的原理类似,也是去掉不必要的空格、回车、注释等,并同时欧化合并一个CSS规则定义,让规则更简洁(CSS Compressor)。

4、HTML代码压缩(HtmlCompressor):关于此项,褒贬不一。

5、图片资源压缩

TinyPNG压缩PNG格式图片,JPEGmini压缩JPG格式图片。本地应用程序推荐使用ImageOptim。

目前比较流行的前端自动化构建工具Grunt也可以集成代码和资源的压缩工具。

五、前端代码基本命名规范和格式规范

  • HTML代码的所有的标签名和属性都应该为小写。
  • 给所有的关键元素定义元素的id和class,便于和CSS、JavaScript交互。因为id名称和class名称有可能作为检索值用在JavasCRIPT代码中,
  • 推荐使用语义和DOM树的层级关系来定义合适的名称,名称中全部使用小写,id名称中的关键词用下划线连接,class的关键词使用-连接
  • 给HTML代码添加必要的注释。
  • 为了避免class命名的重复,命名时去父元素的class名作为前缀。
  • 多个选择器具有相同样式声明时。每个选择器应该单独占一行,便于阅读和维护。
  • JavaScript局部变量命名采用首字母小写,其他单词首字母大写的方式。