Web前端开发标准规范

缺乏、安全感 2022-03-18 09:16 302阅读 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();
 *  变量和函数命名，不要担心长度，一定要语义化合乎逻辑。

## 二、注释 ##

*  页面头部需要添加制作时间等信息。

*  功能模块，请在模块之间加入注释，中英文不做要求：

... 
     
    
    <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="页面关键字"/>
        
        <link rel="stylesheet" href="demo.css">
        
        <style>
    
        </style>
    </head>
    <body>
    
    
    <script src="demo.js"></script>
    
    
    <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