這里給大家介紹一個個人認(rèn)為最好用的web開發(fā)工具：Hbuilder。

HBuilder是DCloud推出的一款支持HTML5的Web開發(fā)IDE?？?#xff0c;是HBuilder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發(fā)效率。同時，它還包括最全面的語法庫和瀏覽器兼容性數(shù)據(jù)。

從Frontpage、Dreamweaver、UE，到Sublime Text和JetBrains的WebStorm，Web編程的IDE已經(jīng)更換了幾批。HBuilder是DCloud（數(shù)字天堂）推出一款支持HTML5的Web開發(fā)IDE?！翱?#xff0c;是HBuilder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊及很多配套，HBuilder能大幅提升HTML、js、css的開發(fā)效率?！眴柕紿Builder的優(yōu)勢時，DCloud CEO王安表示。

在HBuilder里預(yù)置了一個hello HBuilder的工程，用戶敲這幾十行代碼后會發(fā)現(xiàn)，HBuilder比其他開發(fā)工具至少快5倍?！白钊臑g覽器兼容性數(shù)據(jù)、開發(fā)手機(jī)App等很多特點(diǎn)也都是HBuilder強(qiáng)于競品的地方”，王安表示。

以“快”為核心的HBuilder，引入了“快捷鍵語法”的概念，巧妙地解決了困擾許多開發(fā)者的快捷鍵過多而記不住的問題。開發(fā)者只需要記住幾條語法，就可以快速實現(xiàn)跳轉(zhuǎn)、轉(zhuǎn)義和其他操作。比如alt+[是跳轉(zhuǎn)到括號，alt+’是跳轉(zhuǎn)到引號，alt+字母是跳轉(zhuǎn)菜單項，而alt+左則是跳轉(zhuǎn)到上一次光標(biāo)位置。而Ctrl則是各種操作，比如ctrl+d就是刪除一行。shift則是轉(zhuǎn)義，比如shift+回車是<br/>，shift+空格是&nbsp;。

另外，HBuilder的生態(tài)系統(tǒng)可能是最豐富的Web IDE生態(tài)系統(tǒng)，因為它同時兼容Eclipse插件和Ruby Bundle。SVN、git、ftp、PHP、less等各種技術(shù)都有Eclipse插件。

HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫，它基于Eclipse，所以順其自然地兼容了Eclipse的插件。但因為Java效率太低，所以用C寫了啟動器。HBuilder柔和的綠色界面設(shè)計需要動態(tài)調(diào)節(jié)屏幕亮度，它還支持手機(jī)數(shù)據(jù)線真機(jī)聯(lián)調(diào)，而這些都是用C寫的。

HBuilder很多界面，比如用戶信息界面都是使用Web技術(shù)來做的，既漂亮，開發(fā)起來又快。最后，代碼塊、快捷配置命令腳本，都是用Ruby開發(fā)的。

“這4種技術(shù)各有各的用途，我們團(tuán)隊內(nèi)部也靈活運(yùn)用，HBuilder的架構(gòu)支持不同的技術(shù)互相融合通信。至于我們的技術(shù)選型原則，首先滿足用戶需求，然后我們內(nèi)部用什么技術(shù)能更快完成就會選什么技術(shù)”，王安解釋道。

最大的難題：js解析

HBuilder第一個版本發(fā)布到現(xiàn)在，DCloud以每周一版的速度已經(jīng)發(fā)布了20多個版本。主要更新包括支持邊看邊改、插件安裝、App打包平臺開放、代碼塊自定義開放。“但是最主要的工作還是在努力把亮點(diǎn)做到極致，從第一個版本發(fā)布，我們能提升一倍的web開發(fā)效率，到現(xiàn)在可以提升5倍”王安說道。

DCloud在開發(fā)HBuilder的過程中遇到了不少難題，比如 web語法庫和瀏覽器兼容庫的建立，從W3C的HTML、JavaScript、CSS的正式標(biāo)準(zhǔn)和推薦標(biāo)準(zhǔn)，到ECMAScript中瀏覽器支持的部分，還有各大瀏覽器的擴(kuò)展語法，Webkit、moz、ms的HTML、JS、CSS， 想集齊這些語法，不僅僅是工作量的問題。而每個語法在每個瀏覽器的每個版本上是否能運(yùn)行，得到這個數(shù)據(jù)也是前人未能突破的挑戰(zhàn)。還好這個難題目前已經(jīng)被解決。

“當(dāng)前困擾我們最大的難題還是js解析”王安坦言道。

目前其他開發(fā)工具都不能有效的識別代碼里的js對象，要不沒有提示，要不全提示，甚至有的隨意提示用戶輸入過的詞。而DCloud在識別用戶寫的js方面下了很大的功夫，比如var e = document.getElementById("e")，e或許是一個div也可能是input，那么e設(shè)置屬性時，就需要準(zhǔn)確識別e到底是什么，才能給出有效精準(zhǔn)的提示。

“我們已經(jīng)克服了很多挑戰(zhàn)，即使很復(fù)雜的寫法document.querySelector("div:not(#a1) .class1")，HBuilder也知道這個對象到底是什么”。

當(dāng)然把精準(zhǔn)識別做到極致，必然帶來一個煩惱，就是性能下降。當(dāng)用戶快速敲代碼時，無法接受延遲提示，也就是說，復(fù)雜的識別運(yùn)算要在毫秒級完成，這種挑戰(zhàn)非常大。為此需要不停的優(yōu)化算法甚至重構(gòu)?！澳壳拔覀冞€在路上艱難前行，但我們相信終究會克服這個挑戰(zhàn)，屆時開發(fā)者們將得到又快又準(zhǔn)的提示，而我們也給競品鑄造了難以超越的壁壘”，王安表示。

目前Web開發(fā)領(lǐng)域格局

目前主流的前端開發(fā)工具有Sublime為代表的文本編輯器，以及Webstorm、Brackets、Dreamweaver、vs等IDE。但說道為HTML5設(shè)計或做了特殊優(yōu)化的，只有HBuilder、Webstorm和Brackets。從用戶群和優(yōu)缺點(diǎn)角度，主流的開發(fā)工具總結(jié)如下表（僅收集小部分開發(fā)者的意見，如對工具有更多看法，歡迎評論）：

文本編輯器以輕快方便的特點(diǎn)獲得了很多用戶的喜愛，但商業(yè)項目的編寫缺少IDE還是會很低效。IDE相比文本編輯器最大的特點(diǎn)是擁有語法引擎，能夠識別語言。

HBuilder免費(fèi)下載