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

在项目的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目录下的资源文件。

   

2. webserverConfig

   服务器启动配置参数

   port ：默认打开的端口号

   open：默认代开的文件名

   host：默认打开的地址，不配置的话默认localhost

   liverelo