【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局部变量命名采用首字母小写，其他单词首字母大写的方式。

相关文章