优化 tree 代码书写规范

src/modules/tree.js

@@ -5,71 +5,84 @@
 layui.define('form', function(exports){
   "use strict";
   
-  var $ = layui.$
+  var $ = layui.$;
-  ,form = layui.form
+  var form = layui.form;
-  ,layer = layui.layer
+  var layer = layui.layer;
   
   // 模块名
-  ,MOD_NAME = 'tree'
+  var MOD_NAME = 'tree';
 
   // 外部接口
-  ,tree = {
+  var tree = {
-    config: {}
+    config: {},
-    ,index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0
+    index: layui[MOD_NAME] ? (layui[MOD_NAME].index + 10000) : 0,
 
     // 设置全局项
-    ,set: function(options){
+    set: function(options){
       var that = this;
       that.config = $.extend({}, that.config, options);
       return that;
-    }
+    },
     
     // 事件
-    ,on: function(events, callback){
+    on: function(events, callback){
       return layui.onevent.call(this, MOD_NAME, events, callback);
     }
-  }
+  };
 
   // 操作当前实例
-  ,thisModule = function(){
+  var thisModule = function(){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,id = options.id || that.index;
+    var id = options.id || that.index;
     
     thisModule.that[id] = that; // 记录当前实例对象
     thisModule.config[id] = options; // 记录当前实例配置项
     
     return {
-      config: options
+      config: options,
       // 重置实例
-      ,reload: function(options){
+      reload: function(options){
         that.reload.call(that, options);
-      }
+      },
-      ,getChecked: function(){
+      getChecked: function(){
         return that.getChecked.call(that);
-      }
+      },
-      ,setChecked: function(id){//设置值
+      setChecked: function(id){// 设置值
         return that.setChecked.call(that, id);
       }
     }
-  }
+  };
   
   // 获取当前实例配置项
-  ,getThisModuleConfig = function(id){
+  var getThisModuleConfig = function(id){
     var config = thisModule.config[id];
     if(!config) hint.error('The ID option was not found in the '+ MOD_NAME +' instance');
     return config || null;
   }
 
   // 字符常量
-  ,SHOW = 'layui-show', HIDE = 'layui-hide', NONE = 'layui-none', DISABLED = 'layui-disabled'
+  var SHOW = 'layui-show';
+  var HIDE = 'layui-hide';
+  var NONE = 'layui-none';
+  var DISABLED = 'layui-disabled';
   
-  ,ELEM_VIEW = 'layui-tree', ELEM_SET = 'layui-tree-set', ICON_CLICK = 'layui-tree-iconClick'
+  var ELEM_VIEW = 'layui-tree';
-  ,ICON_ADD = 'layui-icon-addition', ICON_SUB = 'layui-icon-subtraction', ELEM_ENTRY = 'layui-tree-entry', ELEM_MAIN = 'layui-tree-main', ELEM_TEXT = 'layui-tree-txt', ELEM_PACK = 'layui-tree-pack', ELEM_SPREAD = 'layui-tree-spread'
+  var ELEM_SET = 'layui-tree-set';
-  ,ELEM_LINE_SHORT = 'layui-tree-setLineShort', ELEM_SHOW = 'layui-tree-showLine', ELEM_EXTEND = 'layui-tree-lineExtend'
+  var ICON_CLICK = 'layui-tree-iconClick';
+  var ICON_ADD = 'layui-icon-addition';
+  var ICON_SUB = 'layui-icon-subtraction';
+  var ELEM_ENTRY = 'layui-tree-entry';
+  var ELEM_MAIN = 'layui-tree-main';
+  var ELEM_TEXT = 'layui-tree-txt';
+  var ELEM_PACK = 'layui-tree-pack';
+  var ELEM_SPREAD = 'layui-tree-spread';
+  var ELEM_LINE_SHORT = 'layui-tree-setLineShort';
+  var ELEM_SHOW = 'layui-tree-showLine';
+  var ELEM_EXTEND = 'layui-tree-lineExtend';
  
   // 构造器
-  ,Class = function(options){
+  var Class = function(options){
     var that = this;
     that.index = ++tree.index;
     that.config = $.extend({}, that.config, tree.config, options);
@@ -78,18 +91,18 @@ layui.define('form', function(exports){
 
   // 默认配置
   Class.prototype.config = {
-    data: []  //数据
+    data: [],  // 数据
     
-    ,showCheckbox: false  //是否显示复选框
+    showCheckbox: false,  // 是否显示复选框
-    ,showLine: true  //是否开启连接线
+    showLine: true,  // 是否开启连接线
-    ,accordion: false  //是否开启手风琴模式
+    accordion: false,  // 是否开启手风琴模式
-    ,onlyIconControl: false  //是否仅允许节点左侧图标控制展开收缩
+    onlyIconControl: false,  // 是否仅允许节点左侧图标控制展开收缩
-    ,isJump: false  //是否允许点击节点时弹出新窗口跳转
+    isJump: false,  // 是否允许点击节点时弹出新窗口跳转
-    ,edit: false  //是否开启节点的操作图标
+    edit: false,  // 是否开启节点的操作图标
     
-    ,text: {
+    text: {
-      defaultNodeName: '未命名' //节点默认名称
+      defaultNodeName: '未命名', // 节点默认名称
-      ,none: '无数据'  //数据为空时的文本提示
+      none: '无数据'  // 数据为空时的文本提示
     }
   };
   
@@ -107,8 +120,8 @@ layui.define('form', function(exports){
 
   // 主体渲染
   Class.prototype.render = function(){
-    var that = this
+    var that = this;
-    ,options = that.config;
+    var options = that.config;
     
     that.checkids = [];
 
@@ -163,15 +176,15 @@ layui.define('form', function(exports){
 
   // 节点解析
   Class.prototype.tree = function(elem, children){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,data = children || options.data;
+    var data = children || options.data;
 
     // 遍历数据
     layui.each(data, function(index, item){
-      var hasChild = item.children && item.children.length > 0
+      var hasChild = item.children && item.children.length > 0;
-      ,packDiv = $('<div class="layui-tree-pack" '+ (item.spread ? 'style="display: block;"' : '') +'></div>')
+      var packDiv = $('<div class="layui-tree-pack" '+ (item.spread ? 'style="display: block;"' : '') +'></div>');
-      ,entryDiv = $(['<div data-id="'+ item.id +'" class="layui-tree-set'+ (item.spread ? " layui-tree-spread" : "") + (item.checked ? " layui-tree-checkedFirst" : "") +'">'
+      var entryDiv = $(['<div data-id="'+ item.id +'" class="layui-tree-set'+ (item.spread ? " layui-tree-spread" : "") + (item.checked ? " layui-tree-checkedFirst" : "") +'">'
         ,'<div class="layui-tree-entry">'
           ,'<div class="layui-tree-main">'
             // 箭头
@@ -260,14 +273,14 @@ layui.define('form', function(exports){
 
   // 展开节点
   Class.prototype.spread = function(elem, item){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,entry = elem.children('.'+ELEM_ENTRY)
+    var entry = elem.children('.'+ELEM_ENTRY);
-    ,elemMain = entry.children('.'+ ELEM_MAIN)
+    var elemMain = entry.children('.'+ ELEM_MAIN);
-    ,elemIcon = entry.find('.'+ ICON_CLICK)
+    var elemIcon = entry.find('.'+ ICON_CLICK);
-    ,elemText = entry.find('.'+ ELEM_TEXT)
+    var elemText = entry.find('.'+ ELEM_TEXT);
-    ,touchOpen = options.onlyIconControl ? elemIcon : elemMain //判断展开通过节点还是箭头图标
+    var touchOpen = options.onlyIconControl ? elemIcon : elemMain; // 判断展开通过节点还是箭头图标
-    ,state = '';
+    var state = '';
     
     // 展开收缩
     touchOpen.on('click', function(e){
@@ -323,9 +336,9 @@ layui.define('form', function(exports){
   
   // 计算复选框选中状态
   Class.prototype.setCheckbox = function(elem, item, elemCheckbox){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,checked = elemCheckbox.prop('checked');
+    var checked = elemCheckbox.prop('checked');
     
     if(elemCheckbox.prop('disabled')) return;
 
@@ -343,10 +356,10 @@ layui.define('form', function(exports){
       // 若无父节点，则终止递归
       if(!thisNodeElem.parents('.'+ ELEM_SET)[0]) return;
 
-      var state
+      var state;
-      ,parentPack = thisNodeElem.parent('.'+ ELEM_PACK)
+      var parentPack = thisNodeElem.parent('.'+ ELEM_PACK);
-      ,parentNodeElem = parentPack.parent()
+      var parentNodeElem = parentPack.parent();
-      ,parentCheckbox =  parentPack.prev().find('input[same="layuiTreeCheck"]');
+      var parentCheckbox =  parentPack.prev().find('input[same="layuiTreeCheck"]');
 
       // 如果子节点有任意一条选中，则父节点为选中状态
       if(checked){
@@ -373,10 +386,10 @@ layui.define('form', function(exports){
   
   // 复选框选择
   Class.prototype.checkClick = function(elem, item){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,entry = elem.children('.'+ ELEM_ENTRY)
+    var entry = elem.children('.'+ ELEM_ENTRY);
-    ,elemMain = entry.children('.'+ ELEM_MAIN);
+    var elemMain = entry.children('.'+ ELEM_MAIN);
     
     
     
@@ -384,8 +397,8 @@ layui.define('form', function(exports){
     elemMain.on('click', 'input[same="layuiTreeCheck"]+', function(e){
       layui.stope(e); // 阻止点击节点事件
 
-      var elemCheckbox = $(this).prev()
+      var elemCheckbox = $(this).prev();
-      ,checked = elemCheckbox.prop('checked');
+      var checked = elemCheckbox.prop('checked');
       
       if(elemCheckbox.prop('disabled')) return;
       
@@ -393,29 +406,29 @@ layui.define('form', function(exports){
 
       // 复选框点击产生的回调
       options.oncheck && options.oncheck({
-        elem: elem
+        elem: elem,
-        ,checked: checked
+        checked: checked,
-        ,data: item
+        data: item
       });
     });
   };
 
   // 节点操作
   Class.prototype.operate = function(elem, item){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,entry = elem.children('.'+ ELEM_ENTRY)
+    var entry = elem.children('.'+ ELEM_ENTRY);
-    ,elemMain = entry.children('.'+ ELEM_MAIN);
+    var elemMain = entry.children('.'+ ELEM_MAIN);
 
     entry.children('.layui-tree-btnGroup').on('click', '.layui-icon', function(e){
       layui.stope(e);  // 阻止节点操作
 
-      var type = $(this).data("type")
+      var type = $(this).data("type");
-      ,packCont = elem.children('.'+ELEM_PACK)
+      var packCont = elem.children('.'+ELEM_PACK);
-      ,returnObj = {
+      var returnObj = {
-        data: item
+        data: item,
-        ,type: type
+        type: type,
-        ,elem:elem
+        elem:elem
       };
       // 增加
       if(type == 'add'){
@@ -434,8 +447,9 @@ layui.define('form', function(exports){
         };
 
         // 新增节点
-        var key = options.operate && options.operate(returnObj)
+        var key = options.operate && options.operate(returnObj);
-        ,obj = {};
+        var obj = {};
+
         obj.title = options.text.defaultNodeName;
         obj.id = key;
         that.tree(elem.children('.'+ELEM_PACK), [obj]);
@@ -445,8 +459,10 @@ layui.define('form', function(exports){
           // 节点本身无子节点
           if(!packCont[0]){
             // 遍历兄弟节点，判断兄弟节点是否有子节点
-            var siblings = elem.siblings('.'+ELEM_SET), num = 1
+            var siblings = elem.siblings('.'+ELEM_SET)
-            ,parentPack = elem.parent('.'+ELEM_PACK);
+            var num = 1;
+            var parentPack = elem.parent('.'+ELEM_PACK);
+
             layui.each(siblings, function(index, i){
               if(!$(i).children('.'+ELEM_PACK)[0]){
                 num = 0;
@@ -551,10 +567,12 @@ layui.define('form', function(exports){
               var elemDel = function(elem){
                 // 若无父结点，则不执行
                 if(!elem.parents('.'+ELEM_SET)[0]) return;
-                var siblingTree = elem.siblings('.'+ELEM_SET).children('.'+ELEM_ENTRY)
+                var siblingTree = elem.siblings('.'+ELEM_SET).children('.'+ELEM_ENTRY);
-                ,parentTree = elem.parent('.'+ELEM_PACK).prev()
+                var parentTree = elem.parent('.'+ELEM_PACK).prev();
-                ,checkState = parentTree.find('input[same="layuiTreeCheck"]')[0]
+                var checkState = parentTree.find('input[same="layuiTreeCheck"]')[0];
-                ,state = 1, num = 0;
+                var state = 1;
+                var num = 0;
+
                 // 若父节点未勾选
                 if(checkState.checked == false){
                   // 遍历兄弟节点
@@ -583,8 +601,10 @@ layui.define('form', function(exports){
             // 若开启连接线
             if(options.showLine){
               // 遍历兄弟节点，判断兄弟节点是否有子节点
-              var siblings = elem.siblings('.'+ELEM_SET), num = 1
+              var siblings = elem.siblings('.'+ELEM_SET);
-              ,parentPack = elem.parent('.'+ELEM_PACK);
+              var num = 1;
+              var parentPack = elem.parent('.'+ELEM_PACK);
+
               layui.each(siblings, function(index, i){
                 if(!$(i).children('.'+ELEM_PACK)[0]){
                   num = 0;
@@ -651,19 +671,19 @@ layui.define('form', function(exports){
 
   // 部分事件
   Class.prototype.events = function(){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,checkWarp = that.elem.find('.layui-tree-checkedFirst');
+    var checkWarp = that.elem.find('.layui-tree-checkedFirst');
     
     // 初始选中
     that.setChecked(that.checkids);
     
     // 搜索
     that.elem.find('.layui-tree-search').on('keyup', function(){
-      var input = $(this)
+      var input = $(this);
-      ,val = input.val()
+      var val = input.val();
-      ,pack = input.nextAll()
+      var pack = input.nextAll();
-      ,arr = [];
+      var arr = [];
 
       // 遍历所有的值
       pack.find('.'+ ELEM_TEXT).each(function(){
@@ -712,10 +732,10 @@ layui.define('form', function(exports){
 
   // 得到选中节点
   Class.prototype.getChecked = function(){
-    var that = this
+    var that = this;
-    ,options = that.config
+    var options = that.config;
-    ,checkId = []
+    var checkId = [];
-    ,checkData = [];
+    var checkData = [];
     
     // 遍历节点找到选中索引
     that.elem.find('.layui-form-checked').each(function(){
@@ -749,14 +769,14 @@ layui.define('form', function(exports){
 
   // 设置选中节点
   Class.prototype.setChecked = function(checkedId){
-    var that = this
+    var that = this;
-    ,options = that.config;
+    var options = that.config;
 
     // 初始选中
     that.elem.find('.'+ELEM_SET).each(function(i, item){
-      var thisId = $(this).data('id')
+      var thisId = $(this).data('id');
-      ,input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]')
+      var input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]');
-      ,reInput = input.next();
+      var reInput = input.next();
       
       // 若返回数字
       if(typeof checkedId === 'number'){