Web開(kāi)發當中，前端視(shì)圖層的美化在一定程度上(shàng)決定着用戶體(tǐ)驗，當一個(gè)WEB應用的VIEW層很(hěn)美觀，那(nà)麽她有(yǒu)可(kě)能會(huì)吸引更過的人(rén)參觀這個(gè)網站(zhàn)，作(zuò)為(wèi)一枚攻城獅，一定會(huì)知道(dào)Twitter上(shàng)面一個(gè)有(yǒu)名Bootstrap,目前這個(gè)前端框架很(hěn)受攻城獅們的青睐，它是為(wèi)移動而生(shēng)，響應式布局，為(wèi)移動設備提供解決方案;它一個(gè)CSS/HTML框架。Bootstrap提供了優雅的HTML和(hé)CSS規範，它即是由動态CSS語言LESS寫成。

　　Bootstrap一經推出後頗受歡迎，一直是GitHub上(shàng)的熱門(mén)開(kāi)源項目，包括NASA的MSNBC(微軟全國廣播公司)的Breaking News都運用了該項目。國內(nèi)一些(xiē)移動開(kāi)發者較為(wèi)熟悉的框架，如WeX5前端開(kāi)源框架等，也是基于Bootstrap源碼進行(xíng)性能優化而來(lái)、為(wèi)移動而生(shēng)。

一、框架的優點

　　1、開(kāi)發效率的提高(gāo)。

　　一般框架都封裝了一些(xiē)常用的JS組件和(hé)Web應用組件，隻要在布局上(shàng)添加相應的類名即可(kě)實現相應的效果，而且這樣寫有(yǒu)效的控制(zhì)了各個(gè)內(nèi)核浏覽器(qì)的兼容性問題，更便于優化代碼，提高(gāo)代碼的可(kě)讀性。提高(gāo)整個(gè)項目的效率，從而使項目的QA得(de)到完善。

　　一般情況下，使用前端框架開(kāi)發web應用，整體(tǐ)的效率會(huì)提高(gāo)30%以上(shàng)，很(hěn)多(duō)時(shí)候我們更願意去花(huā)時(shí)間(jiān)去熟悉前端框架的架構，語法等;總之前端框架就是為(wèi)了便捷的開(kāi)發應用;

　　2、規範代碼命名

　　每個(gè)框架都有(yǒu)屬于自己的命名規範，在JS 、CSS上(shàng)面，她們都獨立于項目之中存在，不存在類名沖突問題，這樣的規範使項目更加簡潔。在《代碼之美》一書(shū)中提到，代碼的美麗(lì)在于它的結構上(shàng)面。有(yǒu)時(shí)候，我們看着雜亂無章的代碼就會(huì)很(hěn)壓抑，反之，看到布局、結構好的代碼心情都會(huì)變好。在項目當中，無論你(nǐ)做(zuò)前端還(hái)是後端，請(qǐng)養成一個(gè)良好的職業習慣，注釋;

　　3、更好的團隊合作(zuò)

　　有(yǒu)些(xiē)公司會(huì)将一些(xiē)稍大(dà)的站(zhàn)點的前端代碼分成若幹子項目。有(yǒu)過此 類經驗的朋友(yǒu)應該對這種開(kāi)發方式深感郁悶，要注意公用CSS，還(hái)有(yǒu)注 意相互之間(jiān)的代碼配合。 久而久之，廢棄代碼越來(lái)越多(duō)，互相之間(jiān)也難 以閱讀。如果建立好合适的CSS框架，大(dà)家(jiā)可(kě)以減少(shǎo)很(hěn)多(duō)不必要的錯誤， 提升産品質量和(hé)工作(zuò)效率。有(yǒu)些(xiē)公司會(huì)将一些(xiē)稍大(dà)的站(zhàn)點的前端代碼分 成若幹子項目。有(yǒu)過此類經驗的朋友(yǒu)應該對這種開(kāi)發方式深感郁悶，要 注意公用CSS，還(hái)有(yǒu)注意相互之間(jiān)的代碼配合。 久而久之，廢棄代碼越 來(lái)越多(duō)，互相之間(jiān)也難以閱讀。如果建立好合适的CSS框架，大(dà)家(jiā)可(kě)以 減少(shǎo)很(hěn)多(duō)不必要的錯誤，提升産品質量和(hé)工作(zuò)效率。

　　4、解決浏覽器(qì)的兼容性問題

　　現在大(dà)部分項目都要求兼容IE6，7和(hé)FF。每個(gè)站(zhàn)點可(kě)能都會(huì)花(huā)上(shàng)一部分時(shí)間(jiān)去處理(lǐ)兼容問題。在框架層面上(shàng)就将這個(gè)問題處理(lǐ)好。就可(kě)以為(wèi)後面的兼容問題節 省下大(dà)部分時(shí)間(jiān)。

　　5、一套完整的、結構清晰的結構代碼

　　CSS框架為(wèi)你(nǐ)的項目提供一個(gè)幹淨、嚴謹的基礎架構。通(tōng)過它你(nǐ)可(kě)以快速的為(wèi)你(nǐ)的站(zhàn)點搭建基礎的HTML代碼框架。萬事開(kāi)頭難，前面的基礎工作(zuò)做(zuò)好了。後面 的開(kāi)發速度會(huì)提高(gāo)很(hěn)多(duō)。

二、框架的弊端

　　1、需要完全的理(lǐ)解整套框架

　　每個(gè)前端框架都有(yǒu)對應的結構和(hé)語法，在新同事加入項目時(shí)，都需要花(huā)一定的時(shí)間(jiān)去完全的理(lǐ)解整套框架及編碼規範，在這熟悉的過程中，大(dà)大(dà)增加的項目的開(kāi)發周期;

　　2、框架中的原有(yǒu)BUG

　　在框架當中，為(wèi)了使大(dà)衆浏覽器(qì)得(de)到兼容，有(yǒu)些(xiē)時(shí)候對于小(xiǎo)的BUG會(huì)留在框架本身當中，在項目開(kāi)發時(shí)，要修改框架中的錯誤等，這樣也會(huì)增加項目的開(kāi)發周期，加大(dà)成本;

　　3、限制(zhì)開(kāi)發思路

　　前端框架一般都是集合了很(hěn)多(duō)思想在一起的代碼集合，而大(dà)部分框架會(huì)限制(zhì)一些(xiē)開(kāi)發者的思路，無法開(kāi)發出個(gè)性的WEB應用，框架給出大(dà)家(jiā)基本的架構及開(kāi)發的思路，這可(kě)能會(huì)限制(zhì)你(nǐ)對産品開(kāi)發的新思路;

　　4、臃腫的源代碼

　　在前端框架中，我們一般都會(huì)要加載很(hěn)多(duō)依賴很(hěn)多(duō)擴展庫才能正常運行(xíng)，這樣的代價是要加載很(hěn)多(duō)文件，減慢了網頁的加載速度，在一定程度上(shàng)是用戶體(tǐ)驗降低(dī)。框架本身就有(yǒu)很(hěn)多(duō)用不到的代碼，顯得(de)很(hěn)臃腫。

　　5、框架的語義化

　　HTML代碼的語義化。框架的每個(gè)站(zhàn)點都是獨立存在的，開(kāi)發難以去保證CSS框架的語義化，和(hé)代碼邏輯的條理(lǐ)性。

　　綜述上(shàng)面，前端框架有(yǒu)弊也有(yǒu)利，作(zuò)為(wèi)開(kāi)發者要合理(lǐ)利用這框架優勢，講這優勢用于在實際開(kāi)發項目當中，而對于框架不好的地方也注意防範措施。記得(de)有(yǒu)一次上(shàng)知乎的時(shí)候，看到大(dà)家(jiā)對這個(gè)前端框架的運用褒貶不一，我對于框架而言，隻要是對項目有(yǒu)利的東西都願意去嘗試一下。前端框架也會(huì)成為(wèi)開(kāi)發者必須接觸的一種技(jì)術(shù)，熟悉并利用它為(wèi)項目帶來(lái)快捷、便利。

　　本文由重慶網站(zhàn)建設-中技(jì)互聯：www.zjcoo.com