前端開(kāi)發(fā)工具在短短幾年內(nèi)取得了長(zhǎng)足的進(jìn)步。隨著技術(shù)的進(jìn)步，我們可以利用經(jīng)過(guò)高度測(cè)試的庫(kù)來(lái)改進(jìn)我們的工作流程，并實(shí)現(xiàn)響應(yīng)性web應(yīng)用程序設(shè)計(jì)。有很多前端開(kāi)發(fā)工具來(lái)創(chuàng)建出色的web應(yīng)用程序。

1. Sublime Text

它是一流的前端代碼編輯器，擁有精心設(shè)計(jì)、超高效、超快速的用戶(hù)界面。有許多工具可以做得很好，但是最好的(也是最流行的)工具可能是Sublime Text。

由一個(gè)人的開(kāi)發(fā)團(tuán)隊(duì)管理，Sublime成功的秘密在于該程序廣泛的鍵盤(pán)快捷鍵，如同時(shí)更改(對(duì)多個(gè)選定區(qū)域進(jìn)行相同的交互式更改)和快速導(dǎo)航、文件、符號(hào)和線條的能力。而當(dāng)你每天和編輯在一起的時(shí)間超過(guò)8個(gè)小時(shí)的時(shí)候，這些為每個(gè)流程節(jié)省下來(lái)的寶貴的幾秒鐘真的累加起來(lái)了。

2. Chrome Developer Tools

如果你可以實(shí)時(shí)編輯你的HTML和CSS，或者在查看網(wǎng)站性能的深入分析時(shí)調(diào)試你的JavaScript，這不是很好嗎？

內(nèi)置的Chrome Developer Tools讓你這么做。它們組合在一起，可以在Chrome和Safari中使用，允許開(kāi)發(fā)人員訪問(wèn)其web應(yīng)用程序的內(nèi)部組件。除此之外，網(wǎng)絡(luò)工具集可以幫助你優(yōu)化提要，而時(shí)間線可以讓你更好地了解瀏覽器在給定時(shí)間正在做什么。

3.jQuery

JavaScript長(zhǎng)期以來(lái)一直被開(kāi)發(fā)人員視為一種關(guān)鍵的前端語(yǔ)言，盡管它并非沒(méi)有問(wèn)題:充斥著瀏覽器的不一致性，其有點(diǎn)復(fù)雜和難以理解的語(yǔ)法意味著功能經(jīng)常受到影響。

直到2006年jQuery一個(gè)快速、小型和多平臺(tái)的JavaScript庫(kù)出現(xiàn)了，它簡(jiǎn)化了前端流程。通過(guò)忽略通常由開(kāi)發(fā)人員決定的許多功能，jQuery允許你創(chuàng)建動(dòng)畫(huà)、添加插件，甚至導(dǎo)航文檔。

4. GitHub

對(duì)于任何開(kāi)發(fā)人員來(lái)說(shuō)，最糟糕的事情莫過(guò)于你正在開(kāi)發(fā)一個(gè)新的項(xiàng)目特性，卻搞砸了。進(jìn)入版本控制系統(tǒng)（VCS），更具體地說(shuō)，進(jìn)入GitHub。

通過(guò)將你的項(xiàng)目與服務(wù)一起部署，你可以看到你所做的所有更改，甚至可以恢復(fù)到以前的狀態(tài)。存儲(chǔ)庫(kù)托管服務(wù)還有一個(gè)豐富的開(kāi)源開(kāi)發(fā)社區(qū)（促進(jìn)團(tuán)隊(duì)協(xié)作）和其他幾個(gè)組件，如每個(gè)項(xiàng)目的功能請(qǐng)求、錯(cuò)誤跟蹤、任務(wù)管理和Wiki。

5. Twitter Bootstrap

你是否厭倦了為一個(gè)容器輸入相同的樣式？這個(gè)持續(xù)彈出的按鈕呢？一旦你開(kāi)始創(chuàng)建常規(guī)的前端應(yīng)用程序，你會(huì)注意到同樣的趨勢(shì)。用戶(hù)界面框架試圖通過(guò)將公共元素提取到可重用模塊中來(lái)解決這些問(wèn)題，這意味著開(kāi)發(fā)人員可以快速輕松地構(gòu)建新的應(yīng)用程序。

這些框架中最常用的是Bootstrap，這是Twitter團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)完整的用戶(hù)界面包。使用標(biāo)準(zhǔn)化樣式表、構(gòu)建模態(tài)對(duì)象、添加JavaScript插件和大量其他特性的工具，Bootstrap可以顯著減少構(gòu)建項(xiàng)目所需的代碼量(和時(shí)間)。

6.Angular.js

HTML通常是前端開(kāi)發(fā)人員工具箱的基石，但它有一個(gè)許多人認(rèn)為的嚴(yán)重缺陷:它不是為處理動(dòng)態(tài)視圖而設(shè)計(jì)的。

這就是開(kāi)源web應(yīng)用框架AngularJS的用武之地。由谷歌開(kāi)發(fā)，AngularJS允許你擴(kuò)展應(yīng)用程序的HTML語(yǔ)法，提供一個(gè)更具表現(xiàn)力、可讀性更強(qiáng)、開(kāi)發(fā)速度更快的環(huán)境，這是單靠HTML無(wú)法構(gòu)建的。

該項(xiàng)目并非沒(méi)有批評(píng)：一些人認(rèn)為這種類(lèi)型的數(shù)據(jù)鏈接會(huì)產(chǎn)生混亂且不獨(dú)立的代碼，但我們?nèi)匀徽J(rèn)為這是前端開(kāi)發(fā)工具包中的一項(xiàng)寶貴技能。

7. SaSS

這是一個(gè)工具，它將幫助你編寫(xiě)可維護(hù)和持久的代碼，同時(shí)減少你需要編寫(xiě)的CSS數(shù)量。

SaSS是一個(gè)為期八年的開(kāi)源項(xiàng)目，實(shí)際上定義了現(xiàn)代CSS預(yù)處理程序的種類(lèi)。雖然一開(kāi)始很難理解，但Sass變量、嵌套和mixins的組合將使CSS在編譯過(guò)程中變得簡(jiǎn)單，這意味著你的樣式表將更具可讀性。

總結(jié):

這些流行的前端web應(yīng)用程序開(kāi)發(fā)工具，開(kāi)發(fā)者和企業(yè)都應(yīng)該非常了解。利用這些工具可以提高開(kāi)發(fā)效率，節(jié)省開(kāi)發(fā)時(shí)間。