前台编码规范(HTML, JS, CSS)
前端代码规范文档
前端代码规范文档前端代码规范文档一、命名规范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. 定期审核项目中的代码，找出不符合规范的代码并进行修正。
阿里前端开发规范
阿里前端开发规范阿里前端开发规范包括代码、命名、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前端开发时应该积极遵守和推崇相关规范。
前端代码基本命名规范和格式规范
前端代码基本命名规范和格式规范1、HTML代码命名规范及格式规范1.1 HTML代码所有的标签名和属性应该都为⼩写，属性值应该使⽤双引号闭合。
<!--推荐⽰例--><img src="demo.ipg" alt="test"/>1.2 给所有的关键元素定义元素的id和class，便于和CSS、JavaScript交互。
id和class的命名⼀定要规范。
推荐：根据语义和DOM树的层级关系来定义合适的名称。
名称中全部使⽤⼩写，id名称中的关键词⽤下划线（_）连接，class的关键词⽤中划线（-）连接。
<!--推荐⽰例--><div id="reader"><div id="reader_introduce" class="reader-introduce">...</div></div>1.3 如果class名称仅作为JavaScript调⽤的“钩⼦”，则可在名称中添加“js”前缀<!--⽰例--><ul class="js-reader-menu"><li class="menu-toc js-active">Toc</li><li class="menu-store js-active">Store</li></ul>1.4 HTML代码的层级缩进为4个空格。
如果元素包含⼦元素，则此⼦元素对应的起始标签和闭合标签分别单独占⽤⼀⾏。
<!--推荐⽰例--><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul>1.5 注释添加的位置在要注释的代码上部并单独占⽤⼀⾏，不要再代码⾏的后⾯直接添加。
前端编码规范
前端编码规范前端编码规范是一种规范化开发方法，通过制定统一的标准和规则来规范前端开发，提高代码的可读性、可维护性和可扩展性。
以下是前端编码规范的主要内容。
1. HTML规范- 使用语义化的标签，如使用`<header>`代替`<divid="header">`。
- 避免使用行内样式，尽量使用外部样式表。
- 标签闭合和缩进规范，保持良好的代码风格。
2. CSS规范- 使用简单明了的命名方式，避免过度嵌套。
- 保持代码风格的一致性，使用统一的缩进和换行规范。
- 尽量使用预处理器如LESS或Sass，提高CSS的可维护性。
3. JavaScript规范- 使用驼峰命名法，清晰明了，方便代码的阅读和理解。
- 使用严格模式，加强代码的约束性。
- 尽量避免全局变量的使用，使用模块化的开发方式。
4. 注释规范- 对于复杂的代码逻辑，添加注释以便于他人理解和维护。
- 使用清晰明了的注释，包括功能描述、参数说明、返回值等。
5. 文件和目录规范- 使用有意义且具备可读性的文件和文件夹命名，方便管理和查找。
- 对于不同类型的文件，如HTML、CSS、JavaScript，放置在不同的目录中。
6. 性能优化规范- 减少HTTP请求数量，合并和压缩静态资源文件。
- 合理使用缓存，减少不必要的重复计算。
- 使用异步加载和延迟加载，提高页面加载速度和用户体验。
7. 测试规范- 使用合适的测试工具，如Jasmine或Mocha，编写单元测试用例。
- 在开发过程中，及时进行测试，确保代码的质量和稳定性。
总结：前端编码规范是一种提高代码质量和团队协作效率的重要工具。
通过遵循规范，可使代码具备更好的可读性、可维护性和可扩展性，提高开发效率和代码质量。
因此，前端开发人员应该养成良好的编码习惯，遵循前端编码规范，以提高开发效率和代码质量。
移动端前端编码规范文档
移动端前端编码规范文档移动端技术选型框架：uni-appUI组件：uView UI技术插件：pinna、axios、vue-router等编辑器：HBuilderX基本要求代码力求简洁，不要写大量重复的逻辑代码（公共方法需封装，公共样式提取到公共样式中）代码要有可读性，函数和元素命名要具有业务意义，关键业务要有详细的注释代码要有扩展性，要尽可能适应未来的业务变化，不得生搬硬套现有业务逻辑代码要有通用性，一个方法只专注于该方法需要做的事情（对外暴露相应的参数），一个模块只专注于该模块范围内的事情（对外暴露相应的接口）目录名命名规范全部采用小写方式，有复数结构时，要采用复数命名法， 缩写不用复数。
正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc反例： script / style / demo_scripts / demoStyles / imgs / docs编程规约(一)命名规范1.1.1 项目命名全部采用小写方式， 以中划线分隔。
正例：mall-management-system反例：mall_management-system / mallManagementSystem1.1.2 目录命名全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc反例： script / style / demo_scripts / demoStyles / imgs / docs1.1.3 JS、CSS、SCSS、HTML、PNG 文件命名全部采用小写方式， 以中划线分隔正例： render-dom.js / signup.css / index.html / company-logo.png反例： renderDom.js / UserManagement.html1.1.4 命名严谨性代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。
前端代码规范
前端代码规范规范⽬的：为了提⾼⼯作效率，便于后台⼈员添加功能及前端后期优化维护，输出⾼质量的⽂档，在⽹站建设中，使结构更加清晰，代码简明有序，有⼀个更好的前端架构。
规范基本准则：符合web标准，使⽤具有语义的标签，使结构、表现、⾏为分离，兼容性优良。
页⾯性能优化，代码简洁、明了、有序，尽可能的减少服务器的负载，保证最快的解析速度。
⼀、⽂件规范1.1 HTML部分 1.1.1 建包问题 ⽂件均归档⾄约定的⽬录中，建包格式如下：针对 Vue + ElementUI技术栈 注意：所有的页⾯、css、image、sass、less⽂件放在components⽂件夹下，在该⽂件夹下再做细分，404等统⼀的错误页⾯放到error⽂件夹中，路由⽂件放到router⽂件夹下，服务层接⼝调⽤放在services⽂件夹下，⼯具类封装放在utils⽂件夹下 1.1.2 HTML头部编写 (1) 编码：所有编码均采⽤xhtml/html，标签必须闭合，编码统⼀为UTF-8，在多语⾔的⽹站建议添加<html lang="zh-CN">，说明内容是以中⽂显⽰和阅读为基础的 (2) 语义化：正确使⽤标签，充分利⽤⽆兼容性问题的html⾃⾝标签 (3) ⽂件头部head内容： • title: 需要添加标题 • 编码: charset=UTF-8 • meta: 可以添加description、keywords内容1.2 CSS部分 1.2.1 CSS种类及其命名 可以将CSS样式表分为三类：全局样式表、模块通⽤样式表和独⽴样式表 • 全局样式表常⽤命名：public.css • 模块通⽤样式表命名：模块名_basic.css • 独⽴样式表：模块名_页⾯名.css 1.2.2 CSS引⼊ CSS⽂件引⼊可通过外联或者内联⽅式引⼊ • 外联⽅式 • 内联⽅式 注意：link和style标签都应该放⼊head中，原则上，不允许在html上直接写样式。
Web前端编码规范
一、javascript编码规范1．所有js代码应写在一个.js文件中，使用<script type=“text/javascript” src=“xxx.js”></script>引入，不在html文件中直接写js代码2．<script>标签的language属性已废弃，不要再使用3．所有变量使用前必须声明，声明变量需要使用var关键字，否则默认声明的为全局变量，变量名应为英文字母，数字，下划线“_”，美元符号“$”组成，变量名第一个字符不能是数字。
4．变量名统一使用小写字母，多个单词时使用驼峰式命名，即后面的单词首字母大写如：userName = “xxx”;。
5．常量名应全为大写，单词与单词之间使用下划线“_”连接，如：PAGE_SIZE=“20”;。
6．代码中不要直接使用数字，而是事先将数字保存至一个变量或常量中，这样更便于理解，如：var RELOAD_DELAY=“3000”。
7．每行语句结束时必须使用分号“;”结束，这样能提高解析的速度，同时能避免代码压缩时出错。
8．一行语句的字符数不能太长，一般不超过80个字符，多出的应该换行显示。
9．函数命名一般以模块名如：“news_”加上功能描述，如：news_showDetail();10．声明数组直接使用var newArray = []; 替代var newArray=new Array();，声明对象直接使用var obj = {}替代var obj=new Object();;11．代码缩进，统一缩进四个空格，不要使用软件自带的Tab键，因为每个软件的Tab键的缩进可能会不一致，如果需要使用，应将软件的Tab键设置为四个空格12．代码书写格式if(….){... …}else{... …}function fun(){… …}其它建议13．注释，分为行注释和块注释，根据需要选择。
代码中应该合理使用注释，一般较复杂的功能性函数都需要注释说明作用及用途，以便阅读和维护。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
密级：内部1引言 (2)
1.1编写目的 (2)
1.2变更记录 (2)
1.3定义 (2)
1.4参考资料 (2)
2HTML (2)
2.1命名 (2)
2.2标签 (3)
2.3排版 (3)
2.4CSHTML (3)
3JS (3)
3.1组织 (3)
3.2命名 (4)
3.3变量 (4)
3.4方法 (4)
3.5对象及控件 (4)
3.6第三方库 (4)
3.7排版 (4)
3.8AJAX (5)
4CSS (5)
4.1组织 (5)
4.2命名 (5)
4.3兼容性 (5)
4.4第三方库 (6)
4.5排版 (6)
前台编码规范
1引言
1.1编写目的
帮助开发团队形成一致的前台编码风格，并指出某些容易引发BUG的不良编码习惯，预期读者为长沙安晨信息科技有限公司的全体开发人员。
1.2变更记录
版本号作者日期备注
1.0Aaron7/1/2014
1.1Aaron7/31/2014Add examples
1.2Aaron8/4/2014Update the format
1.3定义
术语定义备注
HTML Hypertext Markup Language
JS Javascript
CSS Cascading Style Sheet
1.4参考资料
2HTML
2.1命名
文件名采用帕斯卡命令法，所有单词首字母大写，词汇缩小可以全部大写，单词间不加任何连接符。
例如“UserLogin.cshtml”
∙文件名应见名知义，能清晰描述页面主要功能，例如“AddUser.cshtml”。
2.2标签
∙所有标签都应该正确关闭，例如“<div>…</div>”，无子元素及内容的标签，可根据W3C规范简化为自关闭标签，例如“<input…/>”，但有部分自关闭标签兼容性较
差，在无法确认的情况下，都应该使用双标签关闭。
例如<i/>标签在IE浏览器中可
能无法加载背景图片。
∙为确保兼容性及用户体验一致性，应尽量避免使用以下过时标签：<framework>，<br>，<xmg>，<i>，<u>，<font>。
此外，不要将<table>标签用于页面布局。
∙应尽量避免使用自定义标签名，以增强可读性和可维护性。
∙完整的独立*tml页面，应该内含<header>标签，并在<header>中登记keywords, description等信息，以便于搜索引擎收录。
2.3排版
∙HTML标记内部，不允许出现空行及无意义的空格。
∙应正确使用缩进来呈现嵌套关系，子元素应比父级元素缩进一个制表位。
但仅有内容无子标签的元素，可在同一行书写，例如“<button>Save</button>”。
∙如标签属性过多过长，可适当在标签内部换行，但同一页面，同类标签应采用大致相同的换行策略，切忌五花八门。
2.4CSHTML
∙向控件赋值应尽量直接使用标准的Model，ViewData或ViewBag，如非必要，不要使用@{}嵌入块，尤其是不要在嵌入块中进行无意义的重复引用，例如“@{var
test=@ViewBag.Test;}”。
∙@Html生成器存在多个兼容性问题，应谨慎使用，简单的控件应尽可能使用原生html 标签。
例如@Html.DropDownList在绑定已有选中值的数据源时，会丢失已选中项。
3JS
3.1组织
∙应尽可能将JS代码写入独立的JS文件中，而不要直接嵌入页面，以增强缓存利用率及可维护性。
∙相同或类似算法应尽可能统一到同一个方法中，以提高可维护性。
尤其是不允许在Creat和Edit页面之间直接Copy相关JS代码。
∙在页面中引用JS文件时，应将引用标签写在<body>标签之后。
∙项目正式发布时，应将所有JS文件转化为mini版本。
3.2命名
∙文件名全部小写（词汇缩写也小写），各单词间用“-”为连接符。
例如“jquery-overlay-1.0.js”
∙方法名，变量名均采用骆驼命名法，第一个单词小写，之后的单词首字母大写，各单词间不加任何连接符。
例如“userId”
∙所有变量及方法名都应见名知义，除i,j,k等约定俗成用于集合遍历的临时变量名以外，不允许使用无意义的单个字母做为变量名或方法名。
3.3变量
∙JS有着非常糟糕的内存及作用域管理机制，如非绝对必要，不要声明全局变量。
3.4方法
∙为提高兼容性，尽可能少使用return false;应以e.preventDefault();代替。
3.5对象及控件
∙公司目前无专职前台工程师，JS平均水平偏低。
而JS自定义对象及控件语法比较复杂，为增强项目可维护性，应尽量避免使用自定义对象及控件，在必要情况下，也应先与整个团队协商。
3.6第三方库
∙为增强可维护性，原则上各项目都采用Jquery或AngularJS framework为基础库，以确保所有人都能看懂相关代码。
∙在项目中引入第三方JS插件时，应与整个团队协商，并认真评估兼容性。
∙如无绝对正当的理由，同一个项目中，不应该出现同一JS库的不同版本。
∙项目中引用的任何第三方JS文件均应存放于独立文件夹中，并不得直接修改原始文件，如果需要扩充或修改第三方API，应写在另外的文件中。
如引用的第三方JS库较多，应在项目根目录下维护一份清单。
∙应尽可能使用CDN来引用第三方库，以改善访问体验。
3.7排版
∙JS代码块中不应该出现无意义的空行，尤其是不允许毫无规律地随意换行。
∙为增强兼容性，每一个完整的语句末尾都应加上分号。
∙按约定俗成的JS编码风格，左花扩号置于代码块的右上角。
∙在进行链式方法调用时，推荐采用一行一个方法的书写方式，以增强可读性，例如：Item
.find(‘’)
.attr(‘’,’’)
.appendTo();
3.8AJAX
∙原则上当采用AJAX提交数据时，不要再使用form表单，以防止重复提交，造成资源浪费。
4CSS
4.1组织
∙为增强可维护性，任何情况下，都不要直接使用内联样式，也不要在页面header中加入<style>标签，应将所有样式都写入独立的CSS文件中。
∙原则上，同一个项目使用同一个CSS文件，但各模块分别维护的代码块，应使用注释声明包裹起来，以增强协同性。
∙在页面中引用CSS文件时，应将引用标签置于<header>标签内部。
∙项目正式发布时，应将所有CSS文件转化为mini版本。
4.2命名
∙文件名全部小写（词汇缩小也小写），各单词间用“-”为连接符。
例如“all-pages.css”
∙标签名，属性名，class名全部用小写，各单词间用“-”为连接符，例如“button.save-change{font-size:16px;}”
4.3兼容性
∙为增强兼容性，应尽可能减少使用CSS3特性。
例如“first-nth-child”属性在IE8以下浏览器无法加载
∙为增强兼容性，应尽可能减少使用important声明。
∙为增强兼容性，应尽量避免使用标签类型选择器。
4.4第三方库
∙推荐使用bootstrap为前台css框架，当前最新稳定版本为3.0。
∙项目中引用的任何第三方CSS文件均应存放于独立文件夹中，并不得直接修改原始文件，如果需要扩充或修改第三方样式，应写在另外的文件中。
如引用的第三方CSS 库较多，应在项目根目录下维护一份清单。
∙应尽可能使用CDN来引用第三方库，以改善访问体验。
4.5排版
∙按约定俗成的CSS编码风格，左花括号应位于代码块的左侧。
∙CSS文件中，不应出现无意义的换行或空格。