关于前端:前端规范

进步团队的合作能力
进步代码的复用利用率
能够写出品质更高，效率更好的代码
为前期保护提供更好的反对

标签必须非法且闭合、嵌套正确，防止应用 z -index 设置层级；

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

  <div class="nav-wrap"> 导航 </div>
  <div class="header-wrap">
      <div class="video-box">
          <video class="video-obj" src="myvideo.mp4"> </video>
          <div class="play-btn"></div> 
      </div> 
  </div>
  <div class="container-wrap">
              <!-- 内容区 -->
              <div class="aside-left"> 左侧边栏 </div>
              <div class="main-wrap"> 次要内容区 </div>
              <div class="aside-right"> 右侧边栏 </div>
  </div>
  <div class="footer-wrap"> 底部 </div> 
  <div class="popup-wrap"> 弹出层 </div>

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

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 布局
不要应用内款式，特定状况（动静款式）下应用行内款式，示例
```
  <div :style="{height: box_height +'rem'}"></div>
```
媒体标签（img,video,audio）的款式不要用属性定义，请应用类名设置
```
 <img :src="resourcesJson.image" width="100%" height="100%" alt="" />
```
CSS 框架：阿里图标库、css3 动画库、Sass 和 Compass

个别状况应用内部 js：对立应用 <script> 标签，少用 @import（原生 import 有加载性能问题），应用 webpack 等打包工具的我的项目应用 import 命令除外。js 在 body 底部紧贴 </body> 援用，先引框架 js 的再引工具类 js 而后公有 js 的最初写外部的 js。如下
```
  <script src="./plugins/layui/layui.js"></script>
  <script src="./plugins/vue/vue.min.js"></script>
  <script src="./plugins/js/util.js"></script>
  <script src="./js/index.js"></script>
  <script> ... </script>
```
长处：
1. 页面代码跟 js 代码实现无效拆散，升高耦合度
2. 便于代码的保护和扩大
3. 有利于代码的复用
外部 js: 在间接在页面的 <script></script> 标签内写 js 代码，vue 我的项目多用此形式
```
<script>
    layui.use('console', layui.factory('console'));
</script>
```
长处：外部 js 代码较为集中，与页面构造的实现代码耦合度较低，比拟便于保护
毛病：js 代码仅限于以后页面的应用，代码无奈被多个页面重复使用，导致代码冗余度较高
行内 js: 间接嵌套在 html 的语句
```
<input type="button" onclick="alert(' 行内引入 ')" value="button" name="button">
```
开发中不举荐这种形式
1. 因为这种形式跟页面构造代码耦合性太强了，前期保护很不不便，
2. 而且这种形式在开发过程中会导致产生很多的冗余代码

目前只在应用了webpack 等打包工具的时候能力用 ES6 语法，所以个别我的项目还是采纳 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?'再售':'已售'):'未售')
 // 再多就不要用三元运算符！

必须把握 jQuery 和 Vue；
工作中 jQuery 个别用在保护老我的项目，新我的项目个别都采纳 Vue。其余框架稍作理解，遇到了去查文档。
挪动端：Vant
PC 端：Element
轮播图：[swiper]
滚动插件：iScroll
将罕用的性能封装在 util.js 中，大家独特欠缺；不便当前应用。

尽量避免标签属性上 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 用在一起，同样用计算属性过滤后渲染；

  <ul>
   <li class="more_list" v-for="(item, index) in menuLists" :key="index" v-show="item.isShow"
       v-if="item.code !='chat'&& item.code !='qev'"@click="recordTabFn(item)">
       {{item.code}}
   </li>
  </ul>

改为

<ul>
 <li class="more_list" v-for="(item, index) in menus" :key="index" @click="recordTabFn(item)">
     {{item.code}}
 </li>
</ul>
 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";
               }
             }

改为计算属性

<div :style="{height: box_height +'rem'}"></div>
//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 数据中

 <img
             v-if="isBarrage"
             src="../../assets/image/barrage_open.png"
             alt=""
           />
           <img v-else src="../../assets/image/barrage_close.png" alt="" />

改为

<img class="icon-barrage" :src="icon_barrage"  alt=""  />
//js 
computed: {icon_barrage(){return this.isBarrage?require("../../assets/image/barrage_open.png"):require("../../assets/image/barrage_close.png")
       }  
    }

关于前端:前端规范

web 前端开发标准的意义

一、HTML 标准

二、CSS 标准

三、Javascript 标准

1、Javascript 引入形式

2、Javascript 代码编写

3、Javascript 框架以及插件

四、Vue 相干

Just My Socks（注册教程内含优惠码）

关于前端:前端规范

web 前端开发标准的意义

一、HTML 标准

二、CSS 标准

三、Javascript 标准

1、Javascript 引入形式

2、Javascript 代码编写

3、Javascript 框架以及插件

四、Vue 相干

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）