web前端开发标准的意义
- 进步团队的合作能力
- 进步代码的复用利用率
- 能够写出品质更高，效率更好的代码
- 为前期保护提供更好的反对
一、HTML标准
- 标签必须非法且闭合、嵌套正确，防止应用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标准
- 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
三、Javascript标准
1、Javascript引入形式
-
个别状况应用内部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.而且这种形式在开发过程中会导致产生很多的冗余代码
2、Javascript代码编写
- 目前只在应用了
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?'再售':'已售'):'未售') // 再多就不要用三元运算符！
3、Javascript框架以及插件
必须把握jQuery和Vue；- 工作中jQuery个别用在保护老我的项目，新我的项目个别都采纳Vue。其余框架稍作理解，遇到了去查文档。
- 挪动端：Vant
- PC端： Element
- 轮播图：[swiper]
- 滚动插件：iScroll
- 将罕用的性能封装在util.js中，大家独特欠缺；不便当前应用。
四、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 用在一起，同样用计算属性过滤后渲染；
<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") } }
发表回复