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