前端js
孙强 2021/12/8 vue
# JS模块
# 网站初始化
使用$.site对象来设置pjax操作及主题功能；如：菜单栏，工具条和组件等。
在/js/site.js文件中已对网站进行了初始化操作，不需要再重新进行初始化。
# 绑定事件
绑定事件时，尽可能的绑定在 $('#content') 对象上。在新打开标签页时，会解绑该对象上的事件，避免造成污染。
var $content = $('#content');
$content.on('click', '#submit', function() {
//...
});
$content.on('click', '#table .remove', function() {
//...
});
# 离开页面
使用$.leavePage 函数可以为当前页写一些离开页面时的功能，ITH-UI 会在离开该页时运行该函数。例如：
$.leavePage = function () {
console.log('leavePage');
};
# 使用局部变量
页面中的变量及函数尽量使用局部变量，避免使用全局变量。
若必须使用全局变量，在离开页面时需要将变量置空：
var func = function() {
//...
}
$.leavePage = function () {
func = null;
};
# 全局配置
使用$.configs对象可以配置一些常用变量在其他地方使用。
$.configs.set(name, options)配置变量，代码如下：
$.configs.set('site', {
base: '/static',
lang: 'zh_CN'
});
$.configs.get(name[, options.name]) 获取变量，代码如下：
$.configs.get('site','lang');
$.configs.extend(name[, options]) 扩展变量对象，代码如下：
$.configs.extend('param', {});
# 接口地址统一管理
调用接口地址写在common/js/interface.js文件的Interface对象中，依赖site模块。
$.post($.Interface.file.get, function(res) {
})
# JS内容国际化
JS文件的国际化内容写在/common/js/local/文件夹下的相应语言文件中，依赖site模块。
console.log($.Local.common.confirmDelete)
# 模块化加载
ITH-UI 使用requireJS模块化加载js文件
require(['jquery'], function($) {
//...
});
# require模块别名：
| 模块别名 | 描述 | 提供对象 |
|---|---|---|
| jquery | jQuery库 | $ |
| bootstrap | Bootstrap | |
| Map | JS实现的Map | |
| security | RSA加密 | RSAUtils |
| pagination | 分页 | |
| table | BootstrapTable | |
| table.treegrid | 带树形的BootstrapTable | |
| table.editable | 可编辑单元格的带树形的BootstrapTable | |
| table.search | 自定义搜索的BootstrapTable | |
| moment | 日期时间解析 | moment |
| datetime | 日期时间选择插件 | |
| slimscroll | 滚动条美化 | |
| toastr | 消息通知 | |
| multi-select | 多选select | |
| select2 | select美化 | |
| switch | 开关 | |
| jquery.ladda | 按钮防重复提交 | |
| confirm | confirm弹框 | |
| validation | 表单校验 | |
| nestable | 可拖拽树 | |
| jstree | 树形结构 | |
| template | 模板引擎 | template |
| cat-select | 多级联动选择 | |
| clipboard | 复制剪切板 | Clipboard |
| ueditor | 百度编辑器 | UE |
| smstime | 发送短信倒计时 | SmsTime |
| backstretch | 背景图切换 | |
| catupload | 文件上传 | |
| catclass | 自定义树列表 | |
| util | JS工具方法 | _ |
| imagezoom | 图片轮播 | |
| mock | 接口模拟数据 | Mock |
| Interface | 接口地址统一管理 | |
| Local | JS内容国际化 | |
| param | 常用网站参数配置 | |
| numbox | 数字输入框 | |
| imagezoom | 图片轮播 |