來哲函+薛益鴿

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

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

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

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

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

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

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

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

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

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