資訊專(zhuān)欄INFORMATION COLUMN
摘要：無(wú)處不在的三劍客這時(shí)我們終于了解了我們的三劍客，他們也就這么可以結(jié)合到一起了，是這一切的基礎(chǔ)。無(wú)處不在的三劍客就這樣到了這里，寫(xiě)得似乎很多也很少，但是還是沒(méi)有做出來(lái)一個(gè)東西，于是我們朝著這樣一個(gè)方向前進(jìn)。
無(wú)處不在的三劍客
這時(shí)我們終于了解了我們的三劍客，他們也就這么可以結(jié)合到一起了，HTML+Javascript+CSS是這一切的基礎(chǔ)。而我們用到的其他語(yǔ)言如PHP、Python、Ruby等等到最后都會(huì)變成上面的結(jié)果，當(dāng)然還有Coffeescript之類(lèi)的語(yǔ)言都是以此為基礎(chǔ)，這才是我們需要的知識(shí)。
Hello,Geek有了一些些基礎(chǔ)之后，我們終于能試著去寫(xiě)一些程序了。也是時(shí)候去創(chuàng)建一個(gè)像樣的東西，或許你在一些界面設(shè)計(jì)方面的書(shū)籍看過(guò)類(lèi)似的東西，可能我寫(xiě)得也沒(méi)有那些內(nèi)容好，只是這些都是一些過(guò)程。過(guò)去我們都是一點(diǎn)點(diǎn)慢慢過(guò)來(lái)的，只是現(xiàn)在我們也是如此，技術(shù)上的一些東西，事實(shí)上大家都是知道的。就好比我們都覺(jué)得我們可以開(kāi)個(gè)超市，但是如果讓我們?nèi)ラ_(kāi)超市的話(huà)，我們并不一定能賺錢(qián)。
學(xué)習(xí)編程的目的可能不在于我們能找到一份工作，那只是在編程之外的東西，雖然確實(shí)也是很確定的。但是除此之處，有些東西也是很重要的。
過(guò)去總是不理解為什么會(huì)一些人會(huì)不厭其煩地去回答別人的問(wèn)題，有時(shí)候可能會(huì)想是一種能力越大責(zé)任越大的感覺(jué)，但是有時(shí)候在寫(xiě)一些博客或者回答別人的問(wèn)題的時(shí)候我們又重新思考了這些問(wèn)題，又重新學(xué)習(xí)了這些技能。所以這里可能說(shuō)的不是關(guān)于編程的東西而是一些編程以外的東西，關(guān)于學(xué)習(xí)或者學(xué)習(xí)以外的東西。
從源碼學(xué)習(xí)過(guò)去總覺(jué)得學(xué)了一種語(yǔ)言的語(yǔ)法便算是學(xué)會(huì)了一種語(yǔ)言，直到有一天接觸運(yùn)用該語(yǔ)言的項(xiàng)目的時(shí)候，雖然也會(huì)寫(xiě)上幾行代碼，但是卻不像這種語(yǔ)言的風(fēng)格。于是這也是這一篇的意義所在了：
瀏覽器渲染過(guò)程基本的渲染引擎的過(guò)程如下圖所示:
解析HTML去構(gòu)建DOM樹(shù)
渲染樹(shù)形結(jié)構(gòu)
生成渲染的樹(shù)形圖布局
繪制樹(shù)形圖
對(duì)于Webkit瀏覽器來(lái)說(shuō)，他的過(guò)程如下所示:
HTML寫(xiě)好HTML的一個(gè)要點(diǎn)在于讀別人寫(xiě)的代碼，這只是一方面，我們所說(shuō)的HTML方面的內(nèi)容可能不夠多，原因有很多，很多東西都需要在實(shí)戰(zhàn)中去解決。讀萬(wàn)卷書(shū)和行萬(wàn)里路，分不清哪個(gè)有重要的意義，但是如果可以同時(shí)做好兩個(gè)的話(huà)，成長(zhǎng)會(huì)更快的。
寫(xiě)好HTML應(yīng)該會(huì)有下面的要點(diǎn)
了解標(biāo)準(zhǔn)及遵守絕大多數(shù)標(biāo)準(zhǔn)
注重可讀性，從ID及CLASS的命名
關(guān)注SEO與代碼的聯(lián)系
或許在這方面我也算不上很了解，不過(guò)按筆者的經(jīng)驗(yàn)來(lái)說(shuō)，大致就是如此。
多數(shù)情況下我們的HTML是類(lèi)似于下面這樣子的
html{% nevercache %} {% include "includes/user_panel.html" %} {% endnevercache %}{% block right_panel %} {% ifinstalled mezzanine.twitter %} {% include "twitter/tweets.html" %} {% endifinstalled %} {% endblock %}
換句話(huà)說(shuō)HTML只是基礎(chǔ)，而不是日常用到的。我們的HTML是由template生成的，我們可以借助于mustache.js又或者是angluarjs之類(lèi)的js庫(kù)來(lái)生成最后的HTML，所以這里只是一個(gè)開(kāi)始。
還需要了解的一部分就是HTML的另外一個(gè)重要的部分，DOM樹(shù)形結(jié)構(gòu)
DOM樹(shù)形結(jié)構(gòu)圖javascriptDOM是文檔對(duì)象化模型（Document Object Model）的簡(jiǎn)稱(chēng)。DOM Tree是指通過(guò)DOM將HTML頁(yè)面進(jìn)行解析，并生成的HTML tree樹(shù)狀結(jié)構(gòu)和對(duì)應(yīng)訪問(wèn)方法。
這里以未壓縮的jQuery源碼和zepto.js作一個(gè)小小的比較，zepto.js是兼容jQuery的，因此我們舉幾個(gè)有意思的函數(shù)作一簡(jiǎn)單的比較，關(guān)于源碼可以在官網(wǎng)上下載到。
在zepto.js下面判斷一個(gè)值是否是函數(shù)的方面如下，
javascriptfunction isFunction(value) { return type(value) == "function" }
而在jQuery下面則是這樣的
javascriptisFunction: function( obj ) {
return jQuery.type(obj) === "function";
}
而他們的用法是一樣的，都是
javascript$.isFunction();
jQuery的作法是將諸如isFunction,isArray這些函數(shù)打包到j(luò)Query.extend中，而zepto.js的也是這樣的，只不過(guò)多了一行
javascript$.isFunction = isFunction
遺憾的是我也沒(méi)去了解過(guò)為什么，之前我也沒(méi)有看過(guò)這些庫(kù)的代碼，所以這個(gè)問(wèn)題就要交給讀者去解決了。jQuery里面提供了函數(shù)式編程接口，不過(guò)jQuery更多的是構(gòu)建于CSS選擇器之上，對(duì)于DOM的操作比javascript自身提供的功能強(qiáng)大得多。如果我們的目的在于更好的編程，那么可能需要諸如Underscore.js之類(lèi)的庫(kù)?；蛟S說(shuō)打包自己常用的函數(shù)功能為一個(gè)庫(kù)，諸如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" }
我們需要去了解一些故事背后的原因，越來(lái)越害怕GUI的原因之一，在于不知道背后發(fā)生了什么，即使是開(kāi)源的，我們也無(wú)法了解真正的背后發(fā)生什么了。對(duì)于不是這個(gè)工具、軟件的用戶(hù)來(lái)說(shuō)，開(kāi)源更多的意義可能在于我們可以添加新的功能，當(dāng)然還有免費(fèi)。如果沒(méi)有所謂的危機(jī)感，以及認(rèn)為自己一直在學(xué)習(xí)工具的話(huà)，可以試著去打包自己的函數(shù)，打包自己的庫(kù)。
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測(cè)試一下代碼。
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行添加一個(gè)分號(hào)。
最好的方法還是閱讀別人的代碼，而所謂的別人指的是一些相對(duì)較大的網(wǎng)站的，有比較完善的開(kāi)發(fā)流程，代碼質(zhì)量也不會(huì)太差。而所謂的復(fù)雜的代碼都是一步步構(gòu)建上去的，羅馬不是一天建成的。
有意思的是多數(shù)情況下，我們可能會(huì)用原型去開(kāi)發(fā)我們的應(yīng)用，而這也是我們需要去了解和掌握的地方，
javascriptfunction Calc(){
}
Calc.prototype.add=function(a,b){
return a+b;
};
Calc.prototype.sub=function(a,b){
return a-b;
};
我們似乎在這里展示了更多的Javascript的用法，但是這不是一好的關(guān)于Javascript的介紹，有一天我們還要用諸如qunit之類(lèi)的工具去為我們的function寫(xiě)測(cè)試，這時(shí)就是一個(gè)更好的開(kāi)始。
如果我們樂(lè)意的話(huà)，我們也可以構(gòu)建一個(gè)類(lèi)似于jQuery的框架，以用來(lái)學(xué)習(xí)。
作為一門(mén)編程語(yǔ)言來(lái)說(shuō)，我們學(xué)得很普通，在某種意義上來(lái)說(shuō)算不上是一種入門(mén)。但是如果我們可以在其他的好書(shū)在看到的內(nèi)容，就沒(méi)有必要在這里進(jìn)行復(fù)述，目的在于一種學(xué)習(xí)習(xí)慣的養(yǎng)成。
CSSCSS有時(shí)候很有趣，但是有時(shí)候有很多我們沒(méi)有意識(shí)到的用法，這里以Bootstrap為例，這是一個(gè)不錯(cuò)的CSS庫(kù)。最令人興奮的是沒(méi)有閉源的CSS，沒(méi)有閉源的JS，這也就是前端好學(xué)習(xí)的地方所在了，不過(guò)這是一個(gè)開(kāi)源的CSS庫(kù)，雖然是這樣叫的，但是稱(chēng)之為CSS庫(kù)顯然不合適。
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用法。
偽類(lèi)選擇器,如a:visited這樣需要其他條件來(lái)對(duì)元素應(yīng)用樣式，用于已訪問(wèn)的鏈接。
屬性選擇器,如a[href]這樣當(dāng)a元素存在href這樣的屬性的時(shí)候來(lái)尋找應(yīng)用元素。
其他的還需要去好好了解的就是CSS的盒模型，作為CSS的基石之一。
CSS盒模型圖(ps:以下內(nèi)容來(lái)自于Mozilla Developer NetWorks)
CSS下這些矩形盒子由標(biāo)準(zhǔn)盒模型描述。這個(gè)模型描述元素內(nèi)容占用空間。盒子有四個(gè)邊界：外邊距邊界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ū)域擴(kuò)展內(nèi)容區(qū)域。它位于內(nèi)邊距邊界內(nèi)部，通常有背景——顏色或圖片（不透明圖片蓋住背景顏色）. 它的大小為 padding-box 寬與 padding-box 高。
內(nèi)邊距與內(nèi)容邊界之間的空間可以由 padding-top, padding-right, padding-bottom, padding-left 和簡(jiǎn)寫(xiě)屬性 padding 控制。
邊框區(qū)域border area 是包含邊框的區(qū)域，擴(kuò)展了內(nèi)邊距區(qū)域。它位于邊框邊界內(nèi)部，大小為 border-box 寬和 border-box 高。由 border-width 及簡(jiǎn)寫(xiě)屬性 border控制。
外邊距區(qū)域margin area用空白區(qū)域擴(kuò)展邊框區(qū)域，以分開(kāi)相鄰的元素。它的大小為 margin-box 的高寬。
外邊距區(qū)域大小由 margin-top, margin-right, margin-bottom, margin-left 及簡(jiǎn)寫(xiě)屬性 margin 控制。
在 外邊距合并 的情況下，由于盒之間共享外邊距，外邊距不容易弄清楚。
最后注意，對(duì)于行內(nèi)非替換元素，其占用空間（行高）由 line-height 決定，即使有內(nèi)邊距與邊框。
諸如
css* {
margin: 0px;
padding: 0px;
font-family: Helvetica;
}
這樣的通用器用來(lái)進(jìn)行全局選擇的工具和我們用于抵消某個(gè)body對(duì)于子選擇器的影響一樣值得注意得多。
筆記寫(xiě)博客似乎是一個(gè)不錯(cuò)的好習(xí)慣，作為一個(gè)不是很優(yōu)秀的寫(xiě)手。對(duì)于來(lái)說(shuō)，有時(shí)候發(fā)現(xiàn)原來(lái)能教會(huì)別人對(duì)于自己的能力來(lái)說(shuō)算是一種肯定。有些時(shí)候教會(huì)別人才算是自己學(xué)會(huì)的表現(xiàn)，總會(huì)在項(xiàng)目上的時(shí)候需要自己去復(fù)述工作的一個(gè)過(guò)程，我們需要整理好我們的思路才能帶給別人更多的收獲。我們的筆記上總會(huì)留下自己的學(xué)習(xí)的一些過(guò)程，有些時(shí)候我們想要的只是一點(diǎn)點(diǎn)的鼓勵(lì)，有時(shí)是諸如評(píng)論一類(lèi)，有時(shí)可能是諸如訪問(wèn)量。更多的可能是我們可以重新整理自己的知識(shí)，好好復(fù)習(xí)一下，以便于好好記住，寫(xiě)出來(lái)是一個(gè)好的過(guò)程。
無(wú)處不在的三劍客就這樣到了這里，寫(xiě)得似乎很多也很少，但是還是沒(méi)有做出來(lái)一個(gè)東西，于是我們朝著這樣一個(gè)方向前進(jìn)。
在線查看:一步步搭建物聯(lián)網(wǎng)系統(tǒng)
圖靈-電子書(shū)版一步步搭建物聯(lián)網(wǎng)系統(tǒng)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91453.html
摘要：與類(lèi)選擇器最常一起出現(xiàn)的是選擇器，不過(guò)這個(gè)適用于比較高級(jí)的場(chǎng)合，諸如用控制的時(shí)候就需要用到選擇器。在線查看一步步搭建物聯(lián)網(wǎng)系統(tǒng)圖靈電子書(shū)版一步步搭建物聯(lián)網(wǎng)系統(tǒng) 無(wú)處不在的CSS 或許你覺(jué)得CSS一點(diǎn)兒也不重要，而事實(shí)上，如果說(shuō)HTML是建筑的框架，CSS就是房子的裝修。那么Javascript呢，我聽(tīng)到的最有趣的說(shuō)法是小三——還是先讓我們回到代碼上來(lái)吧。 CSS 下面就是我們之前...
摘要：與類(lèi)選擇器最常一起出現(xiàn)的是選擇器，不過(guò)這個(gè)適用于比較高級(jí)的場(chǎng)合，諸如用控制的時(shí)候就需要用到選擇器。在線查看一步步搭建物聯(lián)網(wǎng)系統(tǒng)圖靈電子書(shū)版一步步搭建物聯(lián)網(wǎng)系統(tǒng) 無(wú)處不在的CSS 或許你覺(jué)得CSS一點(diǎn)兒也不重要，而事實(shí)上，如果說(shuō)HTML是建筑的框架，CSS就是房子的裝修。那么Javascript呢，我聽(tīng)到的最有趣的說(shuō)法是小三——還是先讓我們回到代碼上來(lái)吧。 CSS 下面就是我們之前...
摘要：也可以補(bǔ)充好之前在這個(gè)最小物聯(lián)網(wǎng)系統(tǒng)缺失的那些東西，給那些正在開(kāi)始試圖去解決編程問(wèn)題的人。在線查看一步步搭建物聯(lián)網(wǎng)系統(tǒng)圖靈電子書(shū)版一步步搭建物聯(lián)網(wǎng)系統(tǒng) 某一天，正走在回學(xué)校的路上的我突然想到：未來(lái)將會(huì)是一個(gè)科技的時(shí)代——雖然現(xiàn)在也是——只是在未來(lái)，科技將會(huì)無(wú)處不在。如果我們依舊對(duì)周?chē)@些無(wú)處不在的代碼一無(wú)所知的話(huà)，或許我們會(huì)成為黑客帝國(guó)之中被控制的普通人。于是開(kāi)始想著，有一天人們會(huì)像學(xué)...
摘要：也可以補(bǔ)充好之前在這個(gè)最小物聯(lián)網(wǎng)系統(tǒng)缺失的那些東西，給那些正在開(kāi)始試圖去解決編程問(wèn)題的人。在線查看一步步搭建物聯(lián)網(wǎng)系統(tǒng)圖靈電子書(shū)版一步步搭建物聯(lián)網(wǎng)系統(tǒng) 某一天，正走在回學(xué)校的路上的我突然想到：未來(lái)將會(huì)是一個(gè)科技的時(shí)代——雖然現(xiàn)在也是——只是在未來(lái)，科技將會(huì)無(wú)處不在。如果我們依舊對(duì)周?chē)@些無(wú)處不在的代碼一無(wú)所知的話(huà)，或許我們會(huì)成為黑客帝國(guó)之中被控制的普通人。于是開(kāi)始想著，有一天人們會(huì)像學(xué)...
閱讀 1018·2023-04-26 02:56
閱讀 14589·2021-11-23 09:51
閱讀 1916·2021-09-26 10:14
閱讀 3022·2019-08-29 13:09
閱讀 2182·2019-08-26 13:29
閱讀 596·2019-08-26 12:02
閱讀 3594·2019-08-26 10:42
閱讀 3030·2019-08-23 18:18
