第一章 基本的格式化
缩进层级：推荐 tab:4;
换行：在运算符后面换行，第二行追加两个缩进；
// Good: Break after operator, following line indented two levels
callAFunction(document, element, window, "some string value", true, 123,
navigator); // Bad: Following line indented only one level
callAFunction(document, element, window, "some string value", true, 123,
navigator); // Bad: Break before operator
callAFunction(document, element, window, "some string value", true, 123
, navigator);
添加空行：在方法之间； 在方法的局部变量和第一条语句之间； 在多行或单行注释之前； 在方法内的逻辑片段插入空行提高可读性（比如for， if）；
// good
if (wl && wl.length) { for (i = 0, l = wl.length; i < l; ++i) {
p = wl[i];
type = Y.Lang.type(r[p]); if (s.hasOwnProperty(p)) { if (merge && type == 'object') {
Y.mix(r[p], s[p]);
} else if (ov || !(p in r)) {
r[p] = s[p];
}
}
}
}
常量：采用大写字符加下划线的方式（var MAX_COUNT）；
var MAX_COUNT = 10;
var URL = "http://www.nczonline.net/"; if (count < MAX_COUNT) {
doSomething();
}
不推荐显示的构建数组和对象（采用new的方式）；
- 字符串：推荐使用双引号；
// Good
var name = "Nicholas"; // Bad: Single quotes
var name = 'Nicholas'; // Bad: Wrapping to second line
var longString = "Here's the story, of a man \
named Brady.";
不要使用“\”来连接字符串，推荐使用“+”；
第二章 注释
- 注释：注释前面空一行，与下一行对其； 程序代码比较明了的时候，不推荐添加注释； 可能被认为错误的代码可加注释提醒不要随意修改；
/*
*注意前面的空格（不好）
* 注意前面的空格（好）
*／
第三章 语句和表达式
- 块语句间的空格，推荐使用下面这种
if (condition) {
doSomething();
}
- 不要使用 for in 来循环数组，因为 index 是字符串形式，而不是数字形式，容易出现问题。可以用来循环对象；
第四章 变量、函数和运算符
- 严格模式：只在需要的地方添加，尽量不要全局使用，除非你已经明确都要严格模式。
// 推荐使用方式
function fn() {
"use strict";
//代码
} //或者
(function() {
"use strict";
function fn1() { }
function fn2() { }
})();
相等：推荐使用“===” 和 “！==”这样可以避免转换，出现潜在的风险;
尽量不适用 eval , Function, 以及不要给 setTimeout，setInterval 传入字符串;
第五章 UI的松耦合
避免使用css 表达式 expression;
用 js 修改样式的时候，采用添加或者移除类名的方式，而不是直接使用.style.color .style.cssText;
// Bad
element.style.color = "red";
element.style.left = "10px";
element.style.top = "100px";
element.style.visibility = "visible"; element.style.cssText = "color: red; left: 10px; top: 100px; visibility: hidden"; //样式
.reveal {
color: red;
left: 10px;
top: 100px;
visibility: visible;
} // Good - Native
element.className += " reveal"; // Good - HTML5
element.classList.add("reveal"); // Good - YUI
Y.one(element).addClass("reveal"); // Good - jQuery
$(element).addClass("reveal"); // Good - Dojo
dojo.addClass(element, "reveal");
在HTML中不要使用javascript；比如嵌入在HTML中的onClick
<!-- Bad -->
<button onclick="doSomething()" id="action-btn">Click Me</button>
将HTML从JavaScript中 抽离。
// Bad
var div = document.getElemenetById("my-div");
div.innerHTML = "<h3>Erroe</h3>";
- 解决办法有三种：1、从服务器加载；
function loadDialog(name, oncomplete) {
var xhr = new XMLHttpRequest();
xhr.open("get", "/js/dialog/" + name, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var div = document.getElementById("dlg-holder");
div.innerHTML = xhr.responseText;
oncomplete();
} else {
// handle error
}
};
xhr.send(null);
}
- 2、使用简单客户端模板；
// 模板
<li><a href="%s">%s</a></li> function sprintf(text) {
var i=1, args=arguments;
return text.replace(/%s/g, function() {
return (i < args.length) ? args[i++] : "";
});
}
// usage
var result = sprintf(templateText, "/item/4", "Fourth item");
- 3、复杂客户端模板； 比如使用 Handlebars
// 模板放在 script 中
<script type="text/x-handlebars-template" id="list-item">
<li><a href="{{url}}">{{text}}</a></li>
</script> function addItem(url, text) {
var mylist = document.getElementById("mylist"),
script = document.getElementById("list-item"),
templateText = script.text,
template = Handlebars.compile(script.text),
div = document.createElement("div"),
result; result = template({
text: text,
url: url
}); div.innerHTML = result;
list.appendChild(div.firstChild);
} // 使用
addItem("/item/4", "Fourth item");
第六章 避免使用全局变量
避免使用全局变量，存在问题：命名冲突；代码的脆弱性；难以测试
意外的全局变量：忘了var; 解决办法： 使用 JSLint 或者 JSHint ;
单全局变量： 比如YUI定义了一个YUI全局变量； jQuery 定义了两个全局变量，$ 和 jQuery;
命名空间： 比如 YUI.event 下的所有方法都是和事件相关的。
模块： AMD模块 和 YUI 模块；
// AMD
define("my-books", [ "dependency1", "dependency2" ],
function(dependency1, dependency2) {
var Books = {};
Books.MaintainableJavaScript = {
author: "Nicholas C. Zakas"
};
return Books;
});
- 零全局变量：使用前提是内部代码与外部代码无联系。
(function(win) {
var doc = win.document;
})(window)
第七章 事件处理
- 事件处理典型用法
// 不好的
function handleClick(event) {
var popup = document.getElementById("popup");
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
popup.className = "reveal";
} // addListener() from Chapter 7
addListener(element, "click", handleClick);
- 规则1： 隔离应用逻辑
// 好的 - separate application logic
var MyApplication = {
handleClick: function(event) {
this.showPopup(event);
},
showPopup: function(event) {
var popup = document.getElementById("popup");
popup.style.left = event.clientX + "px";
popup.style.top = event.clientY + "px";
popup.className = "reveal";
}
}; addListener(element, "click", function(event) {
MyApplication.handleClick(event);
});
- 规则2： 不要分发事件对象；上面存在的问题是event 事件被无节制分发。从匿名事件处理函数到另一个函数，再到另一个函数。最佳方法： 让事件处理程序使用event对象处理事件，然后拿到所有需要的数据传给应用逻辑。
// Good
var MyApplication = {
handleClick: function(event) {
this.showPopup(event.clientX, event.clientY);
},
showPopup: function(x, y) {
var popup = document.getElementById("popup");
popup.style.left = x + "px";
popup.style.top = y + "px";
popup.className = "reveal";
}
};
addListener(element, "click", function(event) {
MyApplication.handleClick(event); // this is okay
});
- 当处理事件时候，最好让事件处理程序成为接触到event对象的唯一的函数。
// Good
var MyApplication = {
handleClick: function(event) {
// assume DOM Level 2 events support
event.preventDefault();
event.stopPropagation();
// pass to application logic
this.showPopup(event.clientX, event.clientY);
},
showPopup: function(x, y) {
var popup = document.getElementById("popup");
popup.style.left = x + "px";
popup.style.top = y + "px";
popup.className = "reveal";
}
};
addListener(element, "click", function(event) {
MyApplication.handleClick(event); // this is okay
});
第八章 避免 “空比较“
- 下面是不好的示范，你很多都与null不相等，包括数字，字符串，对象等，从而带来隐藏的错误。只有当期待的值是null的时候，可以和null进行比较。
var Controller = {
process: function(items) {
if (items !== null) { // Bad
items.sort();
items.forEach(function(item) {
// do something
});
}
}
};
- 检测基本类型使用typeof, 引用类型使用instanceof， 还有一种鸭式辨型，采用对象特有的方法或者属性是否存在来判断，例如array.sort(), 正则的test方法。通用的方法是，其他类型类似：
function isArray(value) {
return Object.prototype.toString.call(value) === "[object Array]";
}
- 检测属性，判断属性最好的办法是用in
// 不好，当属性值是0, "", false, null或者 undefined
if (object[propertyName]) {
// do something
} // Bad: Compare against null
if (object[propertyName] != null) {
// do something
} // Bad: Compare against undefined
if (object[propertyName] != undefined) {
/ do something
} var object = {
count: 0,
related: null
}; // Good
if ("count" in object) {
// this executes
}
if ("related" in object) {
// this executes
} //当你只想检查实例对象的某个属性是否存在的时候使用hasOwnProperty()
// Good for all non-DOM objects
if (object.hasOwnProperty("related")) {
//this executes
}
// Good when you're not sure
if ("hasOwnProperty" in object && object.hasOwnProperty("related")) {
//this executes
}
第九章 将配置数据从代码中分离出来
- 什么是配置数据？ 就是JavaScript代码中有可能发生改变的。比如：url, 需要展现给用户的字符串， 重复的值， 设置， 任何可能发生变化的值。下面是不好的实例，其中的 invalid value, href的值， selcted 都是配置数据。
// Configuration data embedded in code
function validate(value) {
if (!value) {
alert("Invalid value");
location.href = "/errors/invalid.php";
}
}
function toggleSelected(element) {
if (hasClass(element, "selected")) {
removeClass(element, "selected");
} else {
addClass(element, "selected");
}
}
- 抽离配置数据
// Configuration data externalized
var config = {
MSG_INVALID_VALUE: "Invalid value",
URL_INVALID: "/errors/invalid.php",
CSS_SELECTED: "selected"
};
function validate(value) {
if (!value) {
alert(config.MSG_INVALID_VALUE);
location.href = config.URL_INVALID;
}
}
function toggleSelected(element) {
if (hasClass(element, config.CSS_SELECTED)) {
removeClass(element, config.CSS_SELECTED);
} else {
addClass(element, config.CSS_SELECTED);
}
}
第十章 抛出自定义错误
- 推荐在错误消息中包含函数名称，以及函数失败的原因。
function getDivs(element) {
if (element && element.getElementsByTagName) {
return element.getElementsByTagName("div");
} else {
throw new Error("getDivs(): Argument must be a DOM element.");
}
}
- 何时抛出错误? 辨别代码中哪些部分在特定的情况下最优可能导致失败，并只在哪些地方抛出错误才是关键所在。我们的目的不是防止错误，而是错误发生的时候更加容易地调试。
// 不好的，太多检查
function addClass(element, className) {
if (!element || typeof element.className != "string") {
throw new Error("addClass(): First argument must be a DOM element.");
}
if (typeof className != "string") {
throw new Error("addClass(): Second argument must be a string.");
}
element.className += " " + className;
}
// 好的写法 第二个参数是null 或者一个数字或者一个布尔值时是不会抛出错误的
function addClass(element, className) {
if (!element || typeof element.className != "string") {
throw new Error("addClass(): First argument must be a DOM element.");
}
element.className += " " + className;
}
- 使用try catch 语句，当在try中 发生一个错误，会立即跳到catch语句，传入一个错误对象。还可以增加一个finally 模块，不管错误发不发生都会执行。
try {
somethingThatMightCauseAnError();
} catch (ex) {
handleError(ex);
} finally {
continueDoingOtherStuff();
}
第十一章 不是你的对象不要动
- 以下这些对象不要尝试去修改他们，因为他们已经存在了： 原生对象（Object, Array）, DOM对象（document）, 浏览器对象模型（BOM）对象（window）, 类库的对象。 对待他们的原则是：不覆盖方法； 不新增方法； 不删除方法； 下面是一些不好的示例：
document.getElementById = function() {
return null; // talk about confusing
};
document._originalGetElementById = document.getElementById;
document.getElementById = function(id) {
if (id == "window") {
return window;
} else {
return document._originalGetElementById(id);
}
};
document.sayImAwesome = function() {
alert("You're awesome.");
};
Array.prototype.reverseSort = function() {
return this.sort().reverse();
};
YUI.doSomething = function() {
// code
};
document.getElementById = null;
更好的途径：有三种，见代码
//基于对象的继承
var person = {
name: "Nicholas",
sayName: function() {
alert(this.name);
}
};
var myPerson = Object.create(person);
myPerson.sayName(); // pops up "Nicholas" //基于类型的继承
function MyError(message) {
this.message = message;
}
MyError.prototype = new Error();
var error = new MyError("Something bad happened.");
console.log(error instanceof Error); // true
console.log(error instanceof MyError); // true //门面模式 与适配器唯一不同是 其创建新的接口，后者实现已经存在的接口
function DOMWrapper(element) {
this.element = element;
}
DOMWrapper.prototype.addClass = function(className) {
this.element.className += " " + className;
};
DOMWrapper.prototype.remove = function() {
this.element.parentNode.removeChild(this.element);
}; // Usage
var wrapper = new DOMWrapper(document.getElementById("my-div")); // add a CSS class
wrapper.addClass("selected"); // remove the element
wrapper.remove();
第十二章 浏览器嗅探
- User-agent 检测
// Bad
if (navigator.userAgent.indexOf("MSIE") > -1) {
// it's Internet Explorer
} else {
// it's not
} // good 不要试图检测IE 9及其高版本，而应该只检测IE8以及之前的
if (isInternetExplorer8OrEarlier) {
// handle IE8 and earlier
} else {
// handle all other browsers
}
- 特性检测，推荐使用特性检测
// Bad
if (navigator.userAgent.indexOf("MSIE 7") > -1) {
// do something
} // Good
if (document.getElementById) {
// do something
}
- 避免特性推断
// Bad - uses feature inference
// 不能从一个特性推断出另一个特性是否存在
function getById (id) {
var element = null;
if (document.getElementsByTagName) { // DOM
element = document.getElementById(id);
} else if (window.ActiveXObject) { // IE
element = document.all[id];
} else { // Netscape <= 4
element = document.layers[id];
}
return element;
}
- 避免浏览器推断，你不能根据某种方法存在就判定是某一种浏览器
// Bad
if (document.all) { // IE
id = document.uniqueID;
} else {
id = Math.random();
} var isIE = !!document.all; var isIE = !!document.all && document.uniqueID;
后面的章节是另一部分，比如文件目录，自动化啊等，不好总结。
如果觉得好，请点击下方的推荐噢，感谢您的阅读！