web前端开发规范参考文档_前端规范文档资源-CSDN文库

需积分: 33 52 浏览量 2019-03-08 10:51:45 上传评论收藏 121KB DOCX 举报

### Web前端开发规范知识点 #### 一、规范目的概述本文档的核心目的是为了提升团队协作效率，确保代码质量，以及建立一套统一的编码风格规范。规范文档一经确认，所有前端开发人员都应按照该规范执行前台页面开发工作。文档内容会持续更新和完善，任何不妥之处或改进意见都欢迎及时反馈。 #### 二、文件规范 ##### （一）基本准则 1. **符合W3C标准**：遵循W3C标准，确保代码的规范性和可读性。 2. **语义化的HTML**：使用具有明确含义的HTML标签来增强页面结构的清晰度。 3. **结构、表现、行为三层分离**：将页面结构、样式和交互逻辑分离，便于维护和扩展。 4. **优秀的兼容性**：确保代码在主流浏览器中的稳定运行。 5. **良好的页面性能**：优化加载速度和渲染效率。 6. **简洁有序的代码**：代码易于理解和维护。 7. **减少服务器负载**：通过合理的资源管理减轻服务器压力。 8. **最快的解析速度**：提高用户访问体验。 ##### （二）文件命名规则 - **禁止使用拼音和数字命名**：避免使用拼音或纯数字作为文件名，以免引起混淆。 - **文件夹采用大驼峰形式**：例如，`MdmHtml`。 - **HTML文件命名采用小驼峰形式**：例如，`index.html` 或 `mdmIndex.html`。 - **CSS文件命名采用小驼峰形式**：例如，`style.css` 或 `mdmStyle.css`。 - **图片命名采用小写字母、数字、下划线的形式**：例如，`bg.jpg` 或 `mdm_bg.jpg`。 - **CSS样式命名采用小写字母、中划线形式**：例如，`class="btn-default"`。 - **CSS中ID命名采用小驼峰形式**：例如，`id="searchResult"`。 - **JS变量/函数命名采用小驼峰式**：例如，`menuId` 或 `menuFunction()`。 - **JS类采用大驼峰式命名**：例如，`MenuPublic`。 ##### （三）文件存放位置规范虽然原文没有详细规定文件的具体存放位置，但通常情况下，建议按照以下结构组织文件： - `/images`: 存放所有图片资源。 - `/styles`: 存放CSS样式表。 - `/scripts`: 存放JavaScript文件。 - `/pages`: 存放HTML页面。 - `/components`: 存放可复用的组件代码。 ##### （四）CSS书写规范 1. **基本原则** - **结构化书写**：优先重定义全局样式，接着处理伪类，最后是自定义样式。 - **格式化书写**：保持一致的代码风格，如使用空格或缩进来分隔属性。 - **合并化书写**：将具有相似属性的多个类合并，减少冗余代码。 - **简易化书写**：简化颜色值、背景值和字体值的写法，如使用缩写形式。 2. **注意细则** - **class与id的使用**：id用于标识唯一的元素，class用于标识可重复使用的样式。 - **避免class与id命名相同**：以避免潜在冲突。 - **背景图片使用sprite技术**：通过合并多个小图标为一个大图，减少HTTP请求次数，提高加载速度。 ##### （五）HTML书写规范 1. **DOCTYPE声明及head区代码规范** - **必须标签**： - `<meta charset="utf-8">`: 设置字符集。 - `<link href="/style.css" rel="stylesheet">`: 引入CSS样式表。 - `<title>xxxxxxxx</title>`: 定义页面标题。 - **可选标签**： - `<meta name="description" content="xxxxx">`: 页面描述。 - `<meta name="keywords" content="xx,xx,xx,">`: 关键词。 - `<meta http-equiv="expires" content="">`: 页面过期时间。 - `<link rel="Shortcut Icon" href="favicon.ico">`: 设置网站图标。 - **通用模板**： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta name="description" content="..."> <meta name="keywords" content="..."> <link rel="stylesheet" href="/style.css"> <title>...</title> </head> <body>  </body> </html> ``` 通过上述规范的实施，可以显著提高前端项目的质量和开发效率，同时也有利于团队之间的协作和代码的长期维护。

资源推荐

资源详情

资源评论

web 前端开发规范文档

文件编号作者

文档版本

V1.0

最后修改日期

web 前端开发规范文档

版本号 1.0

编写人：

编写时间：

                                          web 前端开发规范文档
修订记录
编号 文档版本 修订章节 修订原因 修订日期 修订人
1
1.0 16/16
Web 前端开发规范制定
2016-09-08
2
1.1 12/12
Web 前端开发规范修正
2017-02-14
3
目录
WEB 前端开发规范文档................................ .................................................................................. 1
版本号 1.0...........................................................................................................................................1
一、规范目的.....................................................................................................................................3
（一）概述
.......................................................................................................................................3
二、文件规范.....................................................................................................................................3
（一）基本准则
...............................................................................................................................3
（三）文件存放位置规范
...............................................................................................................4
（四）
CSS
书写规范
.........................................................................................................................5
（五） 
HTML
书写规范
....................................................................................................................6
（六）
javascript
书写规范
...............................................................................................................9
（八）注释规范
...............................................................................................................................9
（九） 缩进规范
............................................................................................................................12
注：蓝色字体标注内容为着重注意内容。
2