Web前端开发标准规范 缺乏、安全感 2022-03-18 09:16 237阅读 0赞 ## web前端开发规范的意义 ## * 提高团队的协作能力 * 提高代码的复用利用率 * 可以写出质量更高,效率更好的代码 * 为后期维护提供更好的支持 ## 一、命名规则 ## * 命名使用英文语义化,`禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合!` * 项目、目录、html/css/js等文件命名全部采用小写方式, 以下划线分隔。eg:my\_project\_name * html/css/js文件名一一对应参考微信小程序.eg: login.html、login.css、login.js * class、图片、视频、音频采用小写方式,以下划线或中划线分隔;eg:btn-play或btn\_play * id可采用驼峰命名;eg:play或playGame * 变量名采用小写方式, 以下划线分隔;应为名词,eg: car,person * 函数名采用驼峰命名,以动词开始。 getName(), 返回类型是布尔类型,一般以is开头,eg: isEnable(); * 变量和函数命名,不要担心长度,一定要语义化合乎逻辑。 ## 二、注释 ## * 页面头部需要添加制作时间等信息。 <head> <title>页面名称</title> <!-- 月影 2019-02-19 --> </head> * 功能模块,请在模块之间加入注释,中英文不做要求: ... <!-- 活动规则 开始 --> <div class="rules-wrapper"> <div class="rules-title">活动规则</div> <div class="rules-list"> <div class="rules-item" v-for='item,index in rules_list'> <div class="rules-num">{ {index+1}}</div> <div class="rules-text">{ {item}}</div> </div> </div> </div> <!-- 活动规则 结束 --> ... /* rules start*/ .rules-wrapper{...} .rules-title{...} .rules-list{...} .rules-item{...} .rules-num{...} .rules-text{...} /* rules end*/ * 自定义函数。请注明函数的调用方式,包括函数的用途、参数类型等。 /* JQ公告滚动 封装函数 * 参数说明 * obj : 动画的节点,本例中是ul * top : 动画的高度,本例中是-35px;注意向上滚动是负数 * time : 动画的速度,即完成动画所用时间,本例中是500毫秒,即marginTop从0到-35px耗时500毫秒 * function : 回调函数,每次动画完成,marginTop归零,并把此时第一条信息添加到列表最后; * */ function noticeUp(obj,top,time) { $(obj).animate({ marginTop: top }, time, function () { $(this).css({marginTop: "0"}).find(":first").appendTo(this); }) } $(function () { // 调用 公告滚动函数 setInterval("noticeUp('.notice ul','-35px',500)", 2000); }); ## 三、HTML规范 ## ### 1、页面头部 ### * 文档类型统一使用html5的doctype: * lang属性统一使用en,特殊场景特殊处理 * 字符编码统一指定为'UTF-8' * 页面标题(Title): 页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan,28个汉字以内 * 页面关键字(Keywords): Keywords为产品名、专题名、专题相关名词,之间用英文半角逗号隔开 * 页面描述(Description) :不超过150个字符,描述内容要和页面内容相关。 * IE兼容模式 <meta http-equiv="X-UA-Compatible" content="IE=Edge"> * 移动端禁止缩放 PC端头部示范: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 月影 2019-02-19 --> <title>抓金角银角大王每周末放送装备 - 地下城与勇士官方网站 - 腾讯游戏</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="英雄联盟,lol,lol新手礼包,lol攻略,lol视频,lol视频攻略,英雄资料,英雄联盟战争学院,明星解说视频,101战争学院,英雄,攻略,WCG,点亮图标,赛事"/> <meta name="description" content="英雄联盟官方网站,海量风格各异的英雄,丰富、便捷的物品合成系统,游戏内置的匹配、排行和竞技系统,独创的“召唤师”系统及技能、符文、天赋等系统组合,必将带你进入一个崭新而又丰富多彩的游戏世界。"/> </head> <body> </body> </html> 移动端头部示范: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 月影 2019-02-19 --> <title>页面名称-产品中文全称-官方网站-腾讯游戏-产品slogan</title> <!-- 禁止缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <!-- 为了防止页面数字被识别为电话号码,可根据实际需要添加: --> <meta name="format-detection" content="telephone=no"> <!-- 让添加到主屏幕的网页再次打开时全屏展示,可添加: 删除默认的苹果工具栏和菜单栏 --> <meta content="yes" name="mobile-web-app-capable"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta name="Description" content="页面的描述内容"/> <meta name="Keywords" content="页面关键字"/> <!-- External CSS --> <link rel="stylesheet" href="demo.css"> <!-- In-document CSS --> <style> </style> </head> <body> <!-- External JS --> <script src="demo.js"></script> <!-- In-document JS --> <script> </script> </body> </html> ### 2、HTML标签 ### * 标签必须合法且闭合、嵌套正确,标签名需小写 * 自定义标签需要符合语义化,`必须小写` * 标签的自定义属性以data-开头,后面跟`小写单词,多单词使用下划线连接`如:<a href="javascript:;" data-goods\_num='18'></a> * 缩进使用Tab键不要使用空格键,webstorm中使用快捷键command+option+L(Ctrl+Alt+L)对齐 * 引入CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值。样式表在head中,JavaScript在body中 * 标签中属性必须添加双引号(非单引号),应该按照特定的顺序出现以保证易读性;属性顺序 > class > id > name > data-\* > src, for, type, href, value , max-length, max, min, pattern > placeholder, title, alt > aria-\*, role > required, readonly, disabled > `class是为高可复用组件设计的,所以应处在第一位;` > `id更加具体且应该尽量少使用,所以将它放在第二位。` * boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;boolean属性的存在表示取值为true,不存在则表示取值为false。 参考 [Code Guide by @AlloyTeam][Code Guide by _AlloyTeam] [页面前端规范][Link 1] 来源:[https://segmentfault.com/a/1190000018194697][https_segmentfault.com_a_1190000018194697] [Code Guide by _AlloyTeam]: http://alloyteam.github.io/CodeGuide/ [Link 1]: https://tgideas.qq.com/doc/frontend/spec/common/ [https_segmentfault.com_a_1190000018194697]: https://segmentfault.com/a/1190000018194697
还没有评论,来说两句吧...