了解標(biāo)準(zhǔn)及遵守絕大多數(shù)標(biāo)準(zhǔn)
注重可讀性,從ID及CLASS的命名
關(guān)注SEO與代碼的聯(lián)系
或許在這方面我也算不上很了解,不過按筆者的經(jīng)驗(yàn)來說,大致就是如此。
多數(shù)情況下我們的HTML是類似于下面這樣子的
{% nevercache %}
{% include "includes/user_panel.html" %}
{% endnevercache %}
{% block right_panel %}
{% ifinstalled mezzanine.twitter %}
{% include "twitter/tweets.html" %}
{% endifinstalled %}
{% endblock %}
換句話說HTML只是基礎(chǔ),而不是日常用到的。我們的HTML是由template生成的,我們可以借助于mustache.js又或者是angluarjs之類的js庫來生成最后的HTML,所以這里只是一個(gè)開始。
還需要了解的一部分就是HTML的另外一個(gè)重要的部分,DOM樹形結(jié)構(gòu)
5.4 DOM樹形結(jié)構(gòu)圖
DOM是文檔對象化模型(Document Object Model)的簡稱。DOM Tree是指通過DOM將HTML頁面進(jìn)行解析,并生成的HTML tree樹狀結(jié)構(gòu)和對應(yīng)訪問方法。

DOM Tree
5.4.1 javascript
這里以未壓縮的jQuery源碼和zepto.js作一個(gè)小小的比較,zepto.js是兼容jQuery的,因此我們舉幾個(gè)有意思的函數(shù)作一簡單的比較,關(guān)于源碼可以在官網(wǎng)上下載到。
在zepto.js下面判斷一個(gè)值是否是函數(shù)的方面如下,
function isFunction(value) { return type(value) == "function" }
而在jQuery下面則是這樣的
isFunction: function( obj ) {
return jQuery.type(obj) === "function";
}
而他們的用法是一樣的,都是
$.isFunction();
jQuery的作法是將諸如isFunction,isArray這些函數(shù)打包到j(luò)Query.extend中,而zepto.js的也是這樣的,只不過多了一行
$.isFunction = isFunction
遺憾的是我也沒去了解過為什么,之前我也沒有看過這些庫的代碼,所以這個(gè)問題就要交給讀者去解決了。jQuery里面提供了函數(shù)式編程接口,不過jQuery更多的是構(gòu)建于CSS選擇器之上,對于DOM的操作比javascript自身提供的功能強(qiáng)大得多。如果我們的目的在于更好的編程,那么可能需要諸如Underscore.js之類的庫?;蛟S說打包自己常用的函數(shù)功能為一個(gè)庫,諸如jQuery
function isFunction(value) { return type(value) == "function" }
function isWindow(obj) { return obj != null && obj == obj.window }
function isDocument(obj) { return obj != null && obj.nodeType == obj.DOCUMENT_NODE }
function isObject(obj) { return type(obj) == "object" }
我們需要去了解一些故事背后的原因,越來越害怕GUI的原因之一,在于不知道背后發(fā)生了什么,即使是開源的,我們也無法了解真正的背后發(fā)生什么了。對于不是這個(gè)工具、軟件的用戶來說,開源更多的意義可能在于我們可以添加新的功能,當(dāng)然還有免費(fèi)。如果沒有所謂的危機(jī)感,以及認(rèn)為自己一直在學(xué)習(xí)工具的話,可以試著去打包自己的函數(shù),打包自己的庫。
var calc={
add: function(a,b){
return a+b;
},
sub: function(a,b){
return a-b;
},
dif: function(a,b){
if(a>b){
return a;
}else{
return b;
}
}
}
然后用諸如jslint測試一下代碼。
$ ./jsl -conf jsl.default.conf
JavaScript Lint 0.3.0 (JavaScript-C 1.5 2004-09-24)
Developed by Matthias Miller (http://www.JavaScriptLint.com)
app.js
/Users/fdhuang/beageek/chapter4/src/app.js(15): lint warning: missing semicolon
}
........^
0 error(s), 1 warning(s)
于是我們需要在第15行添加一個(gè)分號(hào)。
最好的方法還是閱讀別人的代碼,而所謂的別人指的是一些相對較大的網(wǎng)站的,有比較完善的開發(fā)流程,代碼質(zhì)量也不會(huì)太差。而所謂的復(fù)雜的代碼都是一步步構(gòu)建上去的,羅馬不是一天建成的。
有意思的是多數(shù)情況下,我們可能會(huì)用原型去開發(fā)我們的應(yīng)用,而這也是我們需要去了解和掌握的地方,
function Calc(){
}
Calc.prototype.add=function(a,b){