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： product,product_detail
- 常量采纳全大写体式格局， 以下划线分开；eg：MAX_COUNT
- 函数名采纳驼峰定名，以动词最先。 getName(), 返回范例是布尔范例，平常以is开首，eg: isEnable();
- 变量和函数定名，不要忧郁长度，一定要语义化合乎逻辑。eg: saveImageToPhotosAlbum()
- 变量和函数名不能以数字最先，不能运用保留字；jQuery对象以’
$‘标记开首，私有变量以’_‘开首。
二、解释
- 页面头部须要增加制造时刻等信息。
<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">
<!-- 月影 2019-02-19 -->
<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">
<!-- 月影 2019-02-19 -->
<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="页面关键字"/>
<!-- External CSS -->
<link rel="stylesheet" href="demo.css">
<!-- In-document CSS -->
<style>
</style>
</head>
<body>
<!-- External JS -->
<script src="demo.js"></script>
<!-- In-document JS -->
<script>
</script>
</body>
</html>2、HTML标签
- 标签必需正当且闭合、嵌套准确，标署名需小写，
不要运用HTML5已烧毁的标签。eg：b、 em - 自定义标签须要相符语义化，
必需小写 - 标签的自定义属性以data-开首，背面跟
小写单词，多单词运用下划线衔接如：<a data-goods_num=’18’ href=”javascript:;” ></a> - 缩进运用Tab键不要运用空格键，webstorm中运用快捷键command+option+L（Ctrl+Alt+L）对齐
- 引入CSS 和 JavaScript 文件时平常不须要指定 type 属性，由于 text/css 和 text/javascript 分别是它们的默许值。css放在上面head中，JavaScript放在body下面紧临</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。
- 在编写HTML代码时，须要只管防止过剩的父节点；许多时刻，须要经由历程迭代和重构来使HTML变得更少。删除无意义的空标签，不要用标署名来设置款式
三、CSS范例
1、CSS引入体式格局
平常状况运用外部款式表：一致运用link标签，罕用@import（原生import有加载机能题目），sass、less、vue.js等文件运用import敕令除外（由于终究前端构建东西会将引入文件编译成一个css文件）。
<link rel="stylesheet" href="xxx.css">个别状况运用内部款式表：页面异常简朴且款式异常少的零丁页面，如：纯图片海报页面，纯文字协定页面
<style> ... </style>特别状况才运用行内款式：如：js动态猎取转动高度：
style="height:{{scroll_height}}px;"
2、CSS代码作风
- css头部一致加上@charset声明，以下： @charset “utf-8”;
制止运用ID选择器来定义元素款式-
制止运用层级过深的选择器，最多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规划
- 项目上线前先增加兼容性前缀 Autoprefixer，然后紧缩代码
2、CSS框架
四、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); console.log(name) // 准确的誊写 if (true) { alert(name); }运用三元运算符，但不要滥用(type==1?(agagin==1?'再售':'已售'):'未售') // 再多就不要用三元运算符！
