來哲函+薛益鴿

摘要： 關(guān)鍵詞： 中圖分類號： 文獻標(biāo)志碼： A文章編號： 2095-2163（2017）06-0117-05

Abstract： In recent years， the Internet has developed rapidly. The front end components of today's Internet products has high independence and code reusability， so it is determined that building a set of highperformance frontend components to meet the postWeb 2.0 environment must be characterized by high reusability and strong compatibility. While there are some other frontend components on the current market， which has either too easy functions or trivial coding rules for programmers to compile and read. Under the researched situation， this article presents a set of excellent frontend componentsjQuery and a highly efficient IDEHbuilder， As a case study of Wenzhou Business School website， the paper discusses in detail how to through the use of Hbuilder build high quality jQuerybased Internet products， thereby to accentuate the advantages of the frontend components compared to frontend components of the same type.

0引言

近年來，互聯(lián)網(wǎng)高速發(fā)展，已然成為了現(xiàn)實生活中不可或缺的重要部分。其模式也從1990年的Web 1.0逐漸演變到了現(xiàn)如今的Web 4.0。技術(shù)與思維不斷提檔升級的同時，人們對于網(wǎng)頁美學(xué)的思考也在日趨深入，不斷地出現(xiàn)創(chuàng)新、還有進步。在這探索追尋的過程中，傳統(tǒng)的Web技術(shù)已經(jīng)無法為新的Web時代提供充分有效的支持，必須尋求新模式來滿足人們對于更豐富網(wǎng)頁效果的追求和更全面交互體驗的需要，所以網(wǎng)頁的開發(fā)技術(shù)、開發(fā)工具以及規(guī)范的探討研究也順應(yīng)時代的前行而愈加突顯其在改善優(yōu)化效能設(shè)計方面的高度必要性和重要性。

追溯探討可知，曾經(jīng)的Web 1.0互聯(lián)網(wǎng)扮演的是提供人們資源的角色，可通過各大搜索引擎來查詢所需要的資源。而Web 2.0互聯(lián)網(wǎng)發(fā)揮的是一個橋梁的作用，在Web 1.0的基礎(chǔ)上引入了社會化的元素，典型的代表是維基和微博的出現(xiàn)，提升了人與人之間溝通的便利性。進一步地，Web 3.0互聯(lián)網(wǎng)展現(xiàn)的就是一個知己的角色，即從日常資源中通過智能匹配技術(shù)展開資源篩選來讀懂探問者，知道求索人需要什么，喜歡什么，什么才是解決其時下問題的最優(yōu)回答。迄至目前，Web 4.0互聯(lián)網(wǎng)形成的是猶如空氣的效用，無處不在，在任何時候、任何地方都能提供用戶需要的東西。

Web標(biāo)準(zhǔn)是國際上使用的網(wǎng)站標(biāo)準(zhǔn)，但并非特指某一標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。通常所說的Web標(biāo)準(zhǔn)就是指網(wǎng)站建設(shè)采用基于XHTML語言的網(wǎng)站設(shè)計語言，現(xiàn)如今典型的應(yīng)用模式是“HTML5+CSS3”，這種組合不僅使得網(wǎng)站設(shè)計的代碼格式日趨規(guī)范，使代碼更加便于閱讀，代碼數(shù)量的精簡也有效緩解了網(wǎng)絡(luò)帶寬，顯著降低了用戶訪問網(wǎng)站的時間。

當(dāng)然對于前端開發(fā)者來說，新的網(wǎng)絡(luò)規(guī)范，新的網(wǎng)絡(luò)開發(fā)技術(shù)，人們對美學(xué)上的視覺追求正日益趨于精致高端。對于其自身代碼編譯的要求也隨即呈現(xiàn)走高態(tài)勢。在此背景下，前端開發(fā)者應(yīng)該在全面理解Web應(yīng)用需求的基礎(chǔ)上，研究提供完整的前端解決方案。

在此基礎(chǔ)上，本文即研發(fā)提出了Web前端系統(tǒng)構(gòu)建的流程，并結(jié)合jQuery框架快速技術(shù)和Hbuilder編譯器，同時則以溫州商學(xué)院官網(wǎng)為例設(shè)計演示如何高效快速便捷地構(gòu)建一個前端網(wǎng)站。

1Hbuilder相比于其他編譯器的優(yōu)點

1）代碼輸入法。在使用Hbuilder編碼時，輸入一個首字母，Hbuilder中的智能聯(lián)想系統(tǒng)可以依據(jù)程序員輸入的首字母拓展聯(lián)想得到程序員可能輸入的標(biāo)簽，在聯(lián)想選擇界面里最左排的數(shù)字可以便捷程序員選擇Hbuilder聯(lián)想到的標(biāo)簽。輸入h，可得如圖1所示。這樣就實現(xiàn)了Hbuilder只需用一個數(shù)字鍵，即可少按動10個字符鍵的設(shè)計目的。

2）可編程代碼塊。Hbuilder可使用ruby腳本來編輯代碼塊和增強操作命令。這一獨具個性化的將常用代碼組合成代碼塊的功能設(shè)計，可使程序員在編輯相似的代碼時能夠自動補齊，從而顯著降低了錯誤發(fā)生的幾率，如圖2所示，就是構(gòu)建一個常用的代碼塊。

3）內(nèi)置emmet。Hbuilde集成了emmet的功能，可以通過CSS選擇器語法來快速開發(fā)Html和CSS。如在Hbuilder中輸入div#page>div.logo+ul#navigation>li*2>a，再按下table鍵，可得運行結(jié)果如圖3所示。

4）無死角提示。如圖4所示。Hbuilder在代碼編譯的同時除了可以提示Class外還可以提示ID、圖片、連接、字體等等信息，防止了因為誤打或者漏打一個字符而導(dǎo)致出現(xiàn)的網(wǎng)頁制作錯誤。同時，還提高了代碼的重用性和可閱讀性，也利于程序員對代碼的后續(xù)編撰修改。endprint