前端js脚本开发规范

1. 前端js脚本规范说明

js脚本封装方面: javamis平台前端js基于 BootStrap框架为基础，做了进一步封装和强化，比如：

封装常用初始化表格，使得Table表格更加丰富和实用
封装常用隐藏显示，使得当字符串长度长于表格一列显示时，会自动隐藏超出的部分，超出部分使用省略号显示
封装常用显示组件，使得鼠标经过Table表格行或列时，会完整显示和提示名称
封装常用数据字典，实现可以灵活与[数据字典]绑定，如：[用户管理] 列表 '性别'
封装通用表单验证，实现只要调用验证函数，即完成本页面表单的验证绑定关系
封装通用搜索函数，使得用户无需关注搜索函数内部结构，只需要输入搜索参数即可实现搜索功能，更加便捷
封装通用刷新函数，一行刷新的代码，使得每个页面都通用，所以使用时直接粘贴和复制即可
封装通用操作栏函数，使得操作栏按钮、样式、布局更灵活美观
封装通用单击事件函数，实现点击zTree树时，触发刷新、传参等功能
封装通用初始化列表，实现每个页面向后台请求数据时，只需要输入后台对应的参数路径即可，如："/user/listData"
封装通用ztree树，实现每个页面向后台请求数据时，只需要输入后台对应的参数路径即可，如："/department/getDeptTree"

1.1 javascript文件命名规范

为了提高编码效率和命名规范，平台前端js(javascript)采用以下规范：

业务 xx.js文件请定义在src/main/resources/static/js/目录下
根据业务需求在src/main/resources/static/js/目下创建相应的子文件夹，
如：src/main/resources/static/js/product
根据业务模块的名称命名脚本的名称，如：用户管理脚本命名名称：user.js 部门管理脚本命名名称：department.js

举例：下面是以javamis-core核心模块创建js文件为例

(图：js/javascript静态文件命名规范)

温馨提示：上述是以平台javamis-core核心模块为例展示js脚本命名规范，您书写代码时请在javamis-web模块src/main/resources/static/js/目录下创建相应的业务子目录和定义js文件！

2. 举一个 '角色管理' 脚本的例子

2.1 role.js(角色管理脚本)，此次我们拿 "角色管理"的脚本(role.js) 为例，以下是"角色管理"脚本的代码：

														
															
														
															
/**
 * @name    角色管理脚本封装
 * @version:1.0.2
 * @author:	HuiJia
 * @QQ号： 	763236277
 * @QQ群： 	327773608
 * @邮箱: 	javamis@163.com
 * @site：	http://www.javamis.com
 */
var obj = {
    table: null,
    tableId:'tableList',
    
    /**
     * 初始化表格的列
     */
    initColumns:function () {
        var columns = [
            {title: 'Id', field: 'id', visible: true, align: 'center', valign: 'middle',width:'6%',sortable: true,cellStyle:ims.hidden,formatter: function (value, row, index) {
            	return ims.serialNumber(index,obj.tableId);
            }},
            {title: '角色名称', field: 'name', align: 'center', valign: 'middle',width:'10%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
            {title: '父角色名称', field: 'parentName', align: 'center', valign: 'middle', width:'10%',sortable: true,cellStyle:ims.hidden,formatter:ims.display},
            {title: '角色类型', field: 'roleTypeName', align: 'center', valign: 'middle',width:'10%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
            {title: '更新时间', field: 'updateTime', align: 'center', valign: 'middle',width:'10%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
            {title: '角色编码', field: 'code', align: 'center', valign: 'middle', width:'10%',sortable: true,cellStyle:ims.hidden,formatter:ims.display},
            {title: '备注信息', field: 'remark', align: 'center', valign: 'middle',width:'10%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
            {title: '状态', field: 'status', align: 'center', valign: 'middle',width:'7%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
            {
                field: 'payStatus',
                width: '12%',
                title: '操作',
                formatter: actionFormatter,
                align:'center'
            }
        ];
        return columns;
    },
    
    /**
     * 搜索参数
     */
    params:function(){
    	var params = {	
    			"name":$.trim($("#name").val()),
				"roleType":$("#roleType").val(),
				"code":$.trim($("#code").val()),
				"remark":$.trim($("#remark").val()),
				"status":$.trim($("#status").val())
			};
    	return params;
    },
    
    /**
     * 搜索
     */
    search:function(){
    	obj.table.refresh({query: obj.params()});
    }
};

//操作栏的格式化
function actionFormatter(value, row, index) {
    var id = row.id;
    var name = row.name;
    var result = "";
    result += "<a href='javascript:;' class='btn btn-white btn-sm' onclick="addPage('/role/edit/" + id + "', '角色编辑')" title='角色编辑'>编辑</a>";
    result += "<a href='javascript:;' class='btn btn-light-blue btn-sm' onclick="addLayer('/role/authority/" + id + "','菜单选择树')" title='授权菜单'>分配权限</a>";
    result += "<a href='javascript:;' class='btn btn-red btn-sm' onclick="deletePage('/role/delete','" + id +"','"+name+"')" title='删除'>删除</a>";
    return result;
}

$(function () {
	  //1.为form页面加载性别字典值
	  //loadDict();
	
	  //2.初始化列表
	  obj.table = new initTable(obj.tableId,"/role/listData","server",obj.initColumns());
	  obj.table.setParams(obj.params());
	  obj.table.init();
	
	  //3.表单验证
	  formValidator.init("form",formValidator.formValidate());
});

3. '角色管理' 脚本例子详解

3.1 初始化脚本 ：通过初始化，预先初始加载必要的函数

														
															
														
															
 $(function () {
	  //1.初始化数据字典，为form页面预先加载性别字典值
	  //loadDict();
	
	  //2.初始化列表
	  obj.table = new initTable(obj.tableId,"/role/listData","server",obj.initColumns());
	  obj.table.setParams(obj.params());
	  obj.table.init();
	
	  //3.初始化表单验证
	  formValidator.init("form",formValidator.formValidate());
 });

下面详细介绍搜索参数：

loadDict()： .初始化数据字典，为form页面预先加载性别字典值
new initTable(...)：初始化列表
obj.table.setParams(...)：为表格加载时设置传递参数
obj.table.init()：开始表格初始化工作
formValidator.init(...)：初始化表单验证

3.2 初始化表格 ：初始化Table表格非常简单，您只需要参考下面的内容，根据您的业务实体类字段属性替换下面的title和field，即完成一个标准的表格行，简单吧~

														
															
														
															
	/**
   * 初始化表格
   */
  initColumns:function () {
      var columns = [
          {title: 'Id', field: 'id', visible: true, align: 'center', valign: 'middle',width:'6%',sortable: true,cellStyle:ims.hidden,formatter: function (value, row, index) {
          	return ims.serialNumber(index,obj.tableId);
          }},
          {title: '角色名称', field: 'name', align: 'center', valign: 'middle',width:'10%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
          {title: '父角色名称', field: 'parentName', align: 'center', valign: 'middle', width:'10%',sortable: true,cellStyle:ims.hidden,formatter:ims.display},
          {title: '角色类型', field: 'roleTypeName', align: 'center', valign: 'middle',width:'10%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
          {title: '更新时间', field: 'updateTime', align: 'center', valign: 'middle',width:'10%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
          {title: '角色编码', field: 'code', align: 'center', valign: 'middle', width:'10%',sortable: true,cellStyle:ims.hidden,formatter:ims.display},
          {title: '备注信息', field: 'remark', align: 'center', valign: 'middle',width:'10%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
          {title: '状态', field: 'status', align: 'center', valign: 'middle',width:'7%', sortable: true,cellStyle:ims.hidden,formatter:ims.display},
          {
              field: 'payStatus',
              width: '12%',
              title: '操作',
              formatter: actionFormatter,
              align:'center'
          }
      ];
      return columns;
  }
  
  //操作栏的格式化
	function actionFormatter(value, row, index) {
	    var id = row.id;
	    var name = row.name;
	    var result = "";
	    result += "<a href='javascript:;' class='btn btn-white btn-sm' onclick="addPage('/role/edit/" + id + "', '角色编辑')" title='角色编辑'>编辑</a>";
	    result += "<a href='javascript:;' class='btn btn-light-blue btn-sm' onclick="addLayer('/role/authority/" + id + "','菜单选择树')" title='授权菜单'>分配权限</a>";
	    result += "<a href='javascript:;' class='btn btn-red btn-sm' onclick="deletePage('/role/delete','" + id +"','"+name+"')" title='删除'>删除</a>";
	    return result;
	}

下面详细介绍参数的：

title：表格标题列名称
field：字段属性。如: 角色名称属性: name; 父角色名称属性: parentName
align：水平对齐方式。left: 左对齐；center：居中对齐； right：右对齐
valign：垂直对齐方式。top: 居顶对齐；middle: 居中对齐；bottom：底部对齐
width：表格宽度
sortable：是否排序。true：排序；false:不排序
cellStyle：字符串超过表格宽度时，是否隐藏超出宽度的字符串。true:隐藏; false:不隐藏
formatter：格式函数。value: 值； row:行; index:索引号(如: 1、2、3、4、5等)
serialNumber：序号。封装序号函数，固定写法，直接复制使用即可
actionFormatter：封装操作栏按钮函数。固定写法，替换请求后台路径和表单标题名称后，直接复制使用即可

角色列表效果如下：

(图：角色列表)

3.3 搜索参数

														
															
														
															
 /**
  * 搜索参数
  */
 params:function(){
 	 var params = {	
 		 "name":$.trim($("#name").val()),
		 "roleType":$("#roleType").val(),
		 "code":$.trim($("#code").val()),
		 "remark":$.trim($("#remark").val()),
		 "status":$.trim($("#status").val())
	 };
 	 return params;
 }
 
 /**
  * 搜索
  */
 search:function(){
 	obj.table.refresh({query: obj.params()});
 }

下面详细介绍搜索参数：

name：角色实体类name字段属性
roleType：角色实体类roleType字段属性
code：角色实体类code字段属性
remark：角色实体类remark字段属性
status：角色实体类status字段属性
$("#name").val()：获取role/list.html页面内id="name"的搜索框的值
$("#roleType").val()：获取role/list.html页面内id="roleType"的搜索框的值
$("#code").val()：获取role/list.html页面内id="code"的搜索框的值
$("#remark").val()：获取role/list.html页面内id="remark"的搜索框的值
$("#status").val()：获取role/list.html页面内id="status"的搜索框的值