Web前端开发规范手册
- 格式:docx
- 大小:29.11 KB
- 文档页数:12
Web前端开发规文件规为输出高质量的Web页面,提高团队协作效率,便于后台人员添加功能及前端后期优化与维护,如有错误及时提出更改。
1、html,css,js,images,fonts等文件目录组织如下如示:├── xxx.html├── css/│ ├── index.css│ ├── header.css│ ├── footer.css│ └── 2016/│ │ ├── content.css│ │ └── nav.css├── js/│ ├── xxx.js│ ├── xxx_min-tab.js│ └── 2016/└── images/│ ├── index_head.jpg│ ├── index_logo.gif│ └── 2016│ │ ├── xxx.jpg│ │ └── xxx.png└── fonts/└── xxx.ttf文件命名原则调整为所有字母小写,单词之间使用破折号(-)相连,压缩后的文件在原文件名(除扩展名)后添加.min。
参考bootstrap文件命名:bootstrap-theme.css, bootstrap-theme.min.css。
常用目录名:data(数据库) images(图片) install (安装) templets (模版) include (包含) admin (后台) rss (定阅) media (媒体) config (配置) Script (脚本) Language (语言) style (样式);引入 CSS 和 JavaScript 文件<link rel="stylesheet" href="code-guide.css"><style>/* ... */</style><!-- JavaScript --><script src="code-guide.js"></script>class 用于标识高度可复用组件,因此应该排在首位。
目录目录 (1)第一部分:HTML 4.01 / XHTML 1.0 参考手册 (3)按功能顺序列出的HTML 4.01/XHTML 1.0 标签手册 (3)核心属性(Core Attributes) (8)语言属性(Language Attributes) (12)键盘属性(Keyboard Attributes) (13)窗口事件(Window Events) (13)表单元素事件(Form Element Events) (13)键盘事件(Keyboard Events) (14)鼠标事件(Keyboard Events) (14)第二部分CCS手册 (14)缩写: (49)CSS 背景属性 (49)CSS 边框属性(border) (50)CSS 文本属性 (52)CSS 字体属性(font) (53)CSS 外边距属性(margin) (55)CSS 内边距属性(padding) (55)CSS 列表属性(list) (56)内容生成 (57)轮廓 (57)CSS 尺寸属性(Dimension) (58)CSS 分类属性(Classification) (58)CSS 定位属性(Positioning) (60)CSS 表格属性 (61)CSS 伪类 (61)CSS 伪元素 (62)打印属性 (62)听觉样式表 (63)CSS2 听觉参考 (63)CSS 单位 (66)尺寸 (66)尺寸 (66)颜色 (66)第三部分:JavaScript 参考手册 (67)String对象方法 (67)String 对象的方法 (67)String 对象的属性 (69)JavaScript Date 对象参考手册 (69)Date 对象的方法 (69)Date 对象的属性 (71)Array 对象的方法 (72)Array 对象的属性 (72)JavaScript Boolean 对象的参考手册 (72)Boolean 对象的方法 (73)Boolean 对象的属性 (73)JavaScript Math 对象的参考手册 (73)Math 对象的方法 (73)Math 对象的属性 (74)JavaScript Number 对象参考手册 (75)Number 对象的方法 (75)Number 对象的属性 (76)JavaScript RegExp 对象参考手册 (76)RegExp 对象的方法 (76)支持正则表达式的String 对象的方法 (77)RegExp 对象的属性 (77)JavaScript 函数参考手册(全局对象) (77)顶层函数(全局函数) (77)顶层属性(全局属性) (78)JavaScript 事件参考手册 (78)事件句柄 (78)第四部分:HTML DOM 参考手册 (80)JavaScript 对象 (80)HTML DOM 对象 (80)第五部分:SQL 快速参考 (82)SQL 语句 (82)第六部分:HTML 服务器控件 (85)HTML 服务器控件 (85)Web 服务器控件 (85)Web 服务器控件 (86)创建一个Web 服务器控件的语法是: (86)Validation 服务器控件 (87)Validation 服务器控件 (87)创建Validation 服务器控件的语法是: (87)第一部分:HTML 4.01 / XHTML 1.0 参考手册按功能顺序列出的HTML 4.01/XHTML 1.0 标签手册∙NN:显示所支持标签的Netscape 的最早版本。
前端开发设计规范文档一、引言前端开发是为用户提供良好的用户体验和友好的界面而进行的开发工作。
为了保证开发的一致性和高效性,制定前端开发设计规范是至关重要的。
本文档旨在提供一套通用的前端开发设计规范,帮助团队成员在开发过程中更好地协同工作,并提供一致美观的用户体验。
二、命名规范1.文件和目录命名规范-使用小写字母和连字符"-",不使用大写字母、空格或下划线。
-确保文件和目录名称清晰、简洁且有意义。
2.变量和函数命名规范-使用有意义的英文单词或短语命名变量和函数。
-使用小驼峰命名法,即第一个单词首字母小写,后续单词首字母大写。
-避免使用过于简单的变量名,如a、b、x、y等。
3.CSS类和ID命名规范-使用英文单词或短语命名CSS类和ID。
-使用连字符"-"分隔单词,避免使用下划线。
-避免使用过于简单的类名或ID,如a、b、c等。
三、HTML规范1.DOCTYPE声明规范- 使用 HTML5 的 DOCTYPE 声明,即 <!DOCTYPE html>。
3.属性使用规范-使用双引号""包裹属性值。
-避免使用行内样式,优先使用外部CSS文件。
四、CSS规范1.选择器使用规范-使用类选择器和ID选择器,避免使用元素选择器。
-避免使用过于复杂的选择器,保持简洁性和性能。
2.样式书写规范-使用缩进和换行使样式代码更易读。
-按照属性的字母顺序排列样式规则。
- 使用简写属性,如 margin、padding、font等。
3.文件组织规范-将样式规则分别存放在不同的CSS文件中,便于维护和管理。
五、JavaScript 规范1.变量和常量声明规范- 使用 var、let 或 const 声明变量和常量,避免使用全局变量。
-尽量将变量声明和赋值放在同一行。
2.代码书写规范-使用缩进和换行使代码更易读。
-使用驼峰命名法命名变量、函数和对象属性。
-使用分号";"结束语句。
前端开发规范手册1.1概述为提高团队协作效率,便于后台人员添加功能,及前端后期优化维护,输出高质量的文档,特制订此文档。
本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发。
本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改。
1.2基本准则符合web标准,语义化HTML,结构表现行为分离,兼容性优良。
页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。
2.1文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符。
命名原则的指导思想:一是使得工作组的每一个成员能够方便的理解每一个文件的意义。
二是当在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便查找、修改、替换、计算负载量等等操作。
1.HTML命名原则引导文件统一使用index.htm、index.html、ndex.asp文件名(小写)。
各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。
例如:关于我们\aboutus信息反馈\feedback产品\product如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示;每一个目录中应该包含一个缺省的html文件,文件名统一用index.htm、index.html、index.asp。
2.图片命名原则图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质。
例如:广告、标志、菜单、按钮等。
放置在页面顶部的广告、装饰图案等长方形的图片取名:banner。
标志性的图片取名:logo。
在页面上位置不固定并且带有链接的小图片取名:button。
在页面上某一个位置连续出现,性质相同的链接栏目的图片取名:menu。
装饰用的照片取名:pic。
不带链接表示标题的图片取名:title。
例如:banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_n ews.giflogo_police.giflogo_national.gifpic_people.jpg鼠标感应效果图片命名规范为"图片名+_+on/off"。
前端开发设计规范文档一、引言二、代码编写规范1.缩进和空格-使用2个空格作为一个缩进层级。
- 在每个关键词或运算符后添加一个空格,如if (condition) {}。
-每行代码的末尾都应该去掉多余的空格。
2.行长限制每行代码应控制在80个字符以内,避免过长的代码行导致代码难以阅读和理解。
3.注释-使用注释来解释代码的意图和逻辑。
-使用单行注释(//)来注释一行代码,使用多行注释(/*...*/)来注释一段代码。
-注释要保持与代码同步,当代码发生修改时,注释也应随之更新。
4.变量和函数命名- 使用驼峰命名法(camelCase)命名变量和函数。
变量和函数名应该清晰明确,能够准确表达其含义。
-避免使用缩写和简写,除非是常见的缩写或简写形式。
5.常量命名-使用全大写字母和下划线的命名方式命名常量。
-常量名要具有描述性,能够清晰表达其含义。
6.字符串引号-使用双引号("")包裹字符串,避免使用单引号('')。
7.条件判断和循环语句-在条件判断和循环语句中使用花括号({})包裹代码块,即使只有一行代码。
8.数据类型转换-使用严格相等运算符(===)进行数据类型和值的比较,避免使用弱相等运算符(==)。
三、组织结构规范1.文件和文件夹命名-文件和文件夹命名应该清晰明确,能够准确表达其内容。
-文件和文件夹的命名应使用小写字母、短划线和数字的组合,避免使用空格和特殊字符。
2.目录结构前端项目应该按照一定的目录结构进行组织,常见的目录结构如下:- src:项目源代码目录。
- assets:用于存放静态资源文件,如图片、字体等。
- styles:存放样式文件。
- scripts:存放脚本文件。
- pages:存放页面组件。
四、性能优化规范1.文件合并和压缩-将多个CSS和JS文件合并为一个文件,并进行压缩。
-使用工具和插件进行自动化合并和压缩操作。
2.图片优化- 使用适当的图像格式,如JPEG、PNG、WebP等,以提高图像加载速度。
前端开发规范文档前端开发是指在网站、网页或移动端应用的开发过程中,负责用户界面的设计和开发的工作。
一个良好的前端开发规范可以提高团队的工作效率、降低错误率,并且方便后期的维护和扩展。
本文将介绍一些常见的前端开发规范。
一、HTML规范2.使用正确的缩进和格式:使用合适的缩进和换行,使HTML代码易于阅读和维护。
4. 使用语义化的类名和id名:类名和id名应该能够准确描述元素的作用和功能,避免使用无意义的名称。
二、CSS规范2. 避免使用!important:尽量避免使用!important来覆盖样式,应优先考虑调整选择器的优先级。
3.使用合适的样式复用方式:避免重复的代码,可以使用类名或父子选择器来复用样式。
4. 使用合适的尺寸单位:根据具体情况选择合适的尺寸单位,如px、em、rem等。
5. 使用CSS预处理器:可以使用Sass、Less或Stylus等CSS预处理器来提高开发效率和代码的可维护性。
三、JavaScript规范1. 使用严格模式:在JavaScript代码的开头使用"use strict"启用严格模式,以减少错误和提高代码质量。
2.使用合适的命名规范:变量、函数和类名应该具有描述性的名称,遵循驼峰命名法或下划线分隔符。
3.避免全局变量污染:尽量避免使用全局变量,可以通过使用模块化的方式来封装代码,或者使用命名空间。
4. 避免使用eval和with:避免使用eval函数和with语句,它们可能会引起安全问题和性能问题。
5.使用合适的循环和控制结构:使用合适的循环和控制结构来提高代码的可读性和性能,避免过多嵌套的层级。
四、代码管理规范1. 使用版本控制工具:使用Git等版本控制工具来管理代码的版本,方便团队协作和代码的追踪和回滚。
2.编写有意义的提交信息:每次提交代码时,应编写有意义的提交信息,描述本次提交的内容和目的。
3.周期性地进行代码审查:定期进行代码审查,发现和修复潜在的问题,提高代码质量和稳定性。
解释权文档摘要版本管理目录1.1CSS原理 (3)1.2文件规范 (4)1.3注释规范 (5)1.4命名规范 (6)1.4.1基础命名规则 (6)1.4.2常用的id命名 (7)1.4.3常用的class命名 (8)1.5书写规范 (8)1.5.1排版规范 (8)1.5.2属性编写顺序 (9)1.5.3规则书写规范 (10)1.5.4代码性能优化 (10)1.5.5CSS Hack的使用 (16)1.5.6字体规则 (16)1.6其他规范 (17)1.7测试规范 (17)1.7.1了解浏览器特效支持 (17)1.7.2设定浏览器支持标准 (17)1.7.3常用样式测试工具 (18)2.JSP (19)2.1文件目录 (19)2.2文件命名 (19)2.3页面编码规范 (20)3.JS (35)没有一种规范,就像一盘散沙;这种自由,会让自己写的东西时常变化。
也很不利于团队协作开发。
添加必要的注释,对一个有责任心、有道德模范的前端必须具备的好习惯,可以大大提高代码的可维护性、可读性。
1.CSS1.1CSS原理CSS全称为“Cascading Style Sheets”层叠样式表。
页面的标准-“WEB标准”注:X(HTML)用来决定网页的结构和内容。
CSS用来设定网页的表现形式。
JavaScript用来控制网页的行为浏览器是如何渲染页面和加载页面为什么有些网站打开的时候会加载会很慢,而且是整个页面同时显示的,而有些网站是从顶到下逐步显示出来的?要搞懂这个可以先从下面这个常规流程开始: 1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行。
2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
3. 如果遇到语义解释性的标签嵌入文件(JS 脚本,CSS 样式),那么此时IE 的下载过程会启用单独连接进行下载。
4. 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
解释权文档摘要版本管理目录1.1CSS原理 (3)1.2文件规范 (4)1.3注释规范 (5)1.4命名规范 (6)1.4.1基础命名规则 (6)1.4.2常用的id命名 (7)1.4.3常用的class命名 (8)1.5书写规范 (8)1.5.1排版规范 (8)1.5.2属性编写顺序 (9)1.5.3规则书写规范 (10)1.5.4代码性能优化 (10)1.5.5CSS Hack的使用 (16)1.5.6字体规则 (16)1.6其他规范 (17)1.7测试规范 (17)1.7.1了解浏览器特效支持 (17)1.7.2设定浏览器支持标准 (17)1.7.3常用样式测试工具 (18)2.JSP (19)2.1文件目录 (19)2.2文件命名 (19)2.3页面编码规范 (20)3.JS (35)没有一种规范,就像一盘散沙;这种自由,会让自己写的东西时常变化。
也很不利于团队协作开发。
添加必要的注释,对一个有责任心、有道德模范的前端必须具备的好习惯,可以大大提高代码的可维护性、可读性。
1.CSS1.1CSS原理CSS全称为“Cascading Style Sheets”层叠样式表。
页面的标准-“WEB标准”注:X(HTML)用来决定网页的结构和内容。
CSS用来设定网页的表现形式。
JavaScript用来控制网页的行为浏览器是如何渲染页面和加载页面为什么有些网站打开的时候会加载会很慢,而且是整个页面同时显示的,而有些网站是从顶到下逐步显示出来的?要搞懂这个可以先从下面这个常规流程开始: 1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行。
2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
3. 如果遇到语义解释性的标签嵌入文件(JS 脚本,CSS 样式),那么此时IE 的下载过程会启用单独连接进行下载。
4. 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
web开发规范Web开发是一项繁琐且复杂的任务,开发人员需要遵守一些规范来保证代码的质量和可维护性。
下面是一些常见的web开发规范,帮助开发人员编写更好的代码。
1. 使用正确的HTML结构:确保HTML文档正确地使用各种标签和元素,并遵循语义化的HTML结构。
避免使用过时的标签和元素,并确保文档结构清晰有序。
2. 使用外部CSS和JavaScript:将CSS和JavaScript代码从HTML文档中分离出来,使用外部文件进行引用。
这样可以使代码更具可维护性,并提高页面加载速度。
3. 遵循CSS命名约定:使用有意义的命名来定义CSS类和ID,避免使用不清晰的缩写和简单的命名。
命名应该清晰明确,并且易于理解和扩展。
4. 使用CSS预编译器:使用CSS预编译器如Less或Sass来帮助组织和管理CSS代码。
预编译器可以提供更好的代码结构和可重用性。
5. 管理JavaScript代码:使用模块化的JavaScript代码来避免全局命名冲突。
可以使用工具如Webpack或Browserify来打包和管理JavaScript模块。
6. 代码缩进和格式化:使用一致的缩进和格式化风格来使代码易读和一致。
可以使用工具如ESLint或Prettier来自动格式化代码。
7. 处理错误和异常:使用try-catch语句来处理可能发生的错误和异常。
捕获错误并适当地处理它们,以避免应用程序崩溃或产生意外的结果。
8. 代码注释:在代码中加入适当的注释来解释代码的目的和功能。
注释可以帮助其他开发人员理解代码,以及在以后修改代码时的参考。
9. 版本控制:使用版本控制系统如Git来管理和追踪代码的变化。
这可以帮助团队协作,管理不同的代码版本,并恢复或合并代码变更。
10. 测试和调试:编写自动化测试来验证代码的正确性,并使用调试工具来跟踪代码的执行过程。
这可以帮助发现和修复代码中的潜在问题。
11. 优化性能:优化Web应用程序的性能是一个重要的任务。
前端开发设计规范文档1.前言前端开发是构建用户界面的过程,它的设计和编写需要遵循一定的规范,以保证代码的可读性、可维护性和可扩展性。
本文档旨在提供一个前端开发的设计规范,帮助开发人员在设计和编写前端代码时遵循统一的规范。
2.命名规范2.1文件和文件夹命名-文件名使用小写字母,单词之间可以使用连字符“-”连接。
-文件夹名同样使用小写字母,单词之间使用连字符“-”连接。
2.2变量和函数命名- 变量和函数名使用驼峰命名法,即第一个单词首字母小写,后面的单词首字母大写。
例如:userInfo, getUserInfo。
2.3CSS类命名- CSS 类名使用连字符“-”连接,例如:main-container, login-button。
3.HTML规范3.2嵌套规范-HTML元素的嵌套应该保持良好的层次结构,不要过深嵌套。
-使用缩进保持结构清晰,增加代码的可读性。
4.CSS规范4.1使用外部样式表-将CSS样式写在外部样式表中,使代码可重用和维护。
4.2避免使用行内样式-避免在HTML元素上使用行内样式定义样式。
4.3样式规则的书写顺序-将样式规则按照从上到下的顺序书写,以保持结构清晰。
-先定义通用样式,再定义特定样式。
-按照样式的属性顺序书写,例如先写字体相关,再写颜色相关。
4.4使用CSS预处理器-使用CSS预处理器(如SASS或LESS)来提高CSS代码的可维护性和可扩展性。
5. JavaScript 规范5.1使用严格模式- 在 JavaScript 文件的开头添加 "use strict" 来启用严格模式。
5.2使用语义化的命名-使用有意义的变量和函数名,易于理解和维护。
5.3避免全局变量和函数-尽量避免使用全局变量和函数,以减少命名冲突和代码污染。
5.4缩进和空白符-使用合适的缩进和空白符来增加代码的可读性。
5.5注释规范-使用注释解释代码的意图和功能。
-在复杂的代码块前添加注释,帮助其他开发人员理解代码逻辑。
web前端开发_⽂件⽬录样式函数等命名规范页⾯的命名规则1. 统⼀⽤翻译的英⽂命名(推荐)2. 统⼀⽤拼⾳命名(拼⾳的简化也可)3. 如果⽂件名过长,企业要提前约定⼀份缩写的规范,如pro—product例如:⾸页—index产品列表—prolist产品详细页⾯—prodetail新闻列表—newslist新闻详细页⾯—newsdetail发展历史—history关于我们—aboutus联系我们—linkus,contactus信息反馈—feedback留⾔—leavewords图⽚命名规范图⽚的名称分为头尾两部分,⽤下划线隔开,头部表⽰此图⽚的⼤类性质,例如⼴告,标志,菜单,按钮等banner:放置在页⾯顶部的⼴告,装饰图案等长⽅形的图⽚logo:标志性的图⽚button:在页⾯上位置不固定,并且带有链接的⼩图⽚menu:在页⾯中某⼀位置连续出现,性质相同的链接栏⽬的图⽚pic:装饰⽤的图⽚例⼦:banner_sohu.gif, banner_sina.gifmenu_aboutus.gif,menu_job.giftitle_news.giflogo_police.gifpic_people.gifCSS样式命名外套 wrap ------------------⽤于最外层头部 header ----------------⽤于头部主要内容 main ------------⽤于主体内容(中部)左侧 main-left -------------左侧布局右侧 main-right -----------右侧布局导航条 nav -----------------⽹页菜单导航条内容 content ---------------⽤于⽹页中部主体底部 footer -----------------⽤于底部DIV+CSS命名参考表:CSS样式命名说明⽹页公共命名#wrapper页⾯外围控制整体布局宽度#container或#content容器,⽤于最外层#layout布局#head, #header页头部分#foot, #footer页脚部分#nav主导航#subnav⼆级导航#menu菜单#submenu⼦菜单#sideBar侧栏#sidebar_a, #sidebar_b左边栏或右边栏#main页⾯主体#tag标签#msg #message提⽰信息#tips⼩技巧#tips⼩技巧#vote投票#friendlink友情连接#title标题#summary摘要#loginbar登录条#searchInput搜索输⼊框#hot热门热点#search搜索#search_output搜索输出和搜索结果相似#searchBar搜索条#search_results搜索结果#copyright版权信息#branding商标#logo⽹站LOGO标志#siteinfo⽹站信息#siteinfoLegal法律声明#siteinfoCredits信誉#joinus加⼊我们#partner合作伙伴#service服务#regsiter注册arr/arrow箭头#guild指南#sitemap⽹站地图#list列表#homepage⾸页#subpage⼆级页⾯⼦页⾯#tool, #toolbar⼯具条#drop下拉#dorpmenu下拉菜单#status状态#scroll滚动.tab标签页.left .right .center居左、中、右.news新闻.download下载.banner⼴告条(顶部⼴告条)电⼦贸易相关.products产品.products_prices产品价格.products_description产品描述.products_review产品评论.editor_review编辑评论.news_release最新产品.publisher⽣产商.screenshot缩略图.faqs常见问题.keyword关键词.blog博客.forum论坛CSS⽂件命名说明master.css,style.css主要的module.css模块base.css基本共⽤layout.css布局,版⾯themes.css主题columns.css专栏font.css⽂字、字体forms.css表单mend.css补丁print.css打印js函数命名规范函数命名:统⼀使⽤动词或者动词+名词形式 ---- fnInit()对象⽅法命名使⽤fn+对象类名+动词+名词形式 fnAnimateDoRun()某事件响应函数命名⽅式为fn+触发事件对象名+事件名或者模块名 fnDivClick()附常⽤的动词列表:get 获取/set 设置, add 增加/remove 删除create 创建/destory 移除 start 启动/stop 停⽌open 打开/close 关闭, read 读取/write 写⼊load 载⼊/save 保存, create 创建/destroy 销毁begin 开始/end 结束, backup 备份/restore 恢复import 导⼊/export 导出, split 分割/merge 合并inject 注⼊/extract 提取, attach 附着/detach 脱离bind 绑定/separate 分离, view 查看/browse 浏览edit 编辑/modify 修改, select 选取/mark 标记copy 复制/paste 粘贴, undo 撤销/redo 重做insert 插⼊/delete 移除, add 加⼊/append 添加clean 清理/clear 清除, index 索引/sort 排序find 查找/search 搜索, increase 增加/decrease 减少play 播放/pause 暂停, launch 启动/run 运⾏compile 编译/execute 执⾏, debug 调试/trace 跟踪observe 观察/listen 监听, build 构建/publish 发布input 输⼊/output 输出, encode 编码/decode 解码encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩pack 打包/unpack 解包, parse 解析/emit ⽣成connect 连接/disconnect 断开, send 发送/receive 接收download 下载/upload 上传, refresh 刷新/synchronize 同步update 更新/revert 复原, lock 锁定/unlock 解锁check out 签出/check in 签⼊, submit 提交/commit 交付push 推/pull 拉, expand 展开/collapse 折叠begin 起始/end 结束, start 开始/finish 完成enter 进⼊/exit 退出, abort 放弃/quit 离开obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集常⽤的⽂件命名rc,source源代码,⽤src居多test,__tests__测试⽂件,也经常⽤__test__,facebook的测试框架jest默认的测试⽂件⽬录就是__test__ docs⽂档lib库⽂件,library的缩写dist⽤来放打包编译后的⽂件,应该是distribution的缩写build,scripts构建脚本utils,tools,helpers⼯具代码controllers,views,middlewares,modelsMVC对应的models,views,controllers,还有中间件middlewaresrouter路由server⽤来放服务端代码adapters适配器,适配器模式是⼀种很常⽤的设计模式legacy⼀般⽤来放兼容历史版本或兼容旧浏览器的代码config配置⽂件benchmarksbenchmarks测试,⼜叫基准测试或性能测试。
前端开发设计规范目录前端开发设计规范 (1)一、HTML 使用规范 (1)1.1、页面文件命名规范 (1)1.2、页面 head 部分书写规范 (1)1.3、HTML 元素开发规范 (2)1.3.1、HTML 元素书写规范 (2)1.3.2、HTML 元素命名规范 (3)二、WEB 页面开发规范 (4)2.1、错误跳转页面的处理 (4)2.2、提示信息的处理2.3、页面的返回2.4、提交前数据的判断验证 (4)2.5、删除操作 (5)2.6、页面中 java 代码的使用 (5)2.7、网站页面布局规范 (5)2.7.1、前台页面尺寸 (5)2.7.2、标准网页广告图标规格(参考) (6)2.7.3、页面字体 (6)2.7.4、字体颜色 (6)三、javaScript 开发规范 (7)3.1、javaScript 文件命名规范: (7)3.2、javaScript 开发规范 (7)3.2.1、javaScript 书写规范 (7)3.2.2、javaScript 命名规范 (8)四、css 样式规范 (9)4.1、css 样式文件命名规范 (9)4.1.1、通用样式文件命名规范: (9)4.1.2、业务类样式文件命名规范 (10)4.1.3、css 样式文件命名须知 (10)4.2、 css 样式文件存放目录规范 (10)4.3、css 样式定义规范 (10)4.3.1、css 样式内容顶部注释规范 (10)4.3.2、css 样式内容注释规范 (11)4.3.3、css 样式定义规范 (11)4.3.4、css 样式常用 id 的命名 (12)4.3.5、css 样式常用 class 的命名 (13)4.4、 css 样式书写规范 (14)4.4.1、 css 样式排版规范 (14)4.4.2、css 样式书写风格规范 (14)4.4.3、css 样式属性定义顺序规范 (15)4.4.4、css 样式其他规范 (15)4.4.5、css 样式 Hack 的使用 (16)4.4.6、字体定义规范 (17)4.4.7、css 样式检测 (17)4.4.8、注意事项 (17)4.5、 css 样式引用规范 (18)4.6、媒体内容命名规范 (18)五、项目文件存放规范 (18)六、前端开发规则 (19)…,文件命名下划线不HTML 使用规范1.1、页面文件命名规范命名格式为:项目名缩写 —所属功能_所属功能子项—….jsp/html 能超过三个,命名尽量使用简短的能明确表明文件用途的英文或者英文简写。
web前端项⽬规范
项⽬⽬录规范
.
├─ css
├─ component
├─ img
├─ js
├─ page
├─ test
├─ package.json
├─ README.md
css
存放样式类⽂件,且所有 CSS ⽂件编写应当遵循
component
存放项⽬组件
img
存放项⽬的图⽚资源,应当按模块分⽂件夹存放
js
存放项⽬的 JS 源代码,且所有 JS ⽂件编写应当遵循
page
存放项⽬的 HTML 页⾯代码⽂件,且所有 HTML ⽂件编写应当遵循
备注:单页应⽤可以例外
test
所有测试相关⽂件应当放在此⽬录
package.json
每个项⽬都必须包含⼀个package.json⽂件,在使⽤npm init新建项⽬时⾃动⽣成,此⽂件中应当包含项⽬的基本信息、项⽬的依赖以及项⽬的相关执⾏命令等
README.md
每个项⽬都必须包含⼀个README.md⽂件,此⽂件中应当描述此项⽬的功能、特点、API 等信息
项⽬命名规范
⽂件及⽬录命名全部采⽤⼩写⽅式,以下划线分隔
⽬录有复数结构时,始终采⽤单数命名法
my_project_name/img/user_order.png。
前端开发规范文档引言本文档旨在定义一套前端开发规范,规范涵盖了HTML、CSS和JavaScript的编码规范、文件组织规范以及注释规范等内容。
在项目中,所有前端开发人员必须遵守本文档中的规范,并且在开发过程中互相审查和纠正代码中的违规行为,确保项目的代码质量和可维护性。
一、HTML规范2.使用4个空格作为缩进,而不是制表符或者2个空格。
5.遵循嵌套顺序:结构、表现、行为。
二、CSS规范1.使用4个空格作为缩进,而不是制表符或者2个空格。
2.使用有意义的类名和ID,避免使用无意义的名称。
3.使用层级结构书写选择器,不要过分依赖后代选择器。
4. 使用-来连接多个单词的类名,例如.nav-bar。
5.避免嵌套选择器的层级过多,不超过3层。
6.选择器和属性之间使用空格隔开。
7.属性值为0时不需要单位。
8. 使用!important应该极少使用,并在必要的情况下给出充分的解释。
三、JavaScript规范1.使用4个空格作为缩进,而不是制表符或者2个空格。
2.使用驼峰命名法命名变量、函数和对象。
3. 使用let或const来声明变量,避免使用var。
4.在比较操作符中使用严格相等===和!==。
5.使用模板字符串来拼接字符串。
6.缩写应该避免,命名要具有描述性。
7.避免使用全局变量,尽量将变量的作用域限制在需要的范围内。
四、文件组织规范1. 将不同的文件放在不同的目录下,例如:css/、js/、img/。
2.使用有意义的文件名,避免使用无意义的名称。
3.遵循模块化的原则,将功能相关的代码组织到一个模块中。
4.使用版本控制系统来管理代码的版本和变更。
五、注释规范1.在代码的重要部分和复杂部分添加注释,解释代码的用途和实现方式。
2.使用单行注释//来注释一行代码,使用多行注释/**/来注释多行代码。
3.注释应该与代码对齐,并且清晰明了。
4.注释的语言要简洁明了,不要废话。
结语本文档规范了前端开发的一系列规则和标准,旨在提高团队的协作效率和项目的代码质量。
Web前端开发规范手册 一、规范目的 1.1 概述1 二、文件规范
2.1文件命名规则...1 2.2文件存放位置2 2.3css书写规范3 2.4html书写规范7 2.5JavaScript书写规范11 2.6图片规范12 2.7注释规范13 2.8css浏览器兼容13 一、规范目的 1.1 概述 为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档.
二、文件规范
2.1文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义,二是当我们在文件夹中使用“按名称排例”的命令时,同一种大类的文件能够排列在一起,以便我们查找、修改、替换、计算负载量等等操作。 a.HTML的命名原则 引文件统一使用index.htmindex.htmlindex.asp文件名(小写) 各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。例如: 关于我们\aboutus 信息反馈\feedback 产品\product 如果栏目名称多而复杂并不好以英文单词命名,则统一使用该栏目名称拼音或拼音的首字母表示; 每一个目录中应该包含一个缺省的html文件,文件名统一用index.htmindex.htmlindex.asp;
b.图片的命名原则 图片的名称分为头尾两部分,用下划线隔开,头部分表示此图片的大类性质 例如:广告、标志、菜单、按钮等等。 放置在页面顶部的广告、装饰图案等长方形的图片取名:banner 标志性的图片取名为:logo 在页面上位置不固定并且带有链接的小图片我们取名为button 在页面上某一个位置连续出现,性质相同的链接栏目的图片我们取名:menu 装饰用的照片我们取名:pic 不带链接表示标题的图片我们取名:title 范例:banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news.giflogo_police.giflogo_national.gifpic_people.jpg 鼠标感应效果图片命名规范为"图片名+_+on/off"。 例如:menu1_on.gifmenu1_off.gif
c.javascript的命名原则 例如:广告条的javascript文件名为ad.js弹出窗口的javascript文件名为pop.js
d.动态语言文件命名原则 以性质_描述,描述可以有多个单词,用“_”隔开,性质一般是该页面得概要。 范例:register_form.aspregister_post.asptopic_lock.asp
2.2文件存放位置规范
_Root cn 存放中文HTML文件 en 存放英文HTML文件 flash 存放Flash文件 images 存放图片文件 imagestudio 存放PSD源文件 flashstudio 存放flash源文件 inc 存放include文件 library 存放DW库文件 media 存放多媒体文件 project 存放工程项目资料 temp 存放客户原始资料 js 存放JavaScript脚本 css 存放CSS文件 2.3CSS书写规范
基本原则: CSS样式可细分为3类:自定义样式、重新定义HTML样式、链接状态样式。 1. 样式为设计师自定义的新CSS样式,影响被使用本样式的区域,用于完成网页中局部的样式设定。样式名“.”+“相应样式效果描述的单词或缩写”例:“.shadow” 2. 文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例:“.no12”、“.no12-24” 2.义HTML样式为设计师重新定义已有的HTML标签样式,影响全部的被设定标签样式,用于统一网页中某一标签的样式定义。样式名“HTML标签”例:hr{border:1pxdotted#333333} 3.态样式为设计师对链接不同状态设定特殊样式,影响被使用本样式区域中的链接。 该样式写法有2种:a.nav:linknav.a:link第一种只能修饰标签中;第二种可以修饰所有包含有标签的其他标签。 页面内的样式加载必须用链接方式 注意细则: 1. 协作开发及分工:i会根据各个模块,同时根据页面相似程序,事先写好大体框架文件,分配给前端人员实现内部结构&表现&行为;共用css文件base.css由i书写,协作开发过程中,每个页面请务必都要引入,此文件包含reset及头部底部样式,此文件不可随意修改; 2. class与id的使用:id是唯一的并是父级的,class是可以重复的并是子级的,所以id仅使用在大的模块上,class可用在重复使用率高及子级中;id原则上都是由我分发框架文件时命名的,为JavaScript预留钩子的除外; 3. 为JavaScript预留钩子的命名,请以js_起始,比如:js_hide,js_show; 4. class与id命名:大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&_来组合命名,如i_comment,fontred,width200;避免使用中文拼音,尽量使用简易的单词组合;总之,命名要语义化,简明化. 5. 规避class与id命名(此条重要,若有不明白请及时与i沟通): a,通过从属写法规避,示例见d; b,取父级元素id/class命名部分命名,示例见d; c,重复使用率高的命名,请以自己代号加下划线起始,比如i_clear; d,a,b两条,适用于在2中已建好框架的页面,如,要在2中已建好框架的页面代码中加入新的div元素, 按a命名法则:..., 样式写法:#mainnav.firstnav{.......} 按b命名法则:..., 样式写法:.main_firstnav{.......} 6. css属性书写顺序,建议遵循布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.属性列举:布局定位属性主要包括:margin、padding、float(包括clear)、position(相应的top,right,bottom,left)、display、visibility、overflow等;自身属性主要包括:width&height&background&border;文本属性主要包括:font、color、text-align、text-decoration、text-indent等;其他属性包括:list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序)、zoom等.我所列出的这些属性只是最常用到的,并不代表全部; 7. 书写代码前,考虑并提高样式重复使用率; 8. 充分利用html自身属性及样式继承原理减少代码量,比如: 这儿是标题列表2010-09-15 定义ul.listli{position:relative}ul.listlispan{position:absolute;right:0} 即可实现日期居右显示 9. 样式表中中文字体名,请务必转码成unicode码,以避免编码错误时乱码; 10. 背景图片请尽可能使用sprite技术,减小http请求,考虑到多人协作开发,sprite按模块制作; 11. 使用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;}tableth,tabletd{padding:0;},base.css文件中我会初始化表格样式) 12. 杜绝使用兼容ie8; 13. 用png图片做图片时,要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果,请为ie6单独定义背景: src=’img/bg.png’); 14. 避免兼容性属性的使用,比如text-shadow||css3的相关属性; 15. 减少使用影响性能的属性,比如position:absolute||float; 16. 必须为大区块样式添加注释,小区块适量注释; 17. 代码缩进与格式:建议单行书写,可根据自身习惯,后期优化i会统一处理; 命名规则:
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper