一步步搭建物聯網系統——無處不在的三劍客

無處不在的三劍客

這時咱們終於瞭解了咱們的三劍客，他們也就這麼能夠結合到一塊兒了，HTML+Javascript+CSS是這一切的基礎。而咱們用到的其餘語言如PHP、Python、Ruby等等到最後都會變成上面的結果，固然還有Coffeescript之類的語言都是以此爲基礎，這纔是咱們須要的知識。

Hello,Geek

有了一些些基礎以後，咱們終於能試着去寫一些程序了。也是時候去建立一個像樣的東西，或許你在一些界面設計方面的書籍看過相似的東西，可能我寫得也沒有那些內容好，只是這些都是一些過程。過去咱們都是一點點慢慢過來的，只是如今咱們也是如此，技術上的一些東西，事實上你們都是知道的。就比如咱們都以爲咱們能夠開個超市，可是若是讓咱們去開超市的話，咱們並不必定能賺錢。

學習編程的目的可能不在於咱們能找到一份工做，那只是在編程以外的東西，雖然確實也是很肯定的。可是除此之處，有些東西也是很重要的。

過去老是不理解爲何會一些人會不厭其煩地去回答別人的問題，有時候可能會想是一種能力越大責任越大的感受，可是有時候在寫一些博客或者回答別人的問題的時候咱們又從新思考了這些問題，又從新學習了這些技能。因此這裏可能說的不是關於編程的東西而是一些編程之外的東西，關於學習或者學習之外的東西。

從源碼學習

過去總以爲學了一種語言的語法便算是學會了一種語言，直到有一天接觸運用該語言的項目的時候，雖然也會寫上幾行代碼，可是卻不像這種語言的風格。因而這也是這一篇的意義所在了：

瀏覽器渲染過程

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

• 解析HTML去構建DOM樹
• 渲染樹形結構
• 生成渲染的樹形圖佈局
• 繪製樹形圖

對於Webkit瀏覽器來講，他的過程以下所示:

HTML

寫好HTML的一個要點在於讀別人寫的代碼，這只是一方面，咱們所說的HTML方面的內容可能不夠多，緣由有不少，不少東西都須要在實戰中去解決。讀萬卷書和行萬里路，分不清哪一個有重要的意義，可是若是能夠同時作好兩個的話，成長會更快的。

寫好HTML應該會有下面的要點

• 瞭解標準及遵照絕大多數標準
• 注重可讀性，從ID及CLASS的命名
• 關注SEO與代碼的聯繫

或許在這方面我也算不上很瞭解，不過按筆者的經驗來講，大體就是如此。

多數狀況下咱們的HTML是相似於下面這樣子的

html<div class="col-md-3 right">
    {% nevercache %}
    {% include "includes/user_panel.html" %}
    {% endnevercache %}
    <div class="panel panel-default">
    <div class="panel-body">
    {% block right_panel %}
    {% ifinstalled mezzanine.twitter %}
    {% include "twitter/tweets.html" %}
    {% endifinstalled %}
    {% endblock %}
    </div>
    </div>
</div>

換句話說HTML只是基礎，而不是平常用到的。咱們的HTML是由template生成的，咱們能夠藉助於mustache.js又或者是angluarjs之類的js庫來生成最後的HTML，因此這裏只是一個開始。

還須要瞭解的一部分就是HTML的另一個重要的部分，DOM樹形結構

DOM樹形結構圖

DOM是文檔對象化模型（Document Object Model）的簡稱。DOM Tree是指經過DOM將HTML頁面進行解析，並生成的HTML tree樹狀結構和對應訪問方法。

javascript

這裏以未壓縮的jQuery源碼和zepto.js做一個小小的比較，zepto.js是兼容jQuery的，所以咱們舉幾個有意思的函數做一簡單的比較，關於源碼能夠在官網上下載到。

在zepto.js下面判斷一個值是不是函數的方面以下，

javascriptfunction isFunction(value) { return type(value) == "function" }

而在jQuery下面則是這樣的

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

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

javascript$.isFunction();

jQuery的做法是將諸如isFunction,isArray這些函數打包到jQuery.extend中，而zepto.js的也是這樣的，只不過多了一行

javascript$.isFunction = isFunction

遺憾的是我也沒去了解過爲何，以前我也沒有看過這些庫的代碼，因此這個問題就要交給讀者去解決了。jQuery裏面提供了函數式編程接口，不過jQuery更多的是構建於CSS選擇器之上，對於DOM的操做比javascript自身提供的功能強大得多。若是咱們的目的在於更好的編程，那麼可能須要諸如Underscore.js之類的庫。或許說打包本身經常使用的函數功能爲一個庫，諸如jQuery

javascriptfunction 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的緣由之一，在於不知道背後發生了什麼，即便是開源的，咱們也沒法瞭解真正的背後發生什麼了。對於不是這個工具、軟件的用戶來講，開源更多的意義可能在於咱們能夠添加新的功能，固然還有免費。若是沒有所謂的危機感，以及認爲本身一直在學習工具的話，能夠試着去打包本身的函數，打包本身的庫。

javascriptvar 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測試一下代碼。

bash$ ./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行添加一個分號。

最好的方法仍是閱讀別人的代碼，而所謂的別人指的是一些相對較大的網站的，有比較完善的開發流程，代碼質量也不會太差。而所謂的複雜的代碼都是一步步構建上去的，羅馬不是一天建成的。

有意思的是多數狀況下，咱們可能會用原型去開發咱們的應用，而這也是咱們須要去了解和掌握的地方，

javascriptfunction Calc(){

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

咱們彷佛在這裏展現了更多的Javascript的用法，可是這不是一好的關於Javascript的介紹，有一天咱們還要用諸如qunit之類的工具去爲咱們的function寫測試，這時就是一個更好的開始。

若是咱們樂意的話，咱們也能夠構建一個相似於jQuery的框架，以用來學習。

做爲一門編程語言來講，咱們學得很普通，在某種意義上來講算不上是一種入門。可是若是咱們能夠在其餘的好書在看到的內容，就沒有必要在這裏進行復述，目的在於一種學習習慣的養成。

CSS

CSS有時候頗有趣，可是有時候有不少咱們沒有意識到的用法，這裏以Bootstrap爲例，這是一個不錯的CSS庫。最使人興奮的是沒有閉源的CSS，沒有閉源的JS，這也就是前端好學習的地方所在了，不過這是一個開源的CSS庫，雖然是這樣叫的，可是稱之爲CSS庫顯然不合適。

cssa,
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這樣須要其餘條件來對元素應用樣式，用於已訪問的連接。
• 屬性選擇器,如a[href]這樣當a元素存在href這樣的屬性的時候來尋找應用元素。

其餘的還須要去好好了解的就是CSS的盒模型，做爲CSS的基石之一。

CSS盒模型圖

(ps:如下內容來自於Mozilla Developer NetWorks)

CSS下這些矩形盒子由標準盒模型描述。這個模型描述元素內容佔用空間。盒子有四個邊界：外邊距邊界margin edge, 邊框邊界border edge, 內邊距邊界padding edge 與 內容邊界content edge。

內容區域content area 是真正包含元素內容的區域。位於內容邊界的內部，它的大小爲內容寬度 或 content-box寬及內容高度或content-box高。

若是 box-sizing 爲默認值， width, min-width, max-width, height, min-height 與 max-height 控制內容大小。

內邊距區域padding area 用內容及可能的邊框之間的空白區域擴展內容區域。它位於內邊距邊界內部，一般有背景——顏色或圖片（不透明圖片蓋住背景顏色）. 它的大小爲 padding-box 寬與 padding-box 高。

內邊距與內容邊界之間的空間能夠由 padding-top, padding-right, padding-bottom, padding-left 和簡寫屬性 padding 控制。

邊框區域border area 是包含邊框的區域，擴展了內邊距區域。它位於邊框邊界內部，大小爲 border-box 寬和 border-box 高。由 border-width 及簡寫屬性 border控制。

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

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

在 外邊距合併 的狀況下，因爲盒之間共享外邊距，外邊距不容易弄清楚。

最後注意，對於行內非替換元素，其佔用空間（行高）由 line-height 決定，即便有內邊距與邊框。

諸如

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

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

筆記

寫博客彷佛是一個不錯的好習慣，做爲一個不是很優秀的寫手。對於來講，有時候發現原來能教會別人對於本身的能力來講算是一種確定。有些時候教會別人纔算是本身學會的表現，總會在項目上的時候須要本身去複述工做的一個過程，咱們須要整理好咱們的思路才能帶給別人更多的收穫。咱們的筆記上總會留下本身的學習的一些過程，有些時候咱們想要的只是一點點的鼓勵，有時是諸如評論一類，有時多是諸如訪問量。更多的多是咱們能夠從新整理本身的知識，好好複習一下，以便於好好記住，寫出來是一個好的過程。

無處不在的三劍客就這樣到了這裏，寫得彷佛不少也不多，可是仍是沒有作出來一個東西，因而咱們朝着這樣一個方向前進。

在線查看:一步步搭建物聯網系統

圖靈-電子書版一步步搭建物聯網系統