基于jQuery框架的分布式视频网络应用系统

安宁

摘要：jQuery是一种基于JavaScript开发的框架，它将JavaScript常用的功能代码进行二次封装，使得原本需要利用JavaScript进行开发的应用系统开发效率更高、代码更简洁，实现“用更少的代码做更多的事”。jquery优化了JavaScript开发中事件处理、动画效果等方面的功能，语法简洁清晰，具有灵活的css选择器，并可以兼容目前市场各种主流的浏览器产品如firefox、IE、Chrome等。分布式架构的应用系统较传统web服务器，运行效率更高，数据存储更安全，更适应与高并发访问的应用场景。

关键词：jQuery;ajax;web开发;网络应用系统

1引言

近年来，随着前端技术的迅速发展，HTML、CSS、JavaScript等都有了质的飞跃。在JavaScript方面，出现了许多优秀的框架结构，jquery作为最早出现的一种架构，已成为目前使用最为广泛的JavaScript开发框架。他将JavaScript开发中常用的功能代码进行整合及封装，提供了功能丰富的事件处理API接口，大大提高了程序员的开发效率，使得代码更简洁明了，可读性更强，并可以兼容目前市场上种主流浏览器产品如firefox、IE、Chrom、Opera等，真正实现了“用更少的代码做更多的事”，许多十分复杂的网页动态效果例如滑动栏、拖拽、鼠标悬停等，在原生JavaScript的开发环境下，实现起来繁琐、代码量大、语法复杂，而使用jquery框架后，能够快速获取网页元素，网页动态效果变得十分丰富，语法简洁清晰，是对开发者而言非常友好的一个开发框架结构。

本文介绍了一款基于jquery框架开发的视频网络应用系统，也就是我们通常所说的视频网站。在该网络应用系统中，网页动态效果部分利用jquery中提供的API接口实现了界面轮播功能、菜单栏背景自动更换、鼠标悬停展示特效等模块，网站用户体验良好，动态效果丰富，人性化的设计旨在为使用者获得更好的用户体验。

2jQuery环境搭建

搭建jQuery环境通常有两种方式。一种是本地安装，即将jQuery 库下载至本地，并在html文件当中进行引用。在jQuery的官网jquery.com/download/当中选择下载所需版本的jquery库，官网提供两个版本的库供使用者下载，一个是精简压缩版，以.min.js为后缀，通常用于实际网站开发使用。

3网络应用系统基本架构

本文所介绍的视频网络应用系统是一个动态视频网站，动态网站基本架构为“前端+后台”的结构，前端部分负责进行界面展示，通过html+css的形式实现页面的静态显示，通过JavaScript实现网页的动态效果;后台部分负责处理业务功能，接收前端提交的数据，在服务器端对数据进行处理，并将最终结果返回给前端予以给客户展示。通常在后台，除了处理逻辑业务的服务器，还有数据库服务器提供数据库服务，用以存储数据，和web服务器一同为网络应用系统提供服务。在前后台交互的过程中，目前主流的一种方式是采用ajax技术进行数据的交换，能够在不重新加载整个页面的情况下，实现对网页部分数据的更新。在jQuery当中，提供了多种与ajax有方法，使用GET和POST方法从远程服务器上请求html数据、JSON数据等。在jquery出现之前，ajax的实现并非易事，对于不同的浏览器，ajax的实现方法也不尽相同，而在jquery中，我们只需要使用一行简单的代码就可以实现ajax功能。

在后台服务器部分，传统的网络应用系统将web服务、php-fpm服务、数据库服务部署在同一节点当中，虽然实现简单，但健壮性较差，若服务器宕机则会出现单点故障问题。而采用分布式架构的服务器集群，将单节点服务器扩展成多节点的服务器集群，将网络系统所依赖的服务分布式地部署在不同节点上，这样可以让各服务更大化的独占系统资源，并且当集群中某节点出现故障，不会影响其他节点的服务正常运行，从一定程度上大大提高了系統的健壮性。

4网络应用系统功能模块

视频网络应用系统主要分为5个板块，分别是网页头部（banner）、菜单栏、滑动栏推送板块（slider）、动画缩略展示部分。网页头部主要包括站点首页、游戏中心、直播、周边页面入口，以及登录和注册界面入口;菜单板块包括直播、连载等网站主要内容页面入口，用户可根据浏览需求选择相应的入口进入子页面;搜索栏用于搜索站点当中的内容;滑动栏推送板块用于推送站点最新最热门内容，并通过滑动效果循环进行展示，用户可通过滑动缩略图进入相应子页面中;动画缩略展示部分展示了最近更新视频的缩略图，鼠标指向后显示视频信息简介。

5jQuery在网络应用系统当中的应用

（1）点击事件

在视频网站中，大量使用了jquery中的click（）方法实现页面的点击事件。在原生的JavaScript中，需在页面html元素中添加onclick事件，并在JavaScript文件中添加相应的事件代码并将两者进行绑定，而基于jquery框架的点击事件，只需要在jquery代码中引用页面相应的元素，并为其声明点击时要执行的代码段，就可以完成点击事件的编写了。在登录界面中，当用户输入账户及密码，并点击登录按钮完成登录时，会触发点击事件用来进行登陆检测，包括账户和口令是否非空，进行密码长度及复杂度检测，根据浏览器内核的类型创建不同的http请求，根据将前台用户提交的账户及密码通过POST方法提交给后台php代码进行数据的处理。

（2）样式切换

网站的动态效果，例如每当点击滑动栏切换标签按钮时，原本的图标会切换为其他图标突显选中效果;在选择菜单内容时，鼠标指向不同的菜单条目菜单背景会自动跟随内容发生变化;当鼠标指向网页中图标时会有色彩变化以示选中效果。在原生的JavaScript中，如果要改变页面元素的样式，每一条语句代码只能实现一种样式的重新定义，而基于jquery框架的页面，通常使用addClass（）/removeClass（）/ toggleClass（）等方法实现样式的切换，可以灵活的实现样式的添加移除和切换，代码实现方式简洁灵活。以滑动栏为例，样式切换部分代码如下图所示：

（3）鼠标悬停

当鼠标指向某些图标或菜单时，使用jquery当中的hover（）方法，当鼠标选定与页面元素上时会触发mouseenter和mouseleave事件，执行指定的函数实现不同的动态效果。鼠标悬停实现动态效果部分代码如下图所示：

（4）与CSS的结合

要使jquery在实现动态展示部分达到最优的效果，还要与CSS良好的结合。除了CSS1中支持的元素的样式的模式：hover，在CSS3中还新添加了：checked、：not（selector）、：enabled等选择器样式模式，在实现同样的动态效果时，可以基于更简洁更高效的目标灵活选择使用jquery或者样式选择器模式。例如，当实现鼠标悬停样式切换时，如果使用jquery来实现，需要先用选择器选取页面相应元素，然后编写悬停事件，在悬停事件中，需进行条件判断，例如在样式1与样式2之间进行切换，若当前元素样式为1，则需要先将样式1移除再添加样式2，反之亦然。而使用CSS，只需要使用：hover模式，就可以使用简单的几个样式定义完成样式切换。

6结束语

基于jQuery框架的分布式视频网络应用系统，利用了jQuery丰富的事件处理API接口，并与CSS的使用进行了良好结合，是整个系统在实现动态效果方面更加简洁高效，代码可读性好，运行效率高，将传统的原生JavaScript需要大段代码才能实现的功能，仅需要一个接口和语句即可完成。此外，系统使用了分布式服务器集群架构，使整个系统在健壮性及运行效率方面都较传统架构有所提升，提高了系统的并发访问能力，后续可根据应用场景灵活进行资源及服务的扩充。

参考文献：

[1]Jonathan Chaffer. jQuery基础教程（第4版），2013，9787115330550

[2]李艳鹏，杨彪.分布式服务架构：原理、设计与实战，2017，9787121315787