Web前端开发标准规范

最新推荐文章于 2024-05-14 06:29:11 发布

weixin_43298663

最新推荐文章于 2024-05-14 06:29:11 发布

阅读量1.5k

点赞数

文章标签：前端 javascript 开发语言

原文链接：https://www.fgba.net/forum-56.html

版权

提高团队的协作能力
提高代码的复用利用率
可以写出质量更高，效率更好的代码
为后期维护提供更好的支持

一、命名规则

命名使用英文语义化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！
项目、目录、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">
 <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">
 <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="页面关键字"/>
</head>
<body>
</body>
</html>

2、 HTML标签

标签必须合法且闭合、嵌套正确，标签名需小写

标签语法无错误，需要符合语义化

标签的自定义属性以data-开头，如：

除非有特定的功能、组件要求等，禁止随意使用id来定义元素样式

weixin_43298663

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发标准规范

提高团队的协作能力提高代码的复用利用率可以写出质量更高，效率更好的代码为后期维护提供更好的支持一、命名规则命名使用英文语义化，禁止使用特殊字符，禁止使用拼音，禁止使用中英文混合！项目、目录、html/css/js等文件命名全部采用小写方式，以下划线分隔。eg：my_project_name html/css/js文件名一一对应参考微信小程序.eg: login.html、login.css、login.js class、图片、视频、音频采用小写方式，以下划线或中划线分隔；eg：b
复制链接

扫一扫