前言

现在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校验等包。其环境启动包依赖如下图：

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

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

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

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

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

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

npm install -g gulp
安装全局gulp，使gulp可以在任何目录下使用，和java环境变量差不多。
npm install
安装环境依赖，需要到有package.json的文件夹下执行。
gulp
启动前端webserver

gulpfile.js

再来说下gulpfile.js

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

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

参数配置envConfig
env：启动模式，有三种，DEV，DEBUG，PRO。DEV和DEBUG模式下不会压缩js和图片，节省时间，便于调试。
distPath: 生成的前端资源文件路径，有的gulpfile.js里面没有它，其他是分开的，那个可以生成发布在webapp目录下的资源文件。
webserverConfig
服务器启动配置参数
port ：默认打开的端口号
open：默认代开的文件名
host：默认打开的地址，不配置的话默认localhost
livereload:即时刷新，主要用来检测文件变化。

项目架构图

架构说明：

public
前端项目文件夹。
css
用于存放页面css样式的文件夹，理论上里面的文件都会被放入生成的前端资源包。
html
用于放置前端页面的文件夹，理论上里面的文件都会被放入生成的前端资源包。
js
用于放置前端js的文件夹，理论上里面的文件都会被放入生成的前端资源包。
node_modules
npm install 后生成的文件夹，是前端资源包的打包环境及在Web浏览器上查看及debug App提供支持。
resources
用于放置前端静态资源的文件夹，如图片，字体，静态json等，理论上里面的文件都会被放入前端资源包。
gulpfile.js
构建前端环境，生成前端资源包的主要文件。
index.html
前端主要页面，所有资源理论上都会被按需加载进来。
package-lock.json
npm install 之后生成的文件，存放着一些npm之后的包的信息。
package.json
构建前端环境，生成前端资源包的主要文件，里面放置着构建环境及生成资源包所需的依赖。

分析

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

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

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

我们看下api.js和app.js

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

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

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

2、api.globalLoading

全局loading，有两个方法:

api.globalLoading.show();

api.globalLoading.hide();

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

3、api.globalShadow

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

有两个方法：

api.globalShadow.hide();

api.globalShadow.show();

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

4、api.modal.exec

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

5、api.loadJS

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

6、api.loadModal

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

7、api.loadPath

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

8、loadViewport

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

app.js

1、app.alert

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

2、app.confirm

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

3、app.ajax

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

cordova.js

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

GlobalValue.js

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

总结

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

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

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

SakuraTears的博客

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

前言

简介