資訊專欄INFORMATION COLUMN
摘要：無處不在的三劍客這時我們終于了解了我們的三劍客，他們也就這么可以結合到一起了，是這一切的基礎。無處不在的三劍客就這樣到了這里，寫得似乎很多也很少，但是還是沒有做出來一個東西，于是我們朝著這樣一個方向前進。
無處不在的三劍客
這時我們終于了解了我們的三劍客，他們也就這么可以結合到一起了，HTML+Javascript+CSS是這一切的基礎。而我們用到的其他語言如PHP、Python、Ruby等等到最后都會變成上面的結果，當然還有Coffeescript之類的語言都是以此為基礎，這才是我們需要的知識。
Hello,Geek有了一些些基礎之后，我們終于能試著去寫一些程序了。也是時候去創建一個像樣的東西，或許你在一些界面設計方面的書籍看過類似的東西，可能我寫得也沒有那些內容好，只是這些都是一些過程。過去我們都是一點點慢慢過來的，只是現在我們也是如此，技術上的一些東西，事實上大家都是知道的。就好比我們都覺得我們可以開個超市，但是如果讓我們去開超市的話，我們并不一定能賺錢。
學習編程的目的可能不在于我們能找到一份工作，那只是在編程之外的東西，雖然確實也是很確定的。但是除此之處，有些東西也是很重要的。
過去總是不理解為什么會一些人會不厭其煩地去回答別人的問題，有時候可能會想是一種能力越大責任越大的感覺，但是有時候在寫一些博客或者回答別人的問題的時候我們又重新思考了這些問題，又重新學習了這些技能。所以這里可能說的不是關于編程的東西而是一些編程以外的東西，關于學習或者學習以外的東西。
從源碼學習過去總覺得學了一種語言的語法便算是學會了一種語言，直到有一天接觸運用該語言的項目的時候，雖然也會寫上幾行代碼，但是卻不像這種語言的風格。于是這也是這一篇的意義所在了：
瀏覽器渲染過程基本的渲染引擎的過程如下圖所示:
解析HTML去構建DOM樹
渲染樹形結構
生成渲染的樹形圖布局
繪制樹形圖
對于Webkit瀏覽器來說，他的過程如下所示:
HTML寫好HTML的一個要點在于讀別人寫的代碼，這只是一方面，我們所說的HTML方面的內容可能不夠多，原因有很多，很多東西都需要在實戰中去解決。讀萬卷書和行萬里路，分不清哪個有重要的意義，但是如果可以同時做好兩個的話，成長會更快的。
寫好HTML應該會有下面的要點
了解標準及遵守絕大多數標準
注重可讀性，從ID及CLASS的命名
關注SEO與代碼的聯系
或許在這方面我也算不上很了解，不過按筆者的經驗來說，大致就是如此。
多數情況下我們的HTML是類似于下面這樣子的
html{% nevercache %} {% include "includes/user_panel.html" %} {% endnevercache %}{% block right_panel %} {% ifinstalled mezzanine.twitter %} {% include "twitter/tweets.html" %} {% endifinstalled %} {% endblock %}
換句話說HTML只是基礎，而不是日常用到的。我們的HTML是由template生成的，我們可以借助于mustache.js又或者是angluarjs之類的js庫來生成最后的HTML，所以這里只是一個開始。
還需要了解的一部分就是HTML的另外一個重要的部分，DOM樹形結構
DOM樹形結構圖javascriptDOM是文檔對象化模型（Document Object Model）的簡稱。DOM Tree是指通過DOM將HTML頁面進行解析，并生成的HTML tree樹狀結構和對應訪問方法。
這里以未壓縮的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的框架，以用來學習。
作為一門編程語言來說，我們學得很普通，在某種意義上來說算不上是一種入門。但是如果我們可以在其他的好書在看到的內容，就沒有必要在這里進行復述，目的在于一種學習習慣的養成。
CSSCSS有時候很有趣，但是有時候有很多我們沒有意識到的用法，這里以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對于子選擇器的影響一樣值得注意得多。
筆記寫博客似乎是一個不錯的好習慣，作為一個不是很優秀的寫手。對于來說，有時候發現原來能教會別人對于自己的能力來說算是一種肯定。有些時候教會別人才算是自己學會的表現，總會在項目上的時候需要自己去復述工作的一個過程，我們需要整理好我們的思路才能帶給別人更多的收獲。我們的筆記上總會留下自己的學習的一些過程，有些時候我們想要的只是一點點的鼓勵，有時是諸如評論一類，有時可能是諸如訪問量。更多的可能是我們可以重新整理自己的知識，好好復習一下，以便于好好記住，寫出來是一個好的過程。
無處不在的三劍客就這樣到了這里，寫得似乎很多也很少，但是還是沒有做出來一個東西，于是我們朝著這樣一個方向前進。
在線查看:一步步搭建物聯網系統
圖靈-電子書版一步步搭建物聯網系統
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91453.html
摘要：與類選擇器最常一起出現的是選擇器，不過這個適用于比較高級的場合，諸如用控制的時候就需要用到選擇器。在線查看一步步搭建物聯網系統圖靈電子書版一步步搭建物聯網系統 無處不在的CSS 或許你覺得CSS一點兒也不重要，而事實上，如果說HTML是建筑的框架，CSS就是房子的裝修。那么Javascript呢，我聽到的最有趣的說法是小三——還是先讓我們回到代碼上來吧。 CSS 下面就是我們之前...
摘要：與類選擇器最常一起出現的是選擇器，不過這個適用于比較高級的場合，諸如用控制的時候就需要用到選擇器。在線查看一步步搭建物聯網系統圖靈電子書版一步步搭建物聯網系統 無處不在的CSS 或許你覺得CSS一點兒也不重要，而事實上，如果說HTML是建筑的框架，CSS就是房子的裝修。那么Javascript呢，我聽到的最有趣的說法是小三——還是先讓我們回到代碼上來吧。 CSS 下面就是我們之前...
摘要：也可以補充好之前在這個最小物聯網系統缺失的那些東西，給那些正在開始試圖去解決編程問題的人。在線查看一步步搭建物聯網系統圖靈電子書版一步步搭建物聯網系統 某一天，正走在回學校的路上的我突然想到：未來將會是一個科技的時代——雖然現在也是——只是在未來，科技將會無處不在。如果我們依舊對周圍這些無處不在的代碼一無所知的話，或許我們會成為黑客帝國之中被控制的普通人。于是開始想著，有一天人們會像學...
摘要：也可以補充好之前在這個最小物聯網系統缺失的那些東西，給那些正在開始試圖去解決編程問題的人。在線查看一步步搭建物聯網系統圖靈電子書版一步步搭建物聯網系統 某一天，正走在回學校的路上的我突然想到：未來將會是一個科技的時代——雖然現在也是——只是在未來，科技將會無處不在。如果我們依舊對周圍這些無處不在的代碼一無所知的話，或許我們會成為黑客帝國之中被控制的普通人。于是開始想著，有一天人們會像學...
閱讀 964·2023-04-26 02:56
閱讀 9437·2021-11-23 09:51
閱讀 1850·2021-09-26 10:14
閱讀 2980·2019-08-29 13:09
閱讀 2154·2019-08-26 13:29
閱讀 571·2019-08-26 12:02
閱讀 3562·2019-08-26 10:42
閱讀 3000·2019-08-23 18:18
