4 無處不在的三劍客

無處不在的三劍客

這時我們終于了解了我們的三劍客，就這么可以結(jié)合到一起了，HTML+Javascript+CSS是這一切的基礎(chǔ)。而我們用到的其他語言如PHP、Python、Ruby等等的最后都會變成上面的結(jié)果，當(dāng)然還有Coffeescript之類的語言都是以此為基礎(chǔ)，這才是我們需要的知識。

4.1　Hello,Geek

有了一些些的基礎(chǔ)之后，我們終于能試著去寫一些程序了。也是時候去創(chuàng)建一個像樣的東西，或許你在一些見面設(shè)計方面的書籍看過類似的東西，可能我寫得也沒有那些內(nèi)容好，只是這些都是一些過程。過去我們都是一點點慢慢過來的，只是現(xiàn)在我們也是如此，技術(shù)上的一些東西，事實上大家都是知道的。就好比我們都覺得我們可以開個超市，但是如果讓我們?nèi)ラ_超市的話，我們并不一定能賺錢。

學(xué)習(xí)編程的目的可能不在于我們能找到一份工作，那只是在編程之外的東西，雖然確實也是很確定的。但是除些之處，有些東西也是很重要的。

過去沒有理解為什么會一些人會不厭其煩地去回答別人的問題，有時候可能會想是一種能力越大責(zé)任越大的感覺，但是有時候在寫一些博客或者回答別人的問題的時候我們又重新思考了這些問題，又重新學(xué)習(xí)了這些技能。所以這里可能說的不是關(guān)于編程的東西,而是一些編程以外的東西，關(guān)于學(xué)習(xí)或者學(xué)習(xí)以外的東西。

4.2　從源碼學(xué)習(xí)

過去總會覺得學(xué)了一種語言的語法便算是學(xué)了一種語言，于是有一天發(fā)現(xiàn)到了這個語言的項目上的時候，雖然會寫上幾行代碼，但是卻不像這語言的風(fēng)格。于是這也是這一篇的意義所在了。

4.3　瀏覽器渲染過程

基本的渲染引擎的過程如下圖所示:

• 解析HTML去構(gòu)建DOM樹
• 渲染樹形結(jié)構(gòu)
• 生成渲染的樹形圖布局
• 繪制樹形圖

對于Webkit瀏覽器來說，他的過程如下所示:

而在jQuery下面則是這樣的

isFunction: function( obj ) {
    return jQuery.type(obj) === "function";
}

而他們的用法是一樣的，都是

$.isFunction();

jQuery的作法是將諸如isFunction,isArray這些函數(shù)打包到j(luò)Query.extend中，而zepto.js的則是 也是這樣的，只不過多了一行

$.isFunction = isFunction

遺憾的是我也沒去了解過為什么，之前我也沒有看過這些庫的代碼，所以這個問題就要交給讀者去解決了。jQuery里面提供了函數(shù)式編程接口，不過jQuery更多的是構(gòu)建于CSS選擇器之上，對于DOM的操作比javascript自身提供的功能強大得多。如果我們的目的在于更好的編程，那么可能需要諸如Underscore.js之類的庫?；蛟S說打包自己常用的函數(shù)功能為一個庫，諸如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ā)生什么了。對于不是這個工具、軟件的用戶來說，開源更多的意義可能在于我們可以添加新的功能，當(dāng)然還有免費。如果沒有所謂的危機感，以及認(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行添加一個分號。

最好的方法還是閱讀別人的代碼，而所謂的別人指的是一些相對較大的網(wǎng)站的，有好的開發(fā)流程，代碼質(zhì)量也不會太差。而所謂的復(fù)雜的代碼都是一步步構(gòu)建上去的，就像羅馬不是一天建成的。

有意思的是多數(shù)情況下，我們可能會用原型去開發(fā)我們的應(yīng)用，而這也是我們需要去了解和掌握的地方，

function Calc(){

}
Calc.prototype.add=function(a,b){
    return a+b;
};
Calc.prototype.sub=function(a,b){
    return a-b;
};

我們似乎在這里展示了更多的Javascript的用法，但是這不是一好的關(guān)于Javascript的介紹，有一天我們還要用諸如qunit之類的工具去為我們的function寫測試，這時就是一個更好的開始。

如果我們樂意的話，我們也可以構(gòu)建一個類似于jQuery的框架，用來學(xué)習(xí)。

作為一門編程語言來說，我們學(xué)得很普通，在某種意義上來說算不上是一種入門。但是如果我們可以在其他的好書在看到的內(nèi)容，就沒有必要在這里進行復(fù)述，目的在于一種學(xué)習(xí)習(xí)慣的養(yǎng)成。

4.4.2　CSS

CSS有時候很有趣，但是有時候有很多我們沒有意識到的用法，這里以Bootstrap為例，這是一個不錯的CSS庫。最令人興奮的是沒有閉源的CSS，沒有閉源的JS，這也就是前端比較容易學(xué)習(xí)的地方所在了，不過雖然這這被稱作是一個開源的CSS庫，但是稱之為CSS庫顯然不合適。

a,
a:visited {
  text-decoration: underline;
}
a[href]:after {
  content: " (" attr(href) ")";
}
abbr[title]:after {
  content: " (" attr(title) ")";
}
a[href^="javascript:"]:after,
a[href^="#"]:after {
  content: "";
}

這里有一些有趣的，值得一講的CSS用法。

• 偽類選擇器,如a:visited這樣需要其他條件來對元素應(yīng)用樣式，用于已訪問的鏈接。
• 屬性選擇器,如a[href]這樣當(dāng)a元素存在href這樣的屬性的時候來尋找應(yīng)用元素。

其他還需要去好好了解的就是CSS的盒模型了，作為CSS的基石之一。

4.5　CSS盒模型圖

(ps:以下內(nèi)容來自于Mozilla Developer NetWorks)

CSS下這些矩形盒子由標(biāo)準(zhǔn)盒模型描述。這個模型描述元素內(nèi)容占用空間。盒子有四個邊界：外邊距邊界margin edge, 邊框邊界border edge, 內(nèi)邊距邊界padding edge 與 內(nèi)容邊界content edge。

內(nèi)容區(qū)域content area 是真正包含元素內(nèi)容的區(qū)域。位于內(nèi)容邊界的內(nèi)部，它的大小為內(nèi)容寬度 或 content-box寬及內(nèi)容高度或content-box高。

如果 box-sizing 為默認(rèn)值， width, min-width, max-width, height, min-height 與 max-height 控制內(nèi)容大小。

內(nèi)邊距區(qū)域padding area 用內(nèi)容及可能的邊框之間的空白區(qū)域擴展內(nèi)容區(qū)域。它位于內(nèi)邊距邊界內(nèi)部，通常有背景——顏色或圖片（不透明圖片蓋住背景顏色）. 它的大小為 padding-box 寬與 padding-box 高。

內(nèi)邊距與內(nèi)容邊界之間的空間可以由 padding-top, padding-right, padding-bottom, padding-left 和簡寫屬性 padding 控制。

邊框區(qū)域border area 是包含邊框的區(qū)域，擴展了內(nèi)邊距區(qū)域。它位于邊框邊界內(nèi)部，大小為 border-box 寬和 border-box 高。由 border-width 及簡寫屬性 border控制。

外邊距區(qū)域margin area用空白區(qū)域擴展邊框區(qū)域，以分開相鄰的元素。它的大小為 margin-box 的高寬。

外邊距區(qū)域大小由 margin-top, margin-right, margin-bottom, margin-left 及簡寫屬性 margin 控制。

在 外邊距合并 的情況下，由于盒之間共享外邊距，外邊距不容易弄清楚。

最后注意，對于行內(nèi)非替換元素，其占用空間（行高）由 line-height 決定，即使有內(nèi)邊距與邊框。

諸如

* {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica;
}

這樣的通用器用來進行全局選擇的工具和我們用于抵消某個body對于子選擇器的影響一樣值得注意得多。

4.6　筆記

寫博客似乎是一個不錯的習(xí)慣，作為一個不是很優(yōu)秀的寫手，有時候發(fā)現(xiàn)原來能教會別人對于自己的能力來說算是一種肯定。有些時候教會別人才算是自己學(xué)會的表現(xiàn)，總會在項目上的時候需要自己去復(fù)述工作的一個過程，我們需要整理好我們的思路才能帶給別人更多的收獲。我們的筆記上總會留下自己學(xué)習(xí)的一些過程，有些時候我們想要的只是一點點的鼓勵，有時候是評論一類，有時可能是訪問量。更多的可能是我們可以重新整理自己的知識，好好復(fù)習(xí)一下，以便于更好地記住，能寫出來將會是一個非常有收獲的過程。

無處不在的三劍客就這樣到了這里，寫得似乎很多也似乎很少，但是還是沒有做出來任何一個東西，于是我們?nèi)匀怀@樣一個方向前進。