《Web前端开发最佳实践》——第2章 高效Web前端开发2.1 前端代码的结构组织和文件的命名...
本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第2章，第2.1节,作者:党 建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
第2章 高效Web前端开发
本章首先将概述Web前端开发中的相关最佳实践，如前端代码文件组织、前端代码重构、前端框架的选择，以及前端开发过程中实用的开发辅助工具等，帮助读者提高前端开发的效率。好的开发方式在项目中会起到事半功倍的效果，并且可确保开发过程中的代码结构清晰，易维护。本章然后会介绍前端代码的基本命名规范和格式规范，良好的命名规范和规整的格式让代码看起来干净整洁，也体现了开发者良好的职业素养，应该说命名规范、整齐的格式不仅是开发过程中的一种约定，而且是程序员之间良好沟通的桥梁。
2.1 前端代码的结构组织和文件的命名
代码的组织和代码文件的命名并没有最优的形式，但是无论什么代码，它们所遵循的原则是相同的，即在同一个项目中代码的组织结构一定要清晰，同类型的代码文件或者相同模块的代码文件尽量归类到相同的文件夹中，文件的命名规则须统一并且命名要有意义。
（1）代码文件组织结构
前端代码文件主要包含JavaScript、CSS、HTML等文件，以及这些代码文件相关的图片、Flash、音视频等资源文件。如何合理地组织这些文件是项目成败的关键因素之一，对于该文件，既要考虑结构清晰、一目了然，还要考虑代码的复用。基于这样的原则，惯用的做法是同类文件放在一起，并按模块划分文件
结构。
如下是一种常用的前端文件的组织结构：
- js（放置JavaScript代码）
- lib（放置框架JavaScript文件）
- custom.js
- css（放置CSS样式代码）
- lib（放置框架CSS文件）
- images（放置用于样式中的背景图）
- reset.css（统一元素默认样式的样式文件）
- custom.css（业务相关样式文件）
- resource（放置页面图片文件以及其他类型资源文件）
- index.html
代码文件整体按照文件类型的不同归类，同一类型的代码文件则需要按照具体的业务模块来划分，切忌把多个模块的代码编写到同一个文件中。划分的粒度以最大化代码复用为标准，这样做的优点是易于维护和管理。不同模块的代码放置到不同的文件中也更有利于多人协作开发。图2-1是实际项目中的一个示例。
如果每种分类下面的文件过多，则可以根据对应的模块来归类到不同的模块文件夹中。例如，某个项目业务模块很多，导致前端JavaScript脚本文件数量过多，如果这些文件放置到同一个文件夹中，将会增加维护的困难。如果按照模块的不同新建不同的文件夹，并把同一模块相关的代码文件放置在对应的模块文件夹中，则代码文件的结构更加清晰。
细心的读者可能会发现代码文件的细化会使代码文件的数量增多，相应地进行网站加载时请求的数量也会增加，这样会导致网页整体的加载时间变长。的确，加载文件数量增加会影响页面加载的速度，所以，发布时需要合并相应的代码文件。值得庆幸的是，有相关的工具或插件可以弥补这一不足，比较著名的有雅虎（Yahoo）公司开发的YUI Compressor和微软公司开发的Web Optimization。YUI Compressor是基于Java平台开发的，在Java平台下应用较多，而Web Optimization则是基于.NET平台开发，所以在ASP.NET开发的项目中广泛应用。
（2）代码文件的命名
代码文件命名的原则主要是名称需要表明文件对应的模块内容、对应的版本号和文件的格式等，如jQuery的文件命名为jquery-1.8.2.min.js，其中，jquery表明文件的内容，1.8.2表明文件的版本号，min表明此文件为文件的压缩格式版本。如果文件为子模块文件，则在文件名中用点号或短横线来表明父子关系，如Bootstrap框架中响应式设计模块对应的CSS文件的命名为：bootstrap-responsive.css。