Hbuilder與jQuery在網頁開發中的應用

來哲函+薛益鴿

摘要： 關鍵詞： 中圖分類號： 文獻標志碼： 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引言

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

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

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

當然對于前端開發者來說，新的網絡規范，新的網絡開發技術，人們對美學上的視覺追求正日益趨于精致高端。對于其自身代碼編譯的要求也隨即呈現走高態勢。在此背景下，前端開發者應該在全面理解Web應用需求的基礎上，研究提供完整的前端解決方案。

在此基礎上，本文即研發提出了Web前端系統構建的流程，并結合jQuery框架快速技術和Hbuilder編譯器，同時則以溫州商學院官網為例設計演示如何高效快速便捷地構建一個前端網站。

1Hbuilder相比于其他編譯器的優點

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

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

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

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