web前端开发规范的意义

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

一、HTML规范

标签必须合法且闭合、嵌套正确，避免使用z-index设置层级；

语义化标签或类名，类名需2个单词用下划线或短横线，示例：

结构区块必须设置定位position: relative/ absolute/ fixed;也就是明确定位父级，以便于标签的正确嵌套及层次布局；
尽量避免多余的父节点；很多时候，需要通过迭代和重构来使HTML变得更少；删除无意义的空标签；

二、CSS规范

css头部统一加上@charset声明，如下： @charset "utf-8";
禁止使用ID选择器来定义元素样式
避免使用!important和z-index。调整结构和引用顺序实现
禁止使用层级过深的选择器，最多3级。eg: ul.pro_list > li > p

除非是样式reset需要，禁止对纯元素选择器设置特定样式，避免样式污染

PC端和移动端通用reset示例

  body,html{width:100%;min-height:100%;/*移动端*/-webkit-user-select:none;user-select:none/*
  禁止选中文本（如无文本选中需求，此为必选项） */}
  body{background-color:#fff;color:#333;font-size:16px;font-family:PingFangSC-Regular}
  a,body,button,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,img,input,li,ol,p,select,table,td,textarea,th,tr,ul{box-sizing:border-box;margin:0;padding:0;border:0}
  button,input,select,textarea{outline:0;font-size:100%}
  h1,h2,h3,h4,h5,h6{font-size:100%} 
  li,ol,ul{list-style:none}
  a{cursor:pointer} 
  a,a:hover{text-decoration:none}
  ::-webkit-input-placeholder{color:#B0B0B0}
  :-moz-placeholder{color:#B0B0B0}
  ::-moz-placeholder{color:#B0B0B0}
  :-ms-input-placeholder{color:#B0B0B0}

媒体查询顺序由大到小

  @media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {} 
  @media only screen and (max-width: 960px), only screen and (max-device-width:960px) { }

缩进使用soft tab（4个空格）
分号每个属性声明末尾都要加分号。
引号最外层统一使用双引号；url的内容要用引号；属性选择器中的属性值需要引号。

空格

以下几种情况不需要空格：

属性名后
多个规则的分隔符','前
!important '!'后
属性值中'('后和')'前
行末不要有多余的空格

以下几种情况需要空格：

属性值前
选择器'>', '+', '~'前后
'{'前
!important '!'前
@else 前后
属性值中的','后
注释'/*'后和'*/'前

CSS属性的声明顺序与性能无关，但是为了易于阅读统一规范按如下顺序

.declaration-order {
    /* 定位 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    float: right;
    /* 盒模型 */
    display: block;
    width: 100px;
    height: 100px;
    /* 外观 */
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    background-color: #f5f5f5;
    /* 排版 */
    color: #333;
    text-align: center;
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    /*透明度*/
    opacity: 1;
}

采用flex布局
不要使用内样式，特定情况（动态样式）下使用行内样式，示例
```
  
```
媒体标签（img,video,audio）的样式不要用属性定义，请使用类名设置
```
 
```
CSS框架：阿里图标库、 css3 动画库、 Sass和Compass

三、Javascript规范

1、Javascript引入方式

一般情况使用外部js：统一使用
优点：
1.页面代码跟js代码实现有效分离，降低耦合度
2.便于代码的维护和扩展
3.有利于代码的复用
内部js: 在直接在页面的标签内写js代码，vue项目多用此方式
优点：内部js代码较为集中，与页面结构的实现代码耦合度较低，比较便于维护
缺点：js代码仅限于当前页面的使用，代码无法被多个页面重复使用，导致代码冗余度较高
行内js: 直接嵌套在html的语句
开发中不推荐这种方式
1.因为这种方式跟页面结构代码耦合性太强了，后期维护很不方便，
2.而且这种方式在开发过程中会导致产生很多的冗余代码

2、Javascript代码编写

目前只在使用了webpack等打包工具的时候才能用ES6语法（需要垫片babel），所以一般项目还是采用ES5。
一条语句通常以分号作为结束符。
变量必须先声明再使用，即在每个作用域开始前声明这些变量。

函数声明使用表达式方式

// bad
  const fn= function () {
  };
// good
  function fn() {
  }

除了三目运算，if,else等禁止简写

 console.log(name);
 // 不推荐的书写
 if (true)
     alert(name);
 console.log(name);
 // 正确的书写
 if (true) {
     alert(name);
 }

使用三元运算符，但不要滥用

(type==1?(agagin==1?'再售':'已售'):'未售')
 // 再多就不要用三元运算符！

3、Javascript框架以及插件

必须掌握jQuery和Vue；
工作中jQuery一般用在维护老项目，新项目一般都采用Vue。避免混合使用
移动端：Vant
PC端： Element
轮播图：swiper
滚动插件：iScroll
将常用的功能封装在util.js中，大家共同完善；方便以后使用。

四、Vue相关

Vue核心思想是数据驱动和组件化

尽量避免标签属性上js运算，变量的引入多用计算属性，示例

:text="
userInfo.userinfo.phone
 ? userInfo.userinfo.nickname +
 userInfo.userinfo.phone.slice(7, 11)
 : userInfo.userinfo.nickname
"

改为

:text="user_name“
computed: {
user_name(){
 return this.userInfo.userinfo.phone  ? this.userInfo.userinfo.nickname +  this.userInfo.userinfo.phone.slice(7, 11) : this.userInfo.userinfo.nickname
}
}

避免 v-if 和 v-for 用在一起，同样用计算属性过滤后渲染；

  
   
       {{item.code}}

改为


 
     {{item.code}}
 

 computed: {
   menus() { 
       return this.menuLists.filter((item) => { 
           return item.isShow && item.code != 'chat' && item.code != 'qev'
       })
   }
 }

变量声明注意数据格式，代码优化

let menuNewArray = [];//本以为是个数组，其实是个布尔值
   var menuArray = enMenus.filter(function (val) {
     if (res.play_mode == 2) {
       menuNewArray =
       val.isShow ||
       val.code == "qev" ||
       val.code == "doc" || 
       val.code == "image_text" ||
       val.code == "wonderful_moment" ||
       val.code == "qa"
     } else if (res.play_mode == 1) {
       menuNewArray =
         val.isShow ||
         (val.code != "chat" && val.code != "qev") ||
         val.code == "doc";
     }
     if (val.code == "chat") {
       that.verticalChatInfo = val;//本以为是个对象
     }
     return menuNewArray;
   });

改为

let codes2 = [ "qev", "doc",  "image_text",  "wonderful_moment", "qa"]
let codes1=  ["chat", "qev","doc"]
let codes = [];
if (res.play_mode == 2) {  codes = codes2 }
if (res.play_mode == 1) {  codes = codes1 }
this.enMenus = enMenus.filter( (val)=> {  
 return val.isShow || codes.includes(val.code) ;
});  
this.verticalChatInfo = enMenus.some((val)=>{ 
 return val.code == "chat"
})

Vue项目中不要操作DOM，特定情况使用ref

 if (document.getElementById("operation_box") != null) {
               var width;
               if (window.innerWidth > 750) {
                 width = 750;
               } else {
                 width = window.innerWidth;
               }
               if (
                 !that.isShowEnterpriseCard &&
                 !that.enterpriseInfo.bottom_tech_support
               ) {
                 var  v =
                   window.innerHeight - (width / 750) * 483 - 1;
                 document.getElementById("operation_box").style.height =
                   box_height + "px";
               } else if (
                 !that.isShowEnterpriseCard &&
                 that.enterpriseInfo.bottom_tech_support
               ) {
                 var box_height =
                   window.innerHeight - (width / 750) * 558 - 1;
                 document.getElementById("operation_box").style.height =
                   box_height + "px";
               } else if (
                 that.isShowEnterpriseCard &&
                 !that.enterpriseInfo.bottom_tech_support
               ) {
                 var box_height =
                   window.innerHeight - (width / 750) * 523 - 1;
                 document.getElementById("operation_box").style.height =
                   box_height + "px";
               } else if (
                 that.isShowEnterpriseCard &&
                 that.enterpriseInfo.bottom_tech_support
               ) {
                 var box_height =
                   window.innerHeight - (width / 750) * 598 - 1;
                 document.getElementById("operation_box").style.height =
                   box_height + "px";
               }
             }

改为计算属性


//js
computed: {
  send_out_box_height(){//输入栏的高度
  let h = 0.85;
  // 是否有引用
  if(this.isHasRefer){
    h+=0.55
  }
  //没有有技术支持
  if(!this.enterpriseInfo.bottom_tech_support){
    h+=0.35;
    if(this.is_big_screen){
      h+=0.2
    }
  }
  return h
},
box_height(){
  let clientWidth = document.documentElement.clientWidth<750?document.documentElement.clientWidth:750;
  let clientHeight = document.documentElement.clientHeight;
  let ch  = (clientHeight*750)/(clientWidth*100);
  let h = 4.22;
  // 是否有直播企业信息
  if(this.isShowEnterpriseCard){
      h+=1
  }
  //是否有技术支持
  if(this.enterpriseInfo.bottom_tech_support){
      h+=0.75;
  }
  if(this.tabCode !== 'chat'){
    return (ch-h).toFixed(2)
  }

  //有输入栏send_out_box
  if(!this.changeColorFlag){
    h+=this.send_out_box_height
  }
  return (ch-h).toFixed(2)
},
list_height(){
  let h = this.box_height-0.8;
  return h.toFixed(2)
}  
}

图片引用放入js数据中

改为


//js 
computed: {
    icon_barrage(){ 
         return this.isBarrage?require("../../assets/image/barrage_open.png"):require("../../assets/image/barrage_close.png")
       }  
    }

待完善...

前端规范