js重构的目的
- 模块化js，减少代码
- js版本控制，不再让用户手动刷新
重构前
之前是除了引入的插件如jquery，bootstrap，ztree 等库，每个页面都要写一个对应的js文件，然后引入。
如以下结构
|user
--|index.html
--|list.html
--|js
--|--|index.js
--|--|list.js
这样的好处是结构清晰，每个页面都有对应的js文件，这个页面的功能都在这个js内完成。
但做的页面多了后发现其实很多页面的功能相似，而区别仅仅有可能是获取数据的url不同，页面的元素ID不同，其他基本上相同。
所以js重构第一步，抽离公用方法，抽离后结构如下
-js
--|lib
--|--|jquery.min.js
--|--|bootstrap.min.js
--|jLink
--|--|j_xx.js
--|module
--|--|user.js
jLink 为自己抽离的库，lib为引入别的插件库，如jquery、bootstrap、ztree、bootstrap-table、jquery.cookie。
基本上每个页面的js逻辑就是
- 获取初始化数据，如一些tree要先加载而非等待用户操作的数据
- 初始化布局，因MIS管理系统一般都不做全局下来的滚动条，仅数据区域存在滚动条（这是我看到的管理系统一般采用的方法，如果有好的全局下拉的实例，或设计还请不吝赐教）
- 初始化标签：如select 的初始化（包含本地js初始化和获取远程数据初始化两种）、input的初始化、table的初始化。。。
- 绑定页面元素的事件：查询、增加、修改、删除、导出
由于上面的整体逻辑大概都是差不多的，产生以下想法：
1. 页面执行完成后调用公共方法，执行初始化，base.init()
2. 初始化布局 base.layout();
3. 标签的初始化，根据定义好的selector来选择初始化form.init() /table.init()/ tree.init();
4. 页面元素事件不再使用jquery绑定方法，直接在html中写入onclick onchange 等等事件，以前使用bind(),全写在js中虽然提高了js代码的维护性，但增加了工作量。
jLink中包含以下库！！！
- jBase.js 调用页面初始化
- 工具类 jUtil.js 各种数据的临时验证、计算等等(ip/金额)
- 常量类 jConstant.js 用于字段显示时的formatter和select框的初始化
-
国际化类 jLanguage.js 用于js中提示信息的国际化
- 树操作类 jTree.js 选择框组合树 和 div显示树
- 表格操作类 jTable.js 在bootstrap-table基础上添加方法，提供treeTable 和各种需要用到的操作方法
- 数据交换类 jData.js ajax提交，form提交，同步提交，异步提交
- form操作类 jForm.js
- 获取表单值json
- 填充表单
- 表单验证
- 表单提交
- 表单信息重置
- 表单元素的初始化
窗口类 jDialog.js
- 加载等待框
- 包含信息的加载框
- 弹出框
- 确认框
- 告警框
- 自动消失的alert框
- 不自动消失的alert框
- 根据selector显示页面框 输入对象，需要填充表单
有人会说现在React Angular Vue这么火了，还费那劲干啥，他们做的确实很好了。但确实有不换的理由
1. 需要整个改写前端，工作量巨大
2. 虽然现在大家在淘汰IE之前的老版本，但不可否然，依然有很多企业内部还在用着XP IE6 ，XP最多也就只能升级到IE8 ，所以还是兼容一下IE8
每个库使用匿名函数来防污染：
(function($){
var jLink = {};
jLink.foo = function(){};
window.jLink = jLink;
})(jQuery)
整体的改造就这么多，需要对每个库进行慢慢优化。
!这里仅是对自己工作学习的一个记录，算是对自己的督促，不喜勿喷，也欢迎指正