【51CTO專稿】Edge Code是一款輕量級(jí)的Web開發(fā)工具，它主要為Web前端開發(fā)者提供一個(gè)可以編寫HTML，CSS和JavaScript代碼的工具。2012年，Adobe向Web前端開發(fā)者發(fā)布了一個(gè)開源項(xiàng)目(MIT License)，名稱為Brackets，這個(gè)開源項(xiàng)目就是Edge Code這款工具的核心。Brackets由來自于Adobe和Web社區(qū)的眾多開發(fā)者共同在Github上維護(hù)的開源項(xiàng)目（https://github.com/adobe/brackets），Brackets這款開源的Web前端代碼編輯工具推出后，版本更迭的非常之快，短短6個(gè)月的時(shí)間，穩(wěn)定的更新Build達(dá)到了20個(gè)，圖1是Brackets工具的使用界面。

圖1.Brackets的使用界面

Brackets這個(gè)工具在某些功能上與一些已經(jīng)非常流行的前端開發(fā)工具類似，具備了代碼編輯，代碼高亮，關(guān)聯(lián)提示，文件結(jié)構(gòu)等很好用的功能。但是Brackets也有自己非常明顯的幾個(gè)特徵：

***，開源。這個(gè)工具的開源意味著前端的開發(fā)者可以深度定制這款工具為自己所用，從擴(kuò)展的插件到hack的功能都可以完全按照開發(fā)者不同的需求來定制。

第二，與瀏覽器可以實(shí)現(xiàn)Live Development同步，使用Brackets可以跟開發(fā)者的瀏覽器進(jìn)行實(shí)時(shí)開發(fā)同步，在Brackets上編輯的功能能即時(shí)的在瀏覽器端出現(xiàn)效果。

第三，簡(jiǎn)潔高效，Brackets沒有復(fù)雜的設(shè)定和UI，簡(jiǎn)潔的UI，高速的響應(yīng)，很少的資源占用，讓W(xué)eb開發(fā)者更有效率的進(jìn)行代碼編寫工作。

繼承了Brackets的這些特點(diǎn)，Adobe Edge Code在2012年下半年正式通過Adobe創(chuàng)意云發(fā)布了。

我們可以通過登錄Adobe Creative Cloud來獲取免費(fèi)的Edge Code工具，如圖2所示。

圖2. 登錄creative.adobe.com后在app欄目中可以找到EdgeCode

CreativeCloud會(huì)自動(dòng)檢測(cè)你登錄所使用的操作系統(tǒng)，從而提供對(duì)應(yīng)版本的EdgeCode。繼承了開源工具Brackets的特點(diǎn)，Edge Code這款工具擁有以下幾個(gè)最出色的功能：

***，高效的Quick Edit功能。在很多Web前端開發(fā)者傳統(tǒng)的代碼編寫過程中，修改一個(gè)Web頁(yè)面可以牽扯到對(duì)很多文件的修改，主要包括了html,css和js文件的改動(dòng)，通常這些修改都是按順序逐個(gè)的修改正確后，Web頁(yè)面才會(huì)呈現(xiàn)出修改后的效果，這種工作方式就變的容易出錯(cuò)。EdgeCode工具為了改善這種繁瑣的工作流程，提高代碼修改時(shí)的工作效率，引入了Quick Edit功能。接下來我們將關(guān)注如何在Edge Code中使用Quick Edit。首先，我們通過Edge Code的菜單File->Open Folder...選項(xiàng)打開一個(gè)要處理的html頁(yè)面所在的文件夾，Edge Code會(huì)在打開文件夾后在Edge Code左側(cè)顯示出該文件夾的文件結(jié)構(gòu)目錄，如圖3所示。

圖3. EdgeCode打開的一個(gè)本地網(wǎng)頁(yè)所在的文件夾

上圖中紅色框中的htdocs是選擇打開的文件夾，該文件夾下的Edge文件夾內(nèi)的index.html就是我們要示範(fàn)Quick Edit的目標(biāo)文件。單擊index.html文件，Edge Code會(huì)在右側(cè)打開此頁(yè)面的源代碼編輯環(huán)境，如圖4所示。圖4中紅色圓圈框中的箭頭表示編輯的是左側(cè)的哪一個(gè)文件。

圖4. EdgeCode進(jìn)行html代碼編輯的窗口界面

我們?cè)诰庉嫶a窗口中找到第66行，將div的class屬性值”hero-unit”選中，然後按快捷鍵CMD+E（Windows系統(tǒng)是Ctrl+E)，Edge Code將會(huì)在編輯區(qū)域出現(xiàn)一個(gè)有關(guān)”hero-unit”的內(nèi)置編輯器，將與”hero-unit”相關(guān)聯(lián)的文件和代碼顯示在其中，如圖5所見。

圖5 EdgeCode開啟代碼QuickEdit功能界面

我們通過在index.html中開啟Quick Edit功能，可以快速完成對(duì)于一個(gè)Web頁(yè)面中同樣元素在不同文件中的關(guān)聯(lián)編輯。上例，是我們?cè)趇ndex.html頁(yè)面中要對(duì)”hero-unit”的div class進(jìn)行修改，而QuickEdit找到了相關(guān)可以影響”hero-unit”類的css關(guān)聯(lián)文件，從而我們可以直接修改bootstrap.css等2個(gè)文件中對(duì)于hero-unit類的定義，而無需進(jìn)行額外的查找確認(rèn)等效率不高的操作。Edge Code的Quick Edit功能不僅僅可以對(duì)HTML,CSS,js代碼中的特定屬性，命名做統(tǒng)一的快速編輯，還可以提供CSS屬性的可視化快速編輯，比如色彩。接下來用Edge Code打開本文涉及的範(fàn)例里的bootstrap.min.css里的hero-unit類的background-color屬性值，選中十六進(jìn)制的色彩屬性值，用CMD+E開啟Quick Edit，會(huì)欣喜的發(fā)現(xiàn)，Edge Code在原有代碼下方顯示一個(gè)內(nèi)置的可視化色彩編輯工具，讓開發(fā)者可以輕松的在可視化環(huán)境下設(shè)定想要的數(shù)值。圖6顯示了Edge Code的Quick Edit開啟可視化色彩編輯的功能。

圖6. Edge Code Quick Edit功能下的CSS可視化編輯功能

#p#

第二，Edge Code具備了和瀏覽器同步的Live Development功能。與瀏覽器同步進(jìn)行Live Development是Edge Code的另一個(gè)特色功能。目前***的Edge Code是Preview 3的版本，它可以很好的同Google Chrome繼承實(shí)現(xiàn)HTML5的Live Development。Edge Code的Live Development主要體現(xiàn)在開發(fā)者在Edge Code里編輯的HTML和CSS代碼，要看到修改過的***效果，無需重新刷新頁(yè)面，所有針對(duì)修改的結(jié)果會(huì)同一時(shí)間動(dòng)態(tài)的顯示在瀏覽器中。下面，我們還是用本文中涉及到的範(fàn)例bootstrap.min.css來觀察Live Development。我們?cè)贓dge Code中將編輯環(huán)境轉(zhuǎn)換到index.html上，然後點(diǎn)擊Edge Code主界面右上角的“閃電”圖標(biāo)，Edge Code會(huì)啟動(dòng)（或重啟）Google Chrome瀏覽器，然后，index.html會(huì)顯示在瀏覽器中。 接著上一個(gè)Quick Edit修改css中.hero-unit類的background-color屬性值的例子，我們?cè)贓dge Code中對(duì)bootstrap.min.css中的.hero-unit的background-color屬性開啟Quick Edit功能，如果我們還未更改任何背景色彩，我們其實(shí)已經(jīng)可以看到Google Chrome隨著我們?cè)贓dge Code中對(duì).hero-unit類所定義的div區(qū)域已經(jīng)被一個(gè)藍(lán)色線框選中，這其實(shí)已經(jīng)證明Google Chrome和Edge Code啟動(dòng)了Live Development的同步功能。隨著我們對(duì)background-color屬性的更改，會(huì)很明顯的看到Google Chrome中對(duì)應(yīng).hero-unit類的div區(qū)域的背景色彩發(fā)生了即時(shí)的變化。恭喜，我們已經(jīng)很輕鬆的用到了Edge Code的Live Development功能，圖7就是Live Development啟動(dòng)的截圖。

圖7. Edge Code和Google Chrome瀏覽器啟用同步Live Development功能

上圖中的紅色圓圈選中的閃電圖標(biāo)就是啟用Edge Code的Live Development功能選項(xiàng)，紅色箭頭則是表示在Edge Code中對(duì)CSS屬性進(jìn)行修改，對(duì)應(yīng)瀏覽器頁(yè)面會(huì)即時(shí)發(fā)生變化。

接下來我們要談的一個(gè)重要功能是屬于Edge Code特有的，也是Adobe為Edge Code這款工具整合的一個(gè)Creative Cloud上的云服務(wù)，就是Edge Code的Web Font功能。我們知道HTML5和CSS3的有一個(gè)***的功能就是在指定字體時(shí)，可以指定特定網(wǎng)絡(luò)上的某種字體作為頁(yè)面某些元素的字體樣式。而Edge Web Font服務(wù)是Adobe將2012年收購(gòu)的TypeKit的字體庫(kù)和開放Google Web Fonts庫(kù)做了統(tǒng)一整合后，嵌入在Edge Code中的一項(xiàng)擴(kuò)展。接下來我們用本文用到的示例來完成對(duì)Edge Web Font的使用演示。首先，我們用Edge Code打開index.html文件，在第69行為<p>這個(gè)HTML標(biāo)簽添加一個(gè)class屬性，如圖8所示。

圖8. Edge Code中為HTML中的文字段落添加class設(shè)定

接著我們用Edge Code打開css目錄下的main.css，加入對(duì)mycustomfont定義，這裡的重點(diǎn)是，當(dāng)我們?yōu)閙ycustomfont定義font-family屬性時(shí)，Edge Code會(huì)出現(xiàn)一個(gè)可以選擇字體的樣式列表，其中最下面的一個(gè)選項(xiàng)Browse Web Fonts...則是瀏覽云服務(wù)上的Web Font樣式，如圖9所示。

圖9. 在Edge Code中通過Browse Web Fonts...選擇云服務(wù)提供的字體

點(diǎn)選Browse Web Fonts...選項(xiàng)后，Edge Code Web Fonts窗口就會(huì)出現(xiàn)，里面羅列了所有可用的網(wǎng)絡(luò)字體，在選擇一個(gè)字體后，點(diǎn)擊Done來完成。圖10是Adobe Edge Web Fonts選擇窗口。

圖10. Edge Code中Adobe Edge Web Fonts選擇界面

在確定Web Font的選擇后，我們點(diǎn)擊Edge Code右上角閃電圖標(biāo)右側(cè)的”Wf”字樣的圖標(biāo)，Edge Code會(huì)出現(xiàn)圖11的窗口。

圖11. Adobe Edge Web Fonts的調(diào)用代碼

按照?qǐng)D11中的描述要求，我們將選中的兩段JavaScript代碼拷貝至index.html中，如圖12所示。

圖12. 將Web Fonts的調(diào)用腳本嵌入到index.html中

在完成這些操作后，點(diǎn)擊Edge Code右上角的閃電圖標(biāo)，開啟瀏覽器的Live view，就會(huì)看到被mycustomfont樣式指定的文本字體發(fā)生了變化。圖13，是使用Web Fonts后的樣式。

圖13. Edge Web Fonts被調(diào)用后網(wǎng)頁(yè)顯示形式

Adobe Edge Code除了上述幾個(gè)最重要的核心功能外，還具備很多細(xì)微體貼的小功能，隨著各位深入地使用此款工具，就會(huì)發(fā)現(xiàn)越來越多的欣喜。

關(guān)于Adobe Edge Code以及Brackets開源項(xiàng)目的更多信息，你可以訪問下列資源站點(diǎn)：

•  http://html.adobe.com/edge/code/

•  http://blog.brackets.io/

  關(guān)于本教程使用的sample范例文件，可以訪問www.initializr.com網(wǎng)站，通過在線點(diǎn)擊pre-configuration的Bootstrap選項(xiàng)直接生成。