mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
589 lines
15 KiB
HTML
589 lines
15 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||
<!-- saved from url=(0071)file:///C:/Users/i-wanglihua/AppData/Local/Temp/MarkdownPadPreview.html -->
|
||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<title>前端代码规范</title>
|
||
|
||
<style type="text/css">
|
||
/* GitHub stylesheet for MarkdownPad (http://markdownpad.com) */
|
||
/* Author: Nicolas Hery - http://nicolashery.com */
|
||
/* Version: b13fe65ca28d2e568c6ed5d7f06581183df8f2ff */
|
||
/* Source: https://github.com/nicolahery/markdownpad-github */
|
||
|
||
/* RESET
|
||
=============================================================================*/
|
||
|
||
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
}
|
||
|
||
/* BODY
|
||
=============================================================================*/
|
||
|
||
body {
|
||
font-family: Helvetica, arial, freesans, clean, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: #333;
|
||
background-color: #fff;
|
||
padding: 20px;
|
||
max-width: 960px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
body>*:first-child {
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
body>*:last-child {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
/* BLOCKS
|
||
=============================================================================*/
|
||
|
||
p, blockquote, ul, ol, dl, table, pre {
|
||
margin: 15px 0;
|
||
}
|
||
|
||
/* HEADERS
|
||
=============================================================================*/
|
||
|
||
h1, h2, h3, h4, h5, h6 {
|
||
margin: 20px 0 10px;
|
||
padding: 0;
|
||
font-weight: bold;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code {
|
||
font-size: inherit;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 28px;
|
||
color: #000;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 24px;
|
||
border-bottom: 1px solid #ccc;
|
||
color: #000;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 18px;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 16px;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 14px;
|
||
}
|
||
|
||
h6 {
|
||
color: #777;
|
||
font-size: 14px;
|
||
}
|
||
|
||
body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child {
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
}
|
||
|
||
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
|
||
margin-top: 0;
|
||
padding-top: 0;
|
||
}
|
||
|
||
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
/* LINKS
|
||
=============================================================================*/
|
||
|
||
a {
|
||
color: #4183C4;
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* LISTS
|
||
=============================================================================*/
|
||
|
||
ul, ol {
|
||
padding-left: 30px;
|
||
}
|
||
|
||
ul li > :first-child,
|
||
ol li > :first-child,
|
||
ul li ul:first-of-type,
|
||
ol li ol:first-of-type,
|
||
ul li ol:first-of-type,
|
||
ol li ul:first-of-type {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
ul ul, ul ol, ol ol, ol ul {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
dl {
|
||
padding: 0;
|
||
}
|
||
|
||
dl dt {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
font-style: italic;
|
||
padding: 0;
|
||
margin: 15px 0 5px;
|
||
}
|
||
|
||
dl dt:first-child {
|
||
padding: 0;
|
||
}
|
||
|
||
dl dt>:first-child {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
dl dt>:last-child {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
dl dd {
|
||
margin: 0 0 15px;
|
||
padding: 0 15px;
|
||
}
|
||
|
||
dl dd>:first-child {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
dl dd>:last-child {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
/* CODE
|
||
=============================================================================*/
|
||
|
||
pre, code, tt {
|
||
font-size: 12px;
|
||
font-family: Consolas, "Liberation Mono", Courier, monospace;
|
||
}
|
||
|
||
code, tt {
|
||
margin: 0 0px;
|
||
padding: 0px 0px;
|
||
white-space: nowrap;
|
||
border: 1px solid #eaeaea;
|
||
background-color: #f8f8f8;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
pre>code {
|
||
margin: 0;
|
||
padding: 0;
|
||
white-space: pre;
|
||
border: none;
|
||
background: transparent;
|
||
}
|
||
|
||
pre {
|
||
background-color: #f8f8f8;
|
||
border: 1px solid #ccc;
|
||
font-size: 13px;
|
||
line-height: 19px;
|
||
overflow: auto;
|
||
padding: 6px 10px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
pre code, pre tt {
|
||
background-color: transparent;
|
||
border: none;
|
||
}
|
||
|
||
kbd {
|
||
-moz-border-bottom-colors: none;
|
||
-moz-border-left-colors: none;
|
||
-moz-border-right-colors: none;
|
||
-moz-border-top-colors: none;
|
||
background-color: #DDDDDD;
|
||
background-image: linear-gradient(#F1F1F1, #DDDDDD);
|
||
background-repeat: repeat-x;
|
||
border-color: #DDDDDD #CCCCCC #CCCCCC #DDDDDD;
|
||
border-image: none;
|
||
border-radius: 2px 2px 2px 2px;
|
||
border-style: solid;
|
||
border-width: 1px;
|
||
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||
line-height: 10px;
|
||
padding: 1px 4px;
|
||
}
|
||
|
||
/* QUOTES
|
||
=============================================================================*/
|
||
|
||
blockquote {
|
||
border-left: 4px solid #DDD;
|
||
padding: 0 15px;
|
||
color: #777;
|
||
}
|
||
|
||
blockquote>:first-child {
|
||
margin-top: 0px;
|
||
}
|
||
|
||
blockquote>:last-child {
|
||
margin-bottom: 0px;
|
||
}
|
||
|
||
/* HORIZONTAL RULES
|
||
=============================================================================*/
|
||
|
||
hr {
|
||
clear: both;
|
||
margin: 15px 0;
|
||
height: 0px;
|
||
overflow: hidden;
|
||
border: none;
|
||
background: transparent;
|
||
border-bottom: 4px solid #ddd;
|
||
padding: 0;
|
||
}
|
||
|
||
/* TABLES
|
||
=============================================================================*/
|
||
|
||
table th {
|
||
font-weight: bold;
|
||
}
|
||
|
||
table th, table td {
|
||
border: 1px solid #ccc;
|
||
padding: 6px 13px;
|
||
}
|
||
|
||
table tr {
|
||
border-top: 1px solid #ccc;
|
||
background-color: #fff;
|
||
}
|
||
|
||
table tr:nth-child(2n) {
|
||
background-color: #f8f8f8;
|
||
}
|
||
|
||
/* IMAGES
|
||
=============================================================================*/
|
||
|
||
img {
|
||
max-width: 100%
|
||
}
|
||
</style>
|
||
<!--<base href="file:\\\C:\Users\i-wanglihua\Desktop\">--><base href=".">
|
||
</head>
|
||
<body>
|
||
<h2>前端代码规范</h2>
|
||
<h3>目录：</h3>
|
||
<ul>
|
||
<li>JavaScript</li>
|
||
<li>HTML</li>
|
||
<li>CSS</li>
|
||
<li>example</li>
|
||
</ul>
|
||
<h3>JavaScript</h3>
|
||
<p>(1)使用 === 和 !== 判等；不要使用 == 和 != 判等； </p>
|
||
<pre><code>if(word === str)
|
||
</code></pre>
|
||
|
||
<p>(2)if(变量)足够判断变量是否为null、 '' 、undefine等情况；不用依次判断；
|
||
</p>
|
||
<pre><code>var name = getJSON().name; //这里不知道是否能取到，如果属性层次较深，建议使用getJSON()['name']
|
||
if(name){ //简约判断
|
||
.......
|
||
}
|
||
</code></pre>
|
||
|
||
<p>(3)能在函数作用域内声明的变量，不要放在作用域外面； </p>
|
||
<pre><code>var domain = 'xx.com'; //共享变量
|
||
var getLBSObj = function(){
|
||
//下面的变量没有必要暴露在外面，仅供该方法使用
|
||
var name = 'LBS',
|
||
desc = '基于LBS的应用',
|
||
api = ['JS', 'android', 'iOS'];
|
||
....
|
||
}
|
||
</code></pre>
|
||
|
||
<p>(4){}的位置紧随对象和函数，例如var getName = function(){
|
||
</p>
|
||
<pre><code>var getName = function(){
|
||
var name = '大世界，小流量'；
|
||
...
|
||
return name;
|
||
}
|
||
</code></pre>
|
||
|
||
<p>(5)js大体兼容IE8+，例如使用JSON，当然可以使用 (new Function("return " + str))();向下兼容</p>
|
||
<pre><code>var getJSONObj = function(jsonStr){
|
||
if(JSON && JSON.parse)
|
||
return JSON.parse(jsonStr);
|
||
return (new Function('return' + jsonStr))();
|
||
}
|
||
</code></pre>
|
||
|
||
<p>(6)字符串全部使用单引号，例如 var str = 'id="result" name="address"';</p>
|
||
<pre><code>var div = document.createElement('div');
|
||
div.innerHTML = '<div id="news">conetnt...</div>';
|
||
</code></pre>
|
||
|
||
<p>(7)所有变量和表达式间空一格，例如for(var index in nameArr){, for(var i = 0, n = nameArr.length; i < n; i++){ </p>
|
||
<pre><code>var name = 'Github';
|
||
var apiArr = ['JavaScript API', 'iOS SDK', 'Android SDK'];
|
||
// ++i或者i++ 在严格模式下，可写成i += 1;
|
||
for(var i = 0, n = apiArr.length; i < n; ++i){
|
||
console.log(apiArr[i]);
|
||
}
|
||
</code></pre>
|
||
|
||
<p>(8)变量的命名需要见名知意，例如 var driverInfo = JSON.parse(jsonStr);</p>
|
||
<pre><code>var tipInfo = '请输入提示语'; //good case
|
||
var str1 = '请输入提示语'; // base case
|
||
</code></pre>
|
||
|
||
<p>(9)所有变量的声明在逻辑块的最前部</p>
|
||
<pre><code>var SERVER_URL = 'http://127.0.0.1:3000/amap/js'; //常量
|
||
var user = new User(); // global variable
|
||
|
||
//使用上面的全局变量
|
||
var setName = function(){
|
||
getJSON(SERVER_URL + '/user/get');
|
||
...
|
||
}
|
||
|
||
//一下变量被下面2个函数使用，而不被上面的函数使用，建议变量定义在逻辑块上面
|
||
//下面2个函数算是一个逻辑块
|
||
var name = 'xxxx';
|
||
var locationHash = 'nearby';
|
||
var setPath = function(id){
|
||
location.hash = locationHash + '/' + name + '/' + id;
|
||
}
|
||
|
||
var getData = function(pid){
|
||
getJSON(SERVER_URL + '/' + name + '/' + pid);
|
||
}
|
||
</code></pre>
|
||
|
||
<p>(9) return 后面变量不要换行，因为压缩会引起很多问题</p>
|
||
<pre><code>(function(){
|
||
return { //这里不要换行
|
||
name: '测试服务', //注意name和value之间有空格
|
||
url: 'test:3000'
|
||
};
|
||
})();
|
||
</code></pre>
|
||
|
||
<p>(10)建议使用 && 、 || 、！!(obj)、三元运算符等</p>
|
||
<pre><code>if(data && data.length) //这是合理的判断，&&是依次判断，遇否中断， 建议
|
||
var name = data.name || ''; //依次都判断，遇true赋值，建议
|
||
var isName = names.split(',').lenght > 1 ? '名称正确'： '名称错误';
|
||
var isCanvas = !!(canvas.getContext('2d'));
|
||
</code></pre>
|
||
|
||
<p>(11)所有callback建议return</p>
|
||
<pre><code>function getData(url, callback){
|
||
....
|
||
getJSON(url, function(status, data){
|
||
if(status){
|
||
var data = JSON.parse(data);
|
||
data.status = status;
|
||
return callback(data);
|
||
}
|
||
return callback({
|
||
status: 0
|
||
});
|
||
});
|
||
}
|
||
</code></pre>
|
||
|
||
<p>(12)建议所有数组声明，使用[],例如 var arr = [];</p>
|
||
<pre><code>var names = new Array(); //不建议
|
||
var names = []; //建议
|
||
</code></pre>
|
||
|
||
<p>(13)++和--等一元自操作运算符紧跟变量</p>
|
||
<pre><code>i++； //建议
|
||
++i; //建议
|
||
i ++; //不建议
|
||
++ i; //不建议
|
||
</code></pre>
|
||
|
||
<p>(14)注释，建议单行注释；注释为单独一行</p>
|
||
<pre><code>//创建用户（这是单行注释，且占据一行）
|
||
var user = new User('xiaoming', 25);
|
||
//设置用户姓名
|
||
user.setName('鬼谣');
|
||
</code></pre>
|
||
|
||
<p>(15)语句统一使用分号';'结尾，建议
|
||
var getName = function(){
|
||
...
|
||
}; //这里有分号</p>
|
||
<p>(16)所有的JavaScript代码放在一个闭包内,避免污染全局变量</p>
|
||
<pre><code>(function(exports){
|
||
var user = new User();
|
||
//do something
|
||
...
|
||
})(window);
|
||
</code></pre>
|
||
|
||
<h3>HTML</h3>
|
||
<p>(1)统一使用HTML5的DOCTYPE</p>
|
||
<pre><code><!DOCTYPE html>
|
||
</code></pre>
|
||
|
||
<p>(2)使用UTF8字符编码，全部简写成如下即可</p>
|
||
<pre><code><meta charset="utf-8" />
|
||
</code></pre>
|
||
|
||
<p>(3)id紧跟标签名（空一格）,即id放在标签属性的最前面</p>
|
||
<pre><code><div id="" name="" ...></div>
|
||
</code></pre>
|
||
|
||
<p>(4)JavaScript外部引用脚本全部放在body闭合标签上；不放在head里面</p>
|
||
<pre><code><!DOCTYPE html>
|
||
<html ng-app="app">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title></title>
|
||
</head>
|
||
<body>
|
||
<div></div>
|
||
<script type="text/javascript" src="js/angular.min.js" ></script>
|
||
<script type="text/javascript" src="lib/1.js" ></script>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
|
||
<p>(5)css文件，公共样式放入common.css, 其他内联到head标签内部</p>
|
||
<pre><code><head>
|
||
<meta charset="utf-8" />
|
||
<title></title>
|
||
<link rel="stylesheet" href="css/common.css" />
|
||
<style type="text/css">
|
||
html body{...}
|
||
body>div:nth-child(2){...}
|
||
</style>
|
||
</head>
|
||
</code></pre>
|
||
|
||
<p>(6)建议减少使用table、H等标签，如果有必要使用display: table;建议全部使用DIV+CSS布局 <br>
|
||
(7)HMTL文件中的标签属性全部使用双引号</p>
|
||
<pre><code><body>
|
||
<div id="parent">
|
||
<div id="detail">
|
||
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</code></pre>
|
||
|
||
<p>(8)HTML标签内不建议内联样式</p>
|
||
<pre><code><!--不建议内联样式-->
|
||
<div style="color:#ccc; font-size:14px;"></div>
|
||
</code></pre>
|
||
|
||
<p>(9)保持HTML文件的干净，看上去清爽，只剩下标签和class属性最好</p>
|
||
<p>(10)scrip标签标准格式，建议不使用language</p>
|
||
<pre><code><script type="text/javascript" src="外部脚本" ></script>
|
||
</code></pre>
|
||
|
||
<h3>CSS</h3>
|
||
<p>(1)所有样式都必须分号(';')结尾, 标签和样式都在一行，不换行，减少页面代码行数</p>
|
||
<pre><code>html body{font-size:12px;color:#ddd;}
|
||
body>div:nth-child(2){width:300px;height:300px;border:1px solid red;}
|
||
</code></pre>
|
||
|
||
<p>(2)所有样式尽量使用class、标签表示；减少使用id</p>
|
||
<pre><code>/*一篇HTML中尽量看去只用class，必要id除外*/
|
||
.fl{float:left;}
|
||
/*尽量减少使用id*/
|
||
#title_text{float:left;}
|
||
</code></pre>
|
||
|
||
<p>(3)如果兼容低版本浏览器，建议不带前缀的css在前，然后是带前缀的样式，毕竟高版本浏览器居多</p>
|
||
<pre><code>div{transform: ...;-webkit-transform: ...;-moz-transform: ...;-ms-transform: ...;}
|
||
</code></pre>
|
||
|
||
<p>(4)css内部属性字符串使用单引号</p>
|
||
<pre><code>html body{font-size:12px;color:#ddd;font-family: '微软雅黑', georgia;}
|
||
</code></pre>
|
||
|
||
<p>(5)提示信息，字体为12px; 按钮字体为14px(只针对js-demo)</p>
|
||
<p>(6)css外部脚本标准为</p>
|
||
<pre><code><link rel="stylesheet" href="css/common.css" />
|
||
</code></pre>
|
||
|
||
<h3>Example</h3>
|
||
<p>下面是一个简单的地图显示的demo，代码如下：</p>
|
||
<pre><code><!DOCTYPE HTML>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>地图显示</title>
|
||
<style type="text/css">
|
||
body{margin:0;height:100%;width:100%;position:absolute;}
|
||
#mapContainer{height:100%;width:100%;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="mapContainer"></div>
|
||
|
||
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=8e332545f5be046f134095019aa8b5cb"></script>
|
||
<script type="text/javascript">
|
||
(function(AMap){
|
||
|
||
var map = new AMap.Map('mapContainer', {
|
||
resizeEnable: true,
|
||
rotateEnable: true,
|
||
dragEnable: true,
|
||
zoomEnable: true,
|
||
//设置可缩放的级别
|
||
zooms: [3,18],
|
||
//传入2D视图，设置中心点和缩放级别
|
||
view: new AMap.View2D({
|
||
center: new AMap.LngLat(116.397428, 39.90923),
|
||
zoom: 13
|
||
})
|
||
});
|
||
|
||
//以下为缩放逻辑代码块，地图的最小级别不能小于4
|
||
//跟逻辑块相关的变量定义，定义在逻辑块最前部
|
||
var MIN_ZOOM = 4;
|
||
function setZoom(zoom){
|
||
if(zoom >= MIN_ZOOM)
|
||
map.setZoom(zoom);
|
||
}
|
||
|
||
setZoom(18);
|
||
|
||
})(AMap);
|
||
</script>
|
||
</body>
|
||
</html>
|
||
</code></pre>
|
||
|
||
|
||
|
||
|
||
<!-- This document was created with MarkdownPad, the Markdown editor for Windows (http://markdownpad.com) -->
|
||
</body></html> |