网站建设前端怎么规整化

　　网站建设前端规整化的手段，主要包括编码规范、JavaScript库、组件工具箱和框架这4个方面。

　　下面介绍编码规范这1个方面的细节。在项目前期，可以通过这方面来初始化前端工程的。

　　注意：规整化需要把握一个度，标准太高会拖慢项目进度，标准太低又达不到规整的目的，所以前端架构需要根据实际的团队水平和项目周期制定规整化的标准。

　　需要特别强调的是，很多人一提到前端架构，总会陷入“原生开发还是使用脚手架”“Vue、React、Angular应该选择哪一个”的苦恼之中。其实，没有任何的基础技术能保证最终的软件质量。而架构设计的目的，是想要保证最终的软件质量。相对于选择什么基础技术，制定规范化的标准才是架构设计更应该考虑的事情。

　　编码规范

　　制定编码规范是最简单且最有效的整顿办法，只需要开发团队遵守一些规则就能很大程度上避免混乱。这里先不考虑使用框架的情况，只是单纯地从网页开发方面介绍一下编码规范化的几个参考点：

　　规范化目录结构；

　　规范化前端资源文件使用，限制和分离HTML、CSS和JavaScript文件；

　　抽离通用部分，建立共用的JavaScript脚本和CSS主题文件；

　　规范化第三方插件的使用；

　　其他方面。

　　注意：虽然这里以原生网页开发作为基础，但是规整化需要注意的点是相似的。

　　1.规范化目录结构

　　一般的前端目录结构都是按JavaScript文件、CSS文件、HTML文件及资源文件分离的。

　　但是这样的前端目录结构不适合大型网站，因为大型网站有很多网页，也有很多网页资源，如果还是按这种目录结构组织网页资源的话，那么前端的目录结构其实还是混乱的。试想一下，HTML文件有几十甚至上百个，伴随的网页资源也有几百个，这种“几十甚至上百个文件的罗列”无论在开发上还是网页发布上，都极有可能造成不必要的人为失误。

　　因此，在结构上层，最好再增加一层结构。增加一层结构后，能大大降低每个子目录的文件数，可以把每个目录的文件数控制在十几二十个左右，从而规整前端结构。如图3.25所示，根据用户角色，增加了user（普通用户）和admin（管理员）的网页划分。需要注意的是，网页的划分更多是以业务架构的子模块为基础的，需要根据实际情况而定。

　　增加结构后，在浏览器中输入网址或IP地址后无法显示默认网页，这时需要设置一下默认网页。设置默认网页的方法有两种，第一种是新增一个index.html文件，做强制跳转；第二种是更改Web服务器的配置。

　　第一种方法是重定向，强制跳转。由于Web服务器的默认配置是打开根目录下的index.html文件，所以我们在根目录下新建index.html文件，通过index.html文件自动跳转到指定的新网页。index.html文件的内容如代码3.12所示，其中/sample/abc.html为要设定的默认网页。

　　第二种方法是更改Web服务器的配置。以Nginx为例，修改conf/nginx.conf中的配置即可。

　　不过，虽然第二种方法的配置能让默认网页的地址保持简洁，但是HTML文件引用其他网页资源时，需要把相对地址改成绝对地址。

　　说明：一般的默认网页为/index.html（网站根目录下的index.html），在只输入网址或IP地址的情况下会自动打开index.html网页，这是Web服务器的配置决定的。