前端规范（html5,js）
来源：互联网 发布：特效制作软件 编辑：程序博客网 时间：2024/06/07 16:47
参考
http://www.css88.com/archives/5364
http://www.html5cn.org/article-2975-1.html
html5规范
注意点原因不推荐/推荐文档类型 <!DOCTYPE html>规范化的 HTML
不推荐<title>Test</title>
<article>This is only a test.
推荐<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>
脚本加载出于性能考虑，脚本异步加载很关键。一段脚本放置在 <head> 内，比如<script src="main.js"></script>，其加载会一直阻塞 DOM 解析，直至它完全地加载和执行完毕。这会造成页面显示的延迟。脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。
而在现代浏览器中，脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载
例如：
所有浏览器中，推荐
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- body goes here -->
<script src="main.js" async></script>
</body>
</html>
只在现代浏览器中，推荐
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>
<!-- body goes here -->
</body>
</html>媒体对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口。
图片文件我们可采用有意义的备选文本（alt）
视频和音频文件我们可以为其加上说明文字或字幕不推荐
<img src="luke-skywalker.jpg">
推荐
<img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">
关注点分离
关注点主要指的是：信息（HTML 结构）、外观（CSS）和行为（JavaScript）。为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。
要求：结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系
在文档和模板中只包含结构性的 HTML；
而将所有表现代码，移入样式表中；
将所有动作行为，移入脚本之中。
建议：为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件
清晰的分层意味着：
不使用超过一到两张样式表（i.e. main.css, vendor.css）
不使用超过一到两个脚本（学会用合并脚本）
不使用行内样式（<style>.no-good {}</style>）
不在元素上使用 style 属性（<hr style="border-top: 5px solid black">）
不使用行内脚本（<script>alert('no good')</script>）
不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
不使用表象 class 名（i.e. red, left, center）
不推荐
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="type.css">
<link rel="stylesheet" href="modules/teaser.css">
</head>
<body>
<h1 style="font-size: 3rem"></h1>
<b>I'm a subtitle and I'm bold!</b>
<center>Dare you center me!</center>
<script>
alert('Just dont...');
</script>
<div class="red">I'm important!</div>
</body>
</html>
推荐
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="title"></h1>
<div class="sub-title">I'm a subtitle and I'm bold!</div>
<span class="comment">Dare you center me!</span>
<div class="important">I'm important!</div>
<script async src="main.js"></script>
</body>
</html>Type 属性
省略样式表与脚本上的 type 属性。鉴于 HTML5 中以上两者默认的 type 值就是 text/css 和 text/javascript，所以 type 属性一般是可以忽略掉的。甚至在老旧版本的浏览器中这么做也是安全可靠的。不推荐
<link rel="stylesheet" href="main.css" type="text/css">
<script src="main.js" type="text/javascript"></script>
推荐
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>ID 和锚点
通常一个比较好的做法是将页面内所有的头部标题元素都加上 ID.
这样做，页面 URL 的 hash 中带上对应的 ID 名称，即形成描点，方便跳转至对应元素所处位置。打个比方，当你在浏览器中输入 URL http://your-site.com/about#best-practices，浏览器将定位至以下 H3 上。
<h3 id="best-practices">Best practices</h3>HTML 引号
使用双引号(“”) 而不是单引号(”) 不推荐
<div class='news-article'></div>
推荐
<div class="news-article"></div>协议头建议在指向图片或其他媒体文件、样式表和脚本的URL地址中省略http：https:协议部分，除非已知相应文件不能同时兼容2个协议。 大小写所有的代码都应是小写的
<article>This is only a test.
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>
js 规范
参考：
http://www.css88.com/archives/5366
注意点原因不推荐/推荐=== 三元条件判断 不推荐
if(x === 10) {
return 'valid';
} else {
return 'invalid';
}
推荐
return x === 10 ? 'valid' : 'invalid';字符串统一使用单引号(‘)，不使用双引号(“)。
这在创建 HTML 字符串非常有好处var msg = 'This is some HTML <div class="makes-sense"></div>';
// Length is 3.
var a1 = new Array(x1, x2, x3);
// Length is 2.
var a2 = new Array(x1, x2);
推荐
var a = [x1, x2, x3];
var a2 = [x1, x2];
或者：
var arryAll = [];
arryAll.push(1);
arryAll.push(2);
对象：
不推荐
var o = new Object();
var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;
推荐
var o = {};
var o2 = {
a: 0,
b: 1,
c: 2,
'strange key': 3
};迭代数组使用 Array.forEach 或者如果你要在特殊场合下中断迭代，那就用 Array.everyFirefox 和Chrome 的Array 类型都有forEach的函数（IE无）
var arryAll = [];
arryAll.push(1);
arryAll.push(2);
arryAll.push(3);
arryAll.push(4);
arryAll.forEach(function(e){
alert(e);
})
every:检查数组里的所有元素是否都满足every函数的为真
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
document.write("First Test Value : " + passed ); //false
或者：
var xx = [1, 2, 5, 8];
function pp(x){
return x % 2 == 0;
}
var r = xx.every(pp);
console.log("r = " + r);//false
if (x) {
function foo() {}
}
推荐
if (x) {
var foo = function() {};
}分号与函数分号需要用在表达式的结尾，而并非函数声明的结尾var foo = function() {
return true;
}; // semicolon here.
function foo() {
return true;
} // no semicolon here.
if(!x) {
if(!y) {
x = 1;
} else {
x = y;
}
}
推荐
x = x || y || 1;使用
如果你使用
log('' == false); // true
log('1' == true); // true
log(null == undefined); // true赋值尽量写在变量申明中 多个变量声明一个var：
不推荐
var a = 10;
var b = 10;
推荐
var a = 10,
b = 10;
不推荐
var a,
b,
c;
a = 10;
b = 10;
c = 100;
推荐
var a = 10,
b = 10,
c = 100;
if(x === 10) {
return 'valid';
} else {
return 'invalid';
}
推荐
return x === 10 ? 'valid' : 'invalid';字符串统一使用单引号(‘)，不使用双引号(“)。
这在创建 HTML 字符串非常有好处var msg = 'This is some HTML <div class="makes-sense"></div>';
不要使用 switch
switch 在所有的编程语言中都是个非常错误的难以控制的语句，建议用 if else 来替换它数组和对象字面量
不推荐// Length is 3.
var a1 = new Array(x1, x2, x3);
// Length is 2.
var a2 = new Array(x1, x2);
推荐
var a = [x1, x2, x3];
var a2 = [x1, x2];
或者：
var arryAll = [];
arryAll.push(1);
arryAll.push(2);
对象：
不推荐
var o = new Object();
var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;
推荐
var o = {};
var o2 = {
a: 0,
b: 1,
c: 2,
'strange key': 3
};迭代数组使用 Array.forEach 或者如果你要在特殊场合下中断迭代，那就用 Array.everyFirefox 和Chrome 的Array 类型都有forEach的函数（IE无）
var arryAll = [];
arryAll.push(1);
arryAll.push(2);
arryAll.push(3);
arryAll.push(4);
arryAll.forEach(function(e){
alert(e);
})
every:检查数组里的所有元素是否都满足every函数的为真
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
document.write("First Test Value : " + passed ); //false
或者：
var xx = [1, 2, 5, 8];
function pp(x){
return x % 2 == 0;
}
var r = xx.every(pp);
console.log("r = " + r);//false
语句块内的函数声明
不推荐if (x) {
function foo() {}
}
推荐
if (x) {
var foo = function() {};
}分号与函数分号需要用在表达式的结尾，而并非函数声明的结尾var foo = function() {
return true;
}; // semicolon here.
function foo() {
return true;
} // no semicolon here.
变量赋值时的逻辑操作
不推荐if(!x) {
if(!y) {
x = 1;
} else {
x = y;
}
}
推荐
x = x || y || 1;使用
=== 精确的比较操作符避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰如果你使用
=== 操作符，那比较的双方必须是同一类型为前提的条件下才会有效。log('0' == 0); // truelog('' == false); // true
log('1' == true); // true
log(null == undefined); // true赋值尽量写在变量申明中 多个变量声明一个var：
不推荐
var a = 10;
var b = 10;
推荐
var a = 10,
b = 10;
不推荐
var a,
b,
c;
a = 10;
b = 10;
c = 100;
推荐
var a = 10,
b = 10,
c = 100;
0 0
- 前端规范（html5,js）
- 前端js代码规范
- [HTML5] 前端规范 - HTML编码规范
- HTML5+JS+CSS3前端积累（一）
- HTML5+JS+CSS3前端积累（二）
- html5，web前端开发的规范（三）
- Html5系列（十六）web前端开发规范文档
- 前端规范（持续）
- 前端必须要注意的规范（三）之js规范
- 前端开发规范：命名规范、html规范、css规范、js规范
- 前端开发规范之命名规范、html规范、css规范、js规范
- 前端开发规范：命名规范、html规范、css规范、js规范
- web前端，js性能提升细节，规范
- 前端开发命名规范(html+css+js)
- 前端模块化开发 CMD规范 sea.js
- 利用HTML5，前端js实现图片压缩
- 利用HTML5，前端js实现图片压缩
- 关于Web前端、Html5、JS的区别
- 小技巧、小经验（2）
- 帆软报表FineReport中数据连接的JDBC连接池属性问题
- [JAVA面试算法] 用代码体现“水仙花数”
- Android Studio 之 Gradle与Project Structure详解
- 线性规划
- 前端规范（html5,js）
- java.lang.UnsupportedClassVersionError
- Dizzying but invisible depth（转载）
- CentOS 6.4出现Disk sda contains BIOS RAID metadata解决方法
- iOS开发－自定义欢迎页和显示时间
- 设计模式之享元模式
- ubuntu更新内核切换内核启动
- 交换机domain 概念详解
- 更换app开发者账号
