前端编程规范规约
前端代码编写规范
1.1.7 实用为王·················································································2
1.1.8 属性顺序·················································································2
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 1.1.6 引入 CSS 和 javascript 文件
根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因 为 text/css 和 text/javascript 分别是它们的默认值。
做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档 编码一致（一般采用 UTF-8 编码）。
<head> <meta charset="UTF-8">
</head> 1.1.5 IE 兼容样式
IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有 强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
1.2.1 语法·······················································································4
1.2.2 声明顺序·················································································5
软件开发Web前端开发规范
软件开发Web前端开发规范软件开发Web前端开发规范是指在进行Web前端开发过程中，为了统一团队的代码风格，提高代码的可读性、可维护性和可扩展性而制定的规范。
本文将从代码结构、命名规范、注释规范、HTML规范、CSS规范、JavaScript规范以及版本控制等几个方面，详细阐述Web前端开发规范的内容。
一、代码结构规范：1. 项目根目录下应包含必要的文件，如index.html、package.json 等；2. 将不同类型的文件（如HTML、CSS、JavaScript）分别放在不同的文件夹中，方便管理；3.对于大型项目，可以按照模块对文件进行进一步的组织。
二、命名规范：1. 变量、函数名使用驼峰命名法，如helloWorld；2. 类名使用帕斯卡命名法，如HelloWorld；3.常量名使用全大写字母，如PI；4. 文件名使用小写字母，多个单词使用下划线连接，如index.html。
三、注释规范：1.对于重要的函数、类、模块等，应添加详细的注释说明；2.使用单行注释（//）或多行注释（/**/）来注释代码，注释应描述清楚代码的功能和作用；3.注释应写在代码的上方或右侧，避免在代码行尾添加注释。
四、HTML规范：2.缩进使用两个空格，不使用制表符；4. 使用双引号包裹属性值，如class="container"；5.避免使用行内样式，将样式写入CSS文件中。
五、CSS规范：1.代码缩进使用两个空格，不使用制表符；2. 使用中划线连接多个单词，如table-layout；3.选择器命名简洁明了，避免使用过长、复杂的名称；4.属性书写顺序应统一，比如先写布局相关的属性，再写样式相关的属性；5.使用CSS预处理器，如LESS、SASS等，提高开发效率。
六、JavaScript规范：1.使用ES6语法，提高代码的可读性和可维护性；2. 变量声明使用let或const，避免使用var；3.函数命名简洁明了，避免使用过长、复杂的名称；4.将多次使用的代码封装成函数，提高代码的复用性；5.避免使用全局变量和全局函数，减少命名冲突的可能性。
前端代码规范文档
前端代码规范文档前端代码规范文档一、命名规范1. HTML/CSS命名规范- 使用小写字母和连字符（-）作为单词分隔符；- 尽量避免使用缩写，除非是广泛接受的缩写；- 使用有意义的命名，不使用无意义的命名；- 使用统一的命名方式来表示特殊类型的元素（例如：头部、侧边栏等）；2. JavaScript命名规范- 使用驼峰命名法（camelCase）；- 使用有意义的命名来描述变量、函数或类的作用；- 避免使用单个字符的命名，除非是临时变量；- 使用全大写的命名方式来表示常量；二、缩进和空格规范1. 使用4个空格来进行缩进；2. 在括号前后留一个空格；3. 在运算符前后留一个空格；4. 在函数名和参数列表之间留一个空格；三、注释规范1. 使用注释来解释代码的功能和用途；2. 对于复杂的代码块或关键算法，应提供详细的注释；3. 注释应该是清晰明了的，避免使用不恰当的术语或缩写；4. 重要的注释可以使用大写字母或星号来标记；四、代码风格规范1. 使用一致的缩进和空格；2. 合理使用换行符，避免一行代码过长；3. 尽量避免使用行尾的空格或制表符；4. 使用一致的括号风格，例如在函数或语句块的开头和结尾都使用大括号；5. 使用分号来结束语句；6. 使用合理的命名方式来描述变量、函数和类的作用；7. 避免使用全局变量，使用局部变量或封装变量的方式来控制变量的作用范围；8. 避免使用多层嵌套的条件语句，可以使用条件判断的方法来简化代码；9. 使用恰当的函数和类来封装可重用的代码；五、代码结构规范1. 尽量避免大而复杂的函数，使用小而简单的函数来实现功能；2. 模块化代码，将相关联的函数和类放在同一个文件中；3. 合理使用空行来分隔不同的代码块；4. 将页面的结构和样式分离开来，使得HTML文件更加简洁和易于维护；5. 对于重要的功能块，使用代码块注释来标记开头和结尾；六、代码审查规范1. 对新提交的代码进行审查，确保其符合代码规范；2. 对代码中的错误和潜在问题进行识别和修复；3. 鼓励团队成员进行代码审查和互相学习，提高代码质量；4. 定期审核项目中的代码，找出不符合规范的代码并进行修正。
前端代码规范
前端开发规范一、基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.二、文件规范1. html, css, js, images文件均归档至约定的目录中;2. html文件命名: 英文命名, 后缀.html. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;3. css文件命名: 英文命名, 后缀.css. 共用, 首页, 其他页面依实际模块需求命名.;4. Js文件命名: 英文命名, 后缀.js. 共用, 其他依实际模块需求命名.三、书写规范HTML基本架构请参照,移动端参照1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE HTML>; 编码统一为<meta charset="utf-8" />, 书写时利用IDE实现层次分明的缩进;2. 非特殊情况下样式文件必须外链至<head></head>之间;非特殊情况下JavaScript文件必须外链至页面底部;3. 引入样式文件或JavaScript文件时, 须略去默认类型声明. CSS:<link rel=”stylesheet” href=”css/” />JS:<script src="js/"></script>4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如引入插件, 文件名格式为库名称+插件名称, 比如所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名必须由小写字母及中、下划线数字组成, 且所有标签必须闭合; 属性值必须用双引号包括; 6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;7. 语义化html, 如标题根据重要性用h(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;8. 尽可能减少div嵌套9. 书写链接地址时, 必须避免重定向，例如：href=”即须在URL 地址后面加上“/”；10. 在页面中尽量避免使用style属性,即style=”…”;11. 能以背景形式呈现的图片, 尽量写入css样式中;12. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;13. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;14. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;15. 书写页面过程中, 请考虑向后扩展性;CSS重置样式引用1. 编码统一为utf-8;2. class与id的使用: id是唯一的, class是可以重复的, 所以id 尽量使用在大的模块上, class可用在重复使用率高及子级中; 常用命名：容器：container/box头部：header主导航：nav子导航：nav-sub顶导航：nav-top网站标志：logo大广告：banner页面中部：main底部：footer菜单：menu菜单内容：menu-content子菜单：menu-sub搜索：search搜索关键字：keyword搜索范围：range标签文字：tag-title标签内容：tag-content当前标签：tag-active标题：title内容：content列表：list当前位置：nav-dir侧边栏：side图标：icon注释：note登录：login注册：register3. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;与id命名:大的框架命名比如header/footer/wrapper/left/right.其他样式名称由小写英文 & 数字 & - 来组合命名, 如top-comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.5. css属性书写顺序, 建议遵循: 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举:布局定位属性主要包括: display & list-style & position（相应的 top,right,bottom,left）＆ float & clear ＆ visibility ＆overflow；自身属性主要包括: width & height & margin & padding & border & background;文本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content; 这些属性只是最常用到的, 并不代表全部;6. 充分利用html自身属性及样式继承原理减少代码量7. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;8. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现 , 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法:table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;})9. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:_background:none;_filter:progid: (sizingMethod=crop, src=’img/’);10. 减少使用影响性能的属性, 比如position:absolute || float ;11. 代码缩进与格式: 建议单行书写, 可根据自身习惯; JavaScript1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号;2. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如flower;每个局部变量都需要有一个类型前缀，按照类型可以分为：s：表示字符串。
阿里前端开发规范
阿里前端开发规范阿里前端开发规范包括代码、命名、HTML、CSS、JavaScript、图片方面的规范。
1. 代码规范：- 使用四个空格缩进，不使用制表符。
- 代码行长度不超过80个字符。
- 使用驼峰命名法，变量和函数名用小写开头，构造函数用大写开头。
- 使用严格相等运算符（===和!==）替代宽松相等运算符（==和!=）。
- 在条件表达式中，使用括号来提高可读性。
- 避免在循环中使用等号赋值（例如，for (var i = 0; i < array.length; i++)）。
- 避免使用eval()函数。
2. 命名规范：- 文件名应该全部小写，可以包含破折号（-）或下划线（_）。
- 文件夹名应该全部小写，可以包含破折号（-）或下划线（_）。
- CSS文件名应该以.css结尾。
- JavaScript文件名应该以.js结尾。
3. HTML规范：- 使用两个空格缩进，不使用制表符。
- 使用双引号而不是单引号作为属性值的引号。
- 在自定义属性中使用小写字母和破折号（-）。
- 为所有非自闭合标签使用闭合标签。
- 避免在HTML标签中使用行内样式。
4. CSS规范：- 使用两个空格缩进，不使用制表符。
- 使用小写字母和破折号（-）作为选择器和属性名的命名方式。
- 为每个选择器之间使用空行分隔。
- 使用简写属性来减少代码量。
- 使用预处理器（如Less或Sass）来编写CSS。
5. JavaScript规范：- 使用两个空格缩进，不使用制表符。
- 使用分号作为语句的结束符号。
- 避免使用全局变量。
- 避免使用with语句。
- 使用模块化的开发方式，避免全局作用域污染。
6. 图片规范：- 使用有意义的命名来描述图片内容。
- 使用适当的格式和压缩技术来减小图片文件大小。
- 将页面上的图片引用写成相对路径。
以上是阿里前端开发规范的一些主要内容。
在实际开发中，遵循这些规范可以提高代码的可读性和可维护性，使团队成员之间更容易协同工作。
WEB前端开发代码使用要求规范
WEB前端开发代码使用要求规范1.编码规范- 使用标准的HTML、CSS和JavaScript语法。
-使用缩进和空格来提高代码的可读性。
-使用注释来解释代码的目的和功能。
2.文件和目录结构规范-使用有意义的文件和目录命名，方便其他开发人员寻找代码。
-在项目中使用统一的目录结构，例如将HTML文件存放在一个文件夹中，将样式文件存放在另一个文件夹中，以此类推。
3.HTML规范- 避免在HTML中直接写入样式和脚本代码，应将样式和脚本代码分离到对应的CSS和JavaScript文件中。
4.CSS规范-使用适当的选择器，避免过多的嵌套。
-避免使用内联样式，应将样式写在CSS文件中，以提高可维护性。
- 使用合适的样式命名规则，例如使用BEM(Block-Element-Modifier)命名规则，或其他约定俗成的命名规则。
5. JavaScript规范-使用合适的变量和函数命名，提高代码的可读性。
-避免使用全局变量，应将变量和函数封装在模块中。
- 使用严格模式(`use strict`)，避免不规范的语法和行为。
- 避免使用`eval`和`with`等不安全的代码。
-在循环中使用合适的终止条件，避免死循环。
6.代码结构规范-代码应具有良好的组织结构，例如使用模块化的方式来组织代码。
-尽量遵循单一职责原则，每个函数和类应该只负责一件事情。
-提取重复的代码块，封装成函数或类，以提高代码的复用性。
-不要写过长的函数或类，应该根据需要进行拆分和重构。
7.注释规范-使用注释来解释代码的目的和功能，特别是代码的复杂部分。
-注释应该清晰、简洁，方便其他开发人员理解代码。
-避免使用无用的注释，注释应该随着代码的变化而更新。
总之，遵守WEB前端开发代码使用要求规范能够提高代码的质量和开发效率，减少错误和维护成本。
同时，还能提高团队合作的效率，方便其他开发人员理解和修改代码。
因此，在进行WEB前端开发时应该积极遵守和推崇相关规范。
前端开发中的代码规范推荐
前端开发中的代码规范推荐在前端开发中，代码规范是非常重要的。
良好的代码规范可以提高代码的可读性、维护性和可扩展性，减少Bug数量以及减少团队成员之间的沟通成本。
本文将介绍一些前端开发中常见的代码规范推荐。
1. 缩进和空格在编写代码时，正确的缩进和使用合适的空格是非常重要的。
缩进可以帮助代码的层次结构更加清晰，从而提高可读性。
通常情况下，我们建议使用四个空格作为一个缩进层级。
此外，在运算符前后也要使用合适的空格，以增加代码的可读性。
2. 变量命名在前端开发中，变量命名是非常重要的。
良好的变量命名可以使代码更加易读和易于理解。
我们建议使用有意义的变量名来描述变量的用途。
例如，使用"userName"代替"uN"来表示用户名。
3. 注释注释是在代码中添加解释和说明的一种方式。
良好的注释可以提高代码的可读性和可维护性。
在编写注释时，我们建议注释在其上方、而不是在其右侧。
此外，注释应该清晰明了，避免使用含糊不清或者过于简化的注释。
4. 函数和方法在编写函数和方法时，我们建议遵循单一职责原则。
每个函数或者方法应该只负责一个特定的功能。
此外，函数和方法的命名应该能够准确地描述其功能。
5. 文件结构和组织在前端开发中，合理的文件结构和组织可以提高代码的可维护性和可扩展性。
我们建议将不同类型的文件分别放置在不同的文件夹中，例如将HTML文件放置在一个文件夹中，将CSS文件放置在另一个文件夹中。
此外，应该建立合适的文件命名规范，以便于快速定位和查找文件。
6. 异步操作和回调函数在前端开发中，异步操作是非常常见的。
在处理异步操作时，我们建议使用回调函数来处理异步操作的结果。
此外，回调函数应该尽量避免出现过多的嵌套，以免代码变得难以理解和维护。
可以考虑使用Promise、async/await等方式来改善代码的可读性。
7. 代码复用在前端开发中，代码复用是非常重要的。
良好的代码复用可以减少代码量、提高代码的维护性和可扩展性。
前端开发规范文档
前端开发规范文档一、概述。
本文档旨在规范前端开发工作，统一团队成员的开发风格，提高代码质量和可维护性。
在前端开发中，规范是非常重要的，它可以让团队成员之间的合作更加顺畅，代码更加易读易懂。
本规范文档将涵盖HTML、CSS、JavaScript等前端开发的相关规范，希望每位开发人员都能认真遵守。
二、HTML规范。
1. 文件命名规范。
文件名应使用小写字母，单词之间可以使用连字符“-”连接，例如，index.html、about-us.html。
文件名应简洁明了，不使用无意义的数字或字符。
2. 代码缩进规范。
使用两个空格进行代码缩进，不使用Tab键。
3. 标签规范。
标签名应使用小写字母。
标签属性值应使用双引号。
4. 注释规范。
在需要注释的地方使用<!--->进行注释。
5. 其他规范。
应尽量避免使用行内样式和行内脚本。
尽量减少标签的嵌套层级，保持HTML结构的简洁性。
三、CSS规范。
1. 文件组织规范。
将CSS文件统一放置在一个文件夹中，不要将CSS文件散落在各个目录中。
可以根据模块或页面的不同，将CSS文件拆分为多个文件，使用@import进行引入。
2. 类名规范。
类名应使用小写字母，单词之间可以使用连字符“-”连接，例如，header-nav、footer-content。
类名应简洁明了，不使用无意义的数字或字符。
3. 属性顺序规范。
CSS属性应按照一定的顺序书写，例如，布局定位属性、盒模型属性、文字排版属性、视觉效果属性等。
4. 其他规范。
尽量避免使用!important，除非必要情况下。
尽量使用缩写属性，减少代码量。
四、JavaScript规范。
1. 变量命名规范。
变量名应使用驼峰命名法，例如，myName、isShow。
变量名应简洁明了，不使用无意义的单个字母。
2. 代码缩进规范。
使用两个空格进行代码缩进，不使用Tab键。
3. 注释规范。
在需要注释的地方使用//进行单行注释，使用/ /进行多行注释。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
前端规范
编程规约
（一）项目结构
1.【推荐】pages 目录下页面文件需使用文件夹目录包裹禁止根目录下直接创建页面
2.【强制】使用env 文件维护项目中使用的各环境差异变量，禁止项目中写死baseURL
3.【推荐】组件/ 布局/ 页面需单独创建文件夹分开，页面私有组件可在页面文件夹下
创建Components 目录单独维护
4.【强制】使用services 维护一切请求交互方法，请求地址/ 请求方法/ 组合方法单
独封装维护
5.【强制】Pages 下页面文件夹需与services 请求方法等封装对象名一致，统一使用小
驼峰方法命名，禁止使用中文、下划线、特殊字符
6.【强制】Components 文件命名，统一使用大驼峰方式，Dom 引用时保持大驼峰方式。
7.【强制】Components 自定义props 或attr ，使用小驼峰方式，data 属性使用data-
变量名形式
8.【推荐】js 钩子、私有router方法应按照执行顺序排列书写，禁止销毁钩子前置等影响
代码阅读
9.【强制】项目中多次使用的组件统一在main.js 中注册，高阶组件需书写Readme.md
文档
10.【强制】第三方js SDK 或其他工具类方法统一放置在utils 文件夹中
11.【推荐】需要编辑的静态资源放置在assets 目录中，其他资源放置在public 目录并根
据文件类型创建文件夹维护管理。
12.【强制】禁止手动修改package.json 依赖文件，禁止修改node_moudules 文件夹内任
何内容。
（二）命名规范
1．【强制】全局变量使用let 声明保持块级作用域，常量使用const 。
如需特殊变量提升可使用var 并书写备注。
2．【强制】常量命名全部大写，单词用下划线隔开，力求寓意表达完整清楚，不要嫌名字长。
生僻单词可添加中文备注
3．【强制】代码中除全局对象、框架自带属性外，禁止使用$ 开头或包含$ 的变量名。
4．【强制】所有编程相关的命名严禁使用拼音与英文混合的方式,更不允许直接使用中文的方式。
5．【强制】方法名、参数名、成员变量、局部变量都统一使用小驼峰风格。
6．【强制】严禁使用可能产生误导的变量命名，如使用List 命名对象
7．【强制】严禁使用保留词进行命名或对保留词进行组合命名。
8．【强制】代码和注程中都要避免使用任何语言的种族歧视性词语和侮辱性词汇。
9．【强制】同一对象内禁止使用相似字段名，如detail, details, detailsss 等添加一个字符或数字进行区分的形式
10．【强制】杜绝完全不规范的缩写,避免望文不知义。
11．【推荐】在常量与变量的命名时,表示类型的名词放在词尾,以提升辨识度
（三）常量定义
1．【强制】不允许任何魔法数字(即未经预先定义的常量)直接出现在代码中，例如时间计算等使用乘法计算形式表达并书写备注
2．【推荐】如果变量值仅在一个固定范围内变化用enum类型来定义（ts）或使用对象map 定义
3．【推荐】使用中央状态管理如Vuex 进行枚举维护，多项目可统一建立前端字典
（四）代码格式
1．【强制】根据项目EsLint 配置进行代码规范，禁止关闭EsLint。
2．【强制】使用Prettier 进行代码格式化，禁止修改项目配置文件
3．【强制】尽可能使用强等于或多次取反进行判断，确认类型安全
4．【推荐】如果只有if else，能用三元替代则三元替代
5．【推荐】三元不得嵌套三元
6．【推荐】大量if else或switch,采用map替代
a.如果map无法替代,则采取一些设计模式优化代码
7．【推荐】使用a ?b替代a?a:b
8．【推荐】使用a ?? b替代a||b , 避免a为假值
9．【推荐】使用a ? b 替代a && a.b
10.【强制】定义枚举和type应该守首字母大写规范。
11．【推荐】工具函数应带有注释input output
12．【推荐】CSS 尽可能的不要使用important,如果使用Important必须写明注释13．【推荐】颜色尽量使用十六进制,透明使用less的fade函数来代替(方便阅读)
一、异常日志
1．【强制】上线项目关闭普通log 日志
2．【强制】上线前禁止抛出异常错误或阻断性错误。
3．【推荐】尽可能解决一切可解决的警告问题
4．【推荐】项目上线初期可使用FundeBug 等工具检查跟踪异常
二、部署上线
1．【推荐】使用Gzip 对编译文件进行压缩
2．【强制】关闭线上sourcesMap
3．【强制】关闭线上调试日志
4．【强制】项目前期关闭客户端缓存，后续稳定后酌情启用客户端缓存
5．【强制】打包部署以当前日期YYYYMMDD-版本号格式创建压缩包整体发布，严禁单独文件发布。
6．【推荐】部署后创建Git Tag 书写备注标记发版内容和相关信息，稳定版本创建Git 发行版。