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)
整體的改造就這么多，需要對每個庫進行慢慢優化。
!這里僅是對自己工作學習的一個記錄，算是對自己的督促，不喜勿噴，也歡迎指正