HTML

语法

HTML5 doctype

<!DOCTYPE html>

lang属性

根据HTML5规范:应在html标签上加上lang属性。这会给语音工具和翻译工具帮助,告诉它们应当怎么去发音和翻译。

比如

<html lang="zh-cn">
<html lang="en-us">

字符编码

<meta charset="UTF-8">

通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为'UTF-8'。

IE兼容模式

标准的HTML5页面应该是这样

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
<body>
    
</body>
</html>

引入CSS, JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/css 和 text/javascript 分别是他们的默认值

<link rel="stylesheet" href="code_guide.css">
<script src="code_guide.js"></script>

boolean属性

boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;

<-- Good -->
<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
    <option value="1" selected>1</option>
</select>

<-- Bad -->
<input type="text" disabled="disabled">

<input type="checkbox" value="1" checked="checked">

<select>
    <option value="1" selected>1</option>
</select>

减少标签数量

<-- Good -->
<label class="uiLabel">
    &{'administrationgroup.code'}:
</label>
<input class="uiComponent" type="text"/>
    
<-- Bad -->
<span>
    <label class="uiLabel">
        &{'administrationgroup.code'}:
    </label>
    <span class="uiComponent">
        <input type="text"/>
    </span>
</span>

javascript

缩进

使用soft tab(4个空格)。

单行长度

不要超过80,但如果编辑器开启word wrap可以不考虑单行长度。

分号

以下几种情况后需加分号:

换行

换行的地方,行末必须有','或者运算符;

以下几种情况不需要换行:

以下几种情况需要换行:

引号

最外层统一使用单引号。

// Good
function foo (data) {
    return '<a href="#" onclick="clickFn(\''+data.id+'\')"></a>'
}

// bad
function foo (data) {
    return "<a href='#' onclick='clickFn(\'"+data.id+"\')'></a>"
}

括号

下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch, finally, with

// not good
if (condition)
    doSomething();

// good
if (condition) {
    doSomething();
}

建议使用 && 、 || 、!!(obj)、三元运算符等

if(data && data.length) //这是合理的判断,&&是依次判断,遇否中断, 建议
var name = data.name || ''; //依次都判断,遇true赋值,建议
var isName = names.split(',').lenght > 1 ? '名称正确': '名称错误';
var isCanvas = !!(canvas.getContext('2d'));

请使用字面量值创建对象

// Good
var obj = {};
var users = [];
var str = 'abc';
var num = 1;
var isDefault = false;

// bad
var obj = new Object();
var users = new Array();
var str = new String('abc');
var num = new Number(1);
var isDefault = new Boolean(false);

别使用javascript 关键字和保留字

// 比如 class 是保留字
var obj = {
    name: 'userid',
    class: 'text-left'
};

只调用一次的函数就别单独声明了

function getData () {
    $.get('/abc', getDataCallback)
}
function getDataCallback (data) {
    console.log(data);
}

function getData () {
    $.get('/abc', function  (data) {
        console.log(data);
    })
}

关键字

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

保留字

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

不要使用 eval()

setInterval和setTimeout 传递字符串也是变相使用eval

setInterval('foo()', 100)

不用switch

不要用setAttribute 修改元素的布尔类型的属性

根据官方的建议:具有 true 和 false 两个属性的属性,这些checked、 selected、 readonly、 disabled、 autocomplete、autoplay、loop、muted、preload、autofocus、required、open 使用prop(),其他的使用 attr()

// bad
$option.attr('selected', 'selected'); // jquery 的方法
option.setAttribute('selected', 'selected'); 原生的方法

// good
$option.prop('selected', true); // jquery 的方法
option.selected = true; 原生的方法

jQuery最佳实践

jQuery最佳实践

最后

推荐你们都读一遍或者多遍这本书,里面有javascript最好的实践。 公司有购买的在书架上

Alt text