本文详细介绍了前端开发的规范，包括项目目录结构、代码书写、格式、命名和JS语法的规范，强调了增强语义化、关注点分离以及良好的注释习惯，旨在提升代码质量和可维护性。
一、项目目录
- 目录结构的统一化，可读性，分模块、组件构建，严禁构建杂乱无章，毫无可读性而言的项目目录
- 目录结构整齐划一，方便日后维护和其他同事的阅读
1、 PC目录说明
- index.html放在根目录下面
- 所有的其余页面都放到page目录下面，page目录下的页面都要分类进行放置
- 所有的js插件放到lib目录下
- js目录根据你业务需求分别构建不同的子目录
- 所有的图片放到images文件夹下面，static目录下放置需要后台传入的图片，默认是静态图片后期可删除
- 如果需要用到特殊字体，都放到font目录下
- css目录下放置必须要有base文件，来统一初始化样式，需要用到的插件放到lib目录下面
2、web目录说明
- index.html放在根目录下面
- 其他的所有页面都放在components组件目录下，并且要归类放置，不可直接扔进去
- 所有的图片放到所属子组件的目录下，static目录下放置固定不动的图片，和默认的css包
- 总共三层开发目录，src、build、dist，src是源码文件夹，build是调试文件夹，dist目录依赖于build目录，生成线上版完整代码
注意
所有的文件命名，尽量使用单个英文单词，英文不好可以百度翻译一下，如果一个英文单词搞不定，就是用多个单词，中间用‘_’隔开，不要使用‘-’和驼峰命名法
二、代码规范
书写规范：增强语义化，增强阅读性
1. 只用小写字母
- 所有的代码都用小写字母：适用于元素名，属性，属性值（除了文本和 CDATA ）， 选择器，特性，特性值（除了字符串）。
<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google"></pre>
<h3>行尾空格</h3>
<strong>删除行尾白空格。</strong>
行尾空格没必要存在。
<pre><!-- 不推荐 -->
<p>What?_
<!-- 推荐 -->
<p>Yes please.
2. 增强语义
- 根据HTML各个元素的用途去使用它们，要知道为什么要使用它们和是否正确，例如，heading元素构造标题，p元素构造段落，a元素构造锚点等
- 根据HTML各个元素的用途去使用是很重要的，它涉及到文档的可访问性，重用和代码效率等问题
<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>
- 禁止用行内元素包裹块级元素，例如不要在p标签里面嵌套别的标签
3. 关注点分离
- 将表现和行为分开
- 严格保持结构（标记），表现（样式），和行为（脚本）分离，并尽量让这三者之间的交互保持最低限度
- 确保文档和模板只包含HTML结构，把所有表现都放到样式表里，把所有的行为都放到脚本里
- 此外，尽量使脚本和样式表在文档与模板中有最小接触面积，即减少外链
- 将表现和行为未开维护是很重要的，因为更改HTML文档结构和模板会比更新样式表和脚本更花费成本
- 如果是用vue构建的项目，css的书写要带scope
<!-- 不推荐 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel=
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
