馬立豐　劉文輝

摘 要：Web 平臺(tái)前端開發(fā)設(shè)計(jì)是現(xiàn)下計(jì)算機(jī)領(lǐng)域的重要組成部分，有效進(jìn)行 Web 平臺(tái)前端開發(fā)設(shè)計(jì)，不但能夠充分發(fā)揮互聯(lián)網(wǎng)的優(yōu)勢，在借助互聯(lián)網(wǎng)的基礎(chǔ)上搭建一個(gè)良好的平臺(tái)，而且也能夠服務(wù)多方領(lǐng)域，從而促進(jìn)多個(gè)方面得到良好的進(jìn)步與發(fā)展。需要注意的是，在 Web 平臺(tái)前端開發(fā)設(shè)計(jì)過程中，涉及的領(lǐng)域、知識點(diǎn)是涵蓋多個(gè)方面，因此，為了實(shí)現(xiàn) Web 平臺(tái)前端開展良好的開發(fā)設(shè)計(jì)活動(dòng)，本論文從不同方面闡述基于Bootstrap的web開發(fā)設(shè)計(jì)研究，希望為研究web開發(fā)設(shè)計(jì)的專家和學(xué)者提供理論參考依據(jù)。

關(guān)鍵詞：Bootstrap；web開發(fā)設(shè)計(jì)；分析

Web 前端開發(fā)技術(shù)廣泛應(yīng)用于網(wǎng)頁制作中，是網(wǎng)頁制作的重要技術(shù)手段。隨著網(wǎng)頁制作水平的不斷提高及技術(shù)的演變，網(wǎng)頁開始開始由靜態(tài)內(nèi)容顯示，逐漸轉(zhuǎn)變?yōu)閯?dòng)態(tài)內(nèi)容顯示，Web 前端開發(fā)技術(shù)類型越來越豐富。如：Ajax帶來了無刷新數(shù)據(jù)交互，縮減了網(wǎng)頁跳轉(zhuǎn)次數(shù)，提高了 Web前端應(yīng)用性能，使單個(gè)頁面能完成更多功能。而且 HTML5越來越成熟，JavaScript 應(yīng)用度越來越高。但 Web 前端開發(fā)對代碼質(zhì)量要求越來越高，所以具體開發(fā)中應(yīng)做好優(yōu)化工作，科學(xué)調(diào)整相關(guān)參數(shù)，以縮短頁面響應(yīng)時(shí)間，提高運(yùn)行效率。

1 Bootstrap的基本內(nèi)涵

Bootstrap是美國Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發(fā)的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動(dòng)態(tài)CSS語言Less寫成。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項(xiàng)目。 國內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來。

2 Web 平臺(tái)的相關(guān)論點(diǎn)探討

2.1合理控制文件大小

文件大小不僅會(huì)影響加載速度，更重要的是會(huì)影響網(wǎng)頁響應(yīng)速度及互動(dòng)性能。若控件文件過大或樣式過多，必然導(dǎo)致響應(yīng)速度變慢，造成網(wǎng)頁延遲過長，甚至導(dǎo)致網(wǎng)頁崩潰，出現(xiàn)無響應(yīng)現(xiàn)象。因此，要合理控制文件大小，不僅要壓縮 JavaScript，且要去除一些多余 html 標(biāo)簽，通過對 CSS 文件和代碼的優(yōu)化提升運(yùn)行速度，避免內(nèi)聯(lián)式樣式，使 CSS 文件能快速加載，使部分頁面內(nèi)容能立即呈現(xiàn)給用戶，解決以往傳統(tǒng)技術(shù)條件下，頁面長時(shí)間空白的問題，從而增強(qiáng)用戶體驗(yàn)，使頁面加載合情合理。

2.2代碼優(yōu)化用來保障傳輸

優(yōu)化主要包括二個(gè)方面：第一是減少數(shù)據(jù)的傳輸量，第二是減少數(shù)據(jù)的傳輸頻率，做好這二個(gè)方面，就可以達(dá)到提高網(wǎng)頁加載速度，降低服務(wù)器占用資源，提高網(wǎng)絡(luò)帶寬使用率等目的。實(shí)現(xiàn)優(yōu)化傳輸，我們需要減少空白區(qū)域，精簡CSS和JS?？崭?、制表符、換行符、注釋都可以安全刪除。使用最短格式的顏色表示，比如表示紅色，我們是使用#FF0000、red還是#F00呢？我想讀者自然會(huì)知道。除去“垃級”標(biāo)簽，并對CSS代碼進(jìn)行有效合并、減少或刪除重復(fù)，比如：p{font-size：16px；font-family：Arial；line-height：22px；font-weight：bold；}，可以改寫為p{font：bold 16/22px；Arial；}。網(wǎng)站不少的導(dǎo)航、表格確認(rèn)和其它各式各樣的特效都用JS來實(shí)現(xiàn)，而JS往往都非常笨重，除了注釋，其它所有的//or/**/注釋都可以安全刪除，除去JS空白區(qū)域并優(yōu)化代碼，如二行的x=x+1和y=y+1，加上分號后可以寫在一行，而x=x+1，又可以寫成x++。重命名用戶自定交的變量和函數(shù)也可以給代碼帶來顯著改善。

3 Web 平臺(tái)前端開發(fā)設(shè)計(jì)與實(shí)現(xiàn)

3.1立足 Java EE 的框架，開展一系列設(shè)計(jì)工作

Web 平臺(tái)前端開發(fā)設(shè)計(jì)的實(shí)現(xiàn)，需要采用靜態(tài)頁面技術(shù)、動(dòng)態(tài)頁面技術(shù)中的 JSP 技術(shù)、Ajax 技術(shù)等，并且建立在 Java EE 的框架基礎(chǔ)之上，促使網(wǎng)頁前端主要由客服人員和系統(tǒng)管理人員統(tǒng)一管理，并作為信息服務(wù)平臺(tái)的前端界面，以此來促進(jìn) Web平臺(tái)前端開發(fā)設(shè)計(jì)得到良好實(shí)現(xiàn)。具體來講，主要體現(xiàn)在以下幾個(gè)方面：第一，安裝和配置 Java 虛擬環(huán)境。由于 Java 是一種高級語言，因此，在 Java 虛擬環(huán)境的基礎(chǔ)上為上層的應(yīng)用提供豐富的庫，以此來做好接口進(jìn)行運(yùn)行。第二，在安裝和配置 Java 虛擬環(huán)境之后，開始安裝 Tomcat。Tomcat 的配置需要建立在系統(tǒng)環(huán)境之下，完成配置之后，啟動(dòng) Tomcat，看到歡迎界面之后，就說明安裝成功，之后建立 JSP app 的目錄。需要注意的是在 Tomcat 的安裝目錄之下有 WEBAPPS 目錄，在 WEBAPPS 目錄下新建一個(gè)目錄，起名叫 MYAPP，并在該目錄下再新建一個(gè)目錄 WEB-INF，在下新建 JSP 文件的基礎(chǔ)上寫上代碼，就可以開始頁面編程工作。第三，在 Web 平臺(tái)前端開發(fā)設(shè)計(jì)過程中，由于 MYSQL 是一款經(jīng)典的數(shù)據(jù)庫，具有免費(fèi)、功能齊全等方面的特點(diǎn)，在這一數(shù)據(jù)庫之中新建一個(gè) MySQL-data 目錄，完成后再新建一個(gè) my.ini的文件，以此來充分發(fā)揮這一數(shù)據(jù)庫的功能。第四，還需要建立JSP 頁面與 MYSQL 數(shù)據(jù)庫的聯(lián)系。

3.2提高工作人員工作能力，合理使用 Ajax 技術(shù)

為了實(shí)現(xiàn) Web 平臺(tái)前端開發(fā)設(shè)計(jì)工作，還可以采取以下幾個(gè)方面的措施：第一，任何一項(xiàng)工作的開展都需要相對應(yīng)的工作人員參與其中。由此可見，工作人員工作能力的高低，在很大程度上影響一項(xiàng)工作的開展質(zhì)量。相對應(yīng)的 Web 平臺(tái)前端開發(fā)設(shè)計(jì)工作在開展過程中，無論是設(shè)計(jì)還是開發(fā)，都需要充分調(diào)動(dòng)工作人員的作用，才能在此基礎(chǔ)上實(shí)現(xiàn) Web 平臺(tái)前端進(jìn)行有效的開發(fā)設(shè)計(jì)。但是在實(shí)際發(fā)展中，在 Web 平臺(tái)前端開發(fā)設(shè)計(jì)工作中，有關(guān)于工作人員方面還存在著工作能力不高、素質(zhì)不強(qiáng)等方面的問題，這些問題的存在，在很大程度上影響 Web 平臺(tái)前端開發(fā)設(shè)計(jì)工作得到有效落實(shí)，因此，充分發(fā)揮工作人員的工作能力是具有重要的作用。而提高工作人員的工作能力，可以采取兩個(gè)方面的措施，一方面是在對外的招聘環(huán)節(jié)中，要盡量避免因?yàn)槿饲?、關(guān)系等原因，在公平的基礎(chǔ)上合理的篩選前來應(yīng)聘的計(jì)算機(jī)人員；另一方面是在對內(nèi)的人員管理中，多組織一些培訓(xùn)活動(dòng)，如業(yè)務(wù)培訓(xùn)班，不僅進(jìn)行有針對性的計(jì)算機(jī)操作方面培訓(xùn)，而且也要進(jìn)行計(jì)算機(jī)知識方面的培訓(xùn)，以此來提高計(jì)算機(jī)人員的實(shí)際能力，從而促進(jìn)整體的進(jìn)步與發(fā)展。第二，合理應(yīng)用 Ajax技術(shù)。

參考文獻(xiàn)

[1]以工作過程為導(dǎo)向的《大前端開發(fā)》課程規(guī)劃與設(shè)計(jì)[J].劉磊.現(xiàn)代計(jì)算機(jī)（專業(yè)版）.2015（33）

[2]統(tǒng)一前端抵御威脅[J].每周電腦報(bào).2004（41）

[3]高校校園網(wǎng)前端技術(shù)的研究與探索[J].易昌華.價(jià)值工程.2010（02）

[4]淺析Web前端開發(fā)技術(shù)[J].閆志英.無線互聯(lián)科技.2016（02）