js重构1-----抽离公用方法，降低页面内的单独方法

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逻辑就是

1. 获取初始化数据，如一些tree要先加载而非等待用户操作的数据
2. 初始化布局，因MIS管理系统一般都不做全局下来的滚动条，仅数据区域存在滚动条（这是我看到的管理系统一般采用的方法，如果有好的全局下拉的实例，或设计还请不吝赐教）
3. 初始化标签：如select 的初始化（包含本地js初始化和获取远程数据初始化两种）、input的初始化、table的初始化。。。
4. 绑定页面元素的事件：查询、增加、修改、删除、导出

由于上面的整体逻辑大概都是差不多的，产生以下想法：

　　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)

整体的改造就这么多，需要对每个库进行慢慢优化。

!这里仅是对自己工作学习的一个记录，算是对自己的督促，不喜勿喷，也欢迎指正

 

转载于:https://www.cnblogs.com/Risingsun-J/p/6539032.html