基于框架的WEB前端设计

基于框架的WEB前端设计

作者：俞华锋

来源：《科技视界》2016年第23期

【摘 要】本文主要进行了基于Bootstrap和AngularJS框架的WEB前端设计研究。首先介绍了WEB前端设计研究的意义、框架的概念和优点，分析了Bootstrap和AngularJS框架设计的核心思想，最后探讨了其在WEB前端设计的具体应用。 【关键词】Bootstrap；AngularJS；框架；WEB前端 0 引言

随着新一代信息技术的快速发展，Web应用越来越广泛，对于Web 前端开发工程师的要求也越来越高，无论是开发技术上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，由原来必须掌握的HTML、CSS和JavaScript三个技术要素演变成现在的HTML5，CSS3和Jquery。而且前端工程师开发的Web应用不仅需要适合传统的电脑PC端，还需要适合手机和IPAD等各种不同的移动设备。 为了降低Web 前端开发的难度和复杂性，引入框架思想进行Web 前端开发。

使用框架进行Web前端开发主要有两个方面的原因：使用W3C标准的框架后，可以有效提高Web应用的性能，让应用的代码组织更有序，提高其可维护性；使用便捷的MVC框架，把HTML作为信息模型（Model）、CSS控制样式（View）、JavaScript实现功能和业务逻辑（Controller），使得代码具有很好的重用性和复用性，提高Web前端开发的效率、质量和团队协作性。本文主要简单介绍使用框架思想来进行Web 前端开发。 1 框架概述

框架是随着软件工程的发展演变而来的，在软件开发过程中，很多项目要解决的问题和实现的功能是一样的，在这种情况下，可以将实现相同功能的代码放在单独的一个文件作为组件或构件，供以后开发和使用，这些代码是可重用和扩展的。因此，业界人士将相同功能的实现和问题的解决方法进行抽象，最终抽取和形成一个应用框架。框架可以使软件开发人员将大部分时间用来分析和处理业务逻辑上，在编写代码时只要应用框架就可以了。 使用框架开发应用的优点如下：

（1）框架重用性好，开发效率高。在开发应用时，可以重用框架的分析、设计、代码，使得应用开发效率和开发质量得到了显著提高。应用开发人员可以按照框架的思想将应用进行分析并将其分解为同样的组件，采用同样的方法来解决的问题。框架还提供了可重用的概要设

龙源期刊网 http://www.qikan.com.cn

计和详细设计，并将应用分解成较小的组件和接口。只要符合框架的定义和要求，开发人员就可以使用框架中的类和接口，使得开发效率大大提高。

（2）因框架实现了“高内聚、低耦合”，可扩展性较好。框架把要解决的业务分解为较小的事务，采用分层的方法将相关性很强的代码组合成一个组件，根据单一责任原则只解决一项较小的事务，并且减少组件与组件之间的联系，如果彼此之间的联系比较复杂的话，继续分解为较小的组件。因此框架实现了软件工程的“高内聚、低耦合”的要求，易于控制，易于扩展。 （3）使用框架，开发周期短，成本低，可维护性较好。使用框架开发应用，只要调用类和接口就可以完成大部分工作，大幅度缩短了应用和软件的开发周期，显著提高了软件开发质量。大粒度的重用使得应用和软件开发成本大大降低，开发时间成倍减少，同时分层思想设计的框架使得应用开发的适应性和灵活性也得到增强，可维护性较好。 2 Bootstrap框架应用 2.1 概述

Bootstrap框架主要用于静态页面的设计，是由Twitter公司的设计师Mark Otto和Jacob Thornton共同开发的，是比较受欢迎的一个CSS/HTML Web前端框架。它是基于HTML5、CSS3和JavaScript 的框架，符合 HTML和CSS 规范，且代码简洁灵活，使得 Web前端开发更加快捷。Bootstrap框架推出以后一直颇受欢迎，是GitHub网站上的排行榜靠前的开源项目，国外知名的公司NASA的Breaking News和国内一些移动开发者较为熟悉WeX5前端开源框架都采用了Bootstrap框架。

由于Bootstrap的 HTML是基于 HTML5 的最新技术，可以快速实现响应式页面，集成了非常友好的 CSS 样式表，对于非设计人员也可以制作出很漂亮的网页，且占用资源非常少，因此我们也采用Bootstrap框架进行Web前端设计。该框架包含了丰富多彩的Web组件，利用这些组件，我们可以快速的搭建一个个性化的、漂亮和功能完备的网站。主要包括以下几个部分：

1）全局 CSS 样式：包含了格栅系统、表单和表格等集成样式。

2）组件：包含了下拉菜单、按钮下拉菜单、文本框、导航、列表框等组件。 3）插件：包含了进度条、警告对话框、弹出框等插件。 2.2 应用

（1）从Bootstrap官网http：//getbootstrap.com/getting-started/#download下载 Bootstrap开源框架。Bootstrap 主要包含css、fonts和 js文件夹：css 文件夹存放的是bootstrap.css基本样

龙源期刊网 http://www.qikan.com.cn

式，在网页中使用命令即可；fonts 文件夹存储网页中可以使用的各种字体；js文件夹存放的是bootstrap.js等js文件，在网页中可以通过 标签来使用js组件。

（2）Bootstrap是根据移动终端优先的原则设计的。它支持响应式网页（RWD，Responsive Web Design），为了控制网页的尺寸比例和触屏缩放，需要使用命命令添加viewport元素。

（3）设置页面流式布局，网页中的各元素会根据设备分辨率的不同而自动调整大小，但元素位置并不会发生变化。流式布局通常将页面分为12列，将网页的宽度设置为100%，具体代码因太多此处省略。

（4）运用Bootstrap提供的各种样式、组件和插件完成WEB前端设计。例如制作一个提交按钮，通过以下代码实现提交。 3 AngularJS框架应用 3.1 概述

AngularJS主要用于构建单页面的动态页面的设计，更多关注的是构建 CRUD（增加Create、查询Retrieve、更新Update、删除Delete）应用，由Misko Hevery 等人在2009年创建，是一款优秀的JS框架，被广泛应用。

AngularJS主要使用MVC的分层设计模式，将管理数据的model、应用逻辑controller和向用户显示数据的界面（view）清晰地分离开，以提高代码的易读性和可移植性，使得程序清晰易读。在 AngularJS 应用中， model被存储在各个对象的属性中，view就是文档对象模型（DOM），controller就是JS类和代码。 3.2 应用

（1）从网上下载AngularJS框架。将要使用的js文件复制到工程文件的js文件夹中，并在页面中使用命令引入。

（2）使用 ng-app命令在动态页面中创建模块。AngularJS 的MVC结构是基于整个具体应用的。通常在页面的指定容器标签中使用ng-app命令来创建具体模块，例如 。

（3）设置控制器controller。在网页中通过ng-controller指令设置控制器， {{text}}

龙源期刊网 http://www.qikan.com.cn

。再通过JS代码控制逻辑，app.controller（\"testController\"，function（$scope）{$scope.text = 'welcome'；}）。

（4）设置模型数据model。通过ng-model 命令动态设定模型数据model内容， {{text}} 。 4 总结

本文针对新一代信息技术的发展，将Bootstrap和AngularJS框架运用在WEB前端开发中，希望能对WEB前端设计的研究提供一定的参考。当然本文只是简单介绍了Bootstrap和AngularJS框架的基本应用，详细的应用有待进一步的完善。 【参考文献】

[1]http：//www.51cto.com. [2]http：//baike.baidu.Com.

[3]俞华锋.基于HTML5的网页设计与实现[J].科技信息，2012（29）. [责任编辑：朱丽娜]