Fork me on GitHub

一款基于JQuery和bootstrap的单页面WebApp框架

前言

现在React.js,Vue.js等MVVM框架逐渐火了起来,今天,先暂时不说这些。

我在之前呆过一家公司,他们前端封装了一套基于JQuery和bootstrap的单页面WebApp框架,虽然技术栈方面可能比较落后了,且是基于CSS,Html,JavaScript分层的。与现在的模块化开发有些不同。但是它的一些封装思想是值得我们学习的。

而且这个框架,让我这个前端小白(我是后端开发)对前端JS产生了很大兴趣,特此写下这篇文章来分析和纪念这个框架。

框架主页:https://github.com/JavaZWT/JQueryApp

简介

package.json

这款框架也是基于Node.js搭建的,主要是用了gulp,还包含了css,html,js压缩,js校验等包。其环境启动包依赖如下图:

upload successful

在项目的package.json里可以看到。

关于为什么引用这些插件的说明:

  1. js,img,png等的压缩,可大幅度减小生成的资源包体积,在生成APK后用户当然是希望安装包要小越好。如果gulp到服务器WebRoot目录下,当用户访问项目资源时,体积小的静态资源更能减小用户流量开支,提高系统响应速度,增强用户体验。
  2. 创建一个前端webserver服务器,相当于提供了一个前端APK环境(可以这么理解),大部分bug在浏览器上就可以复现和解决,减少了打包到apk里的繁琐流程,提高开发效率。

根据以上介绍,大家应该知道node_modules,gulpfile.js,package.json,package-lock.json都不会被打到前台资源包中。

package.json里的依赖,都可以通过npm install (同级目录执行)的方式安装,安装后就会生成node_modules文件夹。

安装启动前端环境主要有以下三个步骤。

  1. npm install -g gulp

    安装全局gulp,使gulp可以在任何目录下使用,和java环境变量差不多。

  2. npm install

    安装环境依赖,需要到有package.json的文件夹下执行。

  3. gulp

    启动前端webserver

gulpfile.js

再来说下gulpfile.js

光有插件也不行啊,这个文件就是把插件们拿来用的。

关于这个js,我们简单说下配置及使用。

  1. 参数配置envConfig

    env:启动模式,有三种,DEV,DEBUG,PRO。DEV和DEBUG模式下不会压缩js和图片,节省时间,便于调试。

    distPath: 生成的前端资源文件路径,有的gulpfile.js里面没有它,其他是分开的,那个可以生成发布在webapp目录下的资源文件。

    upload successful

  2. webserverConfig

    服务器启动配置参数

    port :默认打开的端口号

    open:默认代开的文件名

    host:默认打开的地址,不配置的话默认localhost

    livereload:即时刷新,主要用来检测文件变化。

    upload successful

项目架构图

upload successful

架构说明:

  1. public

    前端项目文件夹。

  2. css

    用于存放页面css样式的文件夹,理论上里面的文件都会被放入生成的前端资源包。

  3. html

    用于放置前端页面的文件夹,理论上里面的文件都会被放入生成的前端资源包。

  4. js

    用于放置前端js的文件夹,理论上里面的文件都会被放入生成的前端资源包。

  5. node_modules

    npm install 后生成的文件夹,是前端资源包的打包环境及在Web浏览器上查看及debug App提供支持。

  6. resources

    用于放置前端静态资源的文件夹,如图片,字体,静态json等,理论上里面的文件都会被放入前端资源包。

  7. gulpfile.js

    构建前端环境,生成前端资源包的主要文件。

  8. index.html

    前端主要页面,所有资源理论上都会被按需加载进来。

  9. package-lock.json

    npm install 之后生成的文件,存放着一些npm之后的包的信息。

  10. package.json

    构建前端环境,生成前端资源包的主要文件,里面放置着构建环境及生成资源包所需的依赖。

分析

分析这个框架,我们先从index.html入手,单页面的操作实现主要是将目标html移到这个index.html里实现的。

upload successful

可以看下index.html里面的几个主要id,如上图。

index.html引入了相关js及css。

upload successful

upload successful

我们看下api.js和app.js

项目启动后会调用到此方法,详见index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
function loadViewport(){
var path;
if(location.hash.indexOf("?")>-1){
path = location.hash.substr(0,location.hash.indexOf("?"));
}else{
path = location.hash;
}
path = (path || '#' + api.route.default.path).slice(1);

//如果没有配置路径则不做操作
if(!api.route[path]){
api.globalLoading.hide();
console.log('[APP] 没有查询到路径:'+ path + ',不进行加载');
}else if(api.curr.clean){
switch(api.curr.clean.length){
case 0://如果不包含参数 则认为这是一个同步 直接执行完成后 加载页面
api.curr.clean();
load();
break;
case 1://如果只接收一个参数,则传入回调函数 等待页面完成后自行处理
api.curr.clean(load);
break;
case 2://如果接收两个参数 则分别是 要跳转页面的hash,回调函数
api.curr.clean(path,load);
break;
default://如果接收大于2个参数 则只传入三个 分别是 要跳转页面的hash,要跳转页面的配置在route中的数据,回调函数
api.curr.clean(path,api.route[path],load);
}
}else{
load();
}

function load(){
api.globalLoading.show();
console.log('[APP] 开始加载页面['+path+']');
api.loadPath(path,function(data){
console.log('[APP] 加载页面<p>['+path+']</p>完成');

api.plugins.header(data,path);

//如果页面没有设置 则默认隐藏全局loading
if(!data || !data.selfHideLoading) api.globalLoading.hide();
});
}
}

api.loadViewport = loadViewport;

/**
* 当浏览器的hash发生变化时进行页面的加载
*/
window.onhashchange = loadViewport;

其原理就是利用location.hash的?后半段,进行地址跳转,加载在route里配置的相关html及js,加载之前移除原来的html和js,以实现页面跳转。

方法及使用

api.js

1、route,modal

upload successful

新增一个页面,可以添加在route里,新增一个模态框,可以添加在modal里。

2、api.globalLoading

全局loading,有两个方法:

api.globalLoading.show();

api.globalLoading.hide();

一般应用在ajax发送前后,当需要等待操作处理时,也可以直接调用。

upload successful

3、api.globalShadow

全局shadow,是一个z-index为2000的透明遮罩层。

有两个方法:

api.globalShadow.hide();

api.globalShadow.show();

一般调用模态框时会被加载,自己写一些插件集成在里面时可以自己控制处理下。

4、api.modal.exec

调用模态框时会使用此方法,由于模态框和页面不太一样,模态框关闭后再打开可以保证数据不用重新加载。

upload successful

5、api.loadJS

框架中加载js用到的方法,分为串行加载和并行加载,各有利弊。

upload successful

6、api.loadModal

modal加载方法,刚才提到的那个是这一个的进一步封装,这里面的方法显示了modal是如何被加载的,这里应注意,modal默认只会被加载一次。

upload successful

7、api.loadPath

页面跳转实现的主要方法,这个方法制定跳转path后,会在route里寻找,若没有此页面,则不会跳转。

upload successful

8、loadViewport

刚才提到了,这个可以控制页面hash路由跳转。也是页面跳转的主要方法。

app.js

1、app.alert

消息提示框方法,只有一个确认键。

upload successful

2、app.confirm

消息提示框,有确认和取消两个按钮。

upload successful

3、app.ajax

基于JQuery ajax后自己封装的一套ajax,增加里请求头签名等等。

upload successful

cordova.js

自己封装的一个cordova工具,根据设备类型不同(Android,iOS)调用不同的cordova插件。

GlobalValue.js

全局变量控制插件,通过sessionStorage存储变量。

upload successful

总结

还有很多部分没有介绍到,但框架的关键部分都介绍了,要想清楚明白,可以自己在框架上写个页面或者完善个插件来试试。加深对它的理解。

虽然在现在前端框架日新月异的今天,虚拟dom流行的今天,感觉这个框架已经过时了,但是思想永不过时,框架设计上的一些思想还是值得我们学习和借鉴的。

关于这个框架有什么问题欢迎留言,也可以直接在GitHub上提问题。




-------------文章结束啦 ~\(≧▽≦)/~ 感谢您的阅读-------------

SakuraTears wechat
扫一扫关注我的公众号
您的支持就是我创作的动力!
0%