标签：function 生活 ele 工作 str var checked event
先说一下当前的情况：
来到新公司也已经一个多月，今天是十月三十号，所以，算起来是整整50天(如果是百天，那么小孩子要办百天酒，情侣的这天可能也会过的开心很多)。虽然来了五十天，但是实际上感觉工作了25天左右，因为是第一个项目做完之后，因为人手比较紧张吧，没有后台来，还有需求这块也没有一个需求书，所以我是持续被闲置的状态，所以就每天看看书，小黄书（你不知道的JS）或者是读一读其他大神的博客，要么就是看看代码划划水啥的。这不前两天磊哥让我帮他做一个页面，可能是看不下去了吧哈哈哈。
是一个比较简单的页面 ，那么这个页面的功能和交互：
左侧复选框和右侧列表框联动，右侧列表框有拖拽功能。
基本来说就是这两个。使用Jquery和easyUI。
可能有疑问啊：没啥难的记录他干嘛？
1.是我第一次进行这种封装,对我来说确实是个挑战。
2.不实战就真的不能真正理解看的书中是什么意思。
先把代码贴出来
var Tools = {};
Tools.fieldCheck = (function () {
// 初始化复选框数据
var Fn = function (obj) {
this.checkArray = [];//被选选项
this.total = 0;// 选项总数，用于确认是否已全选
this.initObj = obj.data;//初始化数组
this.commitFn = obj.commit;//提交的回调函数
this.cancelFn = obj.cancel;//取消的回调函数
this.init();
};
Fn.prototype = {
constructor: Fn,
init: function () {
var str = this.getDomStr(this.initObj);
$('#checks').html(str);
this.initRender(this.initObj);
this.eventBind();
},
/**
* @param {Array} array 数据数组用以初始化，控制禁用和勾选回显
* @returns {null} 无返回值
*/
initRender: function (array) {
var _this = this;
$.each(array, function (index, element) {
var child = element.child;
child.forEach(function (ele) {
//总数计算 用来控制
_this.total++;
if (ele.checked) {
$('#' + ele.id).attr('checked', 'checked');
var checked = ele.label + '-' + ele.fieldName + '-' + ele.id + '-' + ele.disabled;
_this.reRender(true, checked);
}
if (ele.disabled) {
$('#' + ele.id).attr('disabled', 'disabled');
}
});
});
},
/**
* 功能 初始化DOM
* @param {Array} array 复选框数据数组
* @returns {String} str 组成复选框的HTML
*/
getDomStr: function (array) {
var str = '<div>';
for (var i = 0; i < array.length; i++) {
var p = array[i];
str += '<div><div class="title ">' + p.label + '</div>';
str += '<div class="items" >';
var child = p.child;
for (var j = 0; j < child.length; j++) {
str += '<div class="item"><input type="checkBox" data-toggle="topjui-checkbox" ';
//data-Info 自定义属性存储复选框信息 label、fieldName、disabled、id
str += 'data-info="' + child[j].label + '-' + child[j].fieldName + '-' + child[j].id + '-' + child[j].disabled + '" id=' + child[j].id + '>';
str += '<label for="' + child[j].id + '">' + child[j].label + '</label></input></div>';
}
str += '</div></div>';
}
return str;
},
/**
* 事件绑定
* @param {function} commitFn 提交按钮回调
* @param {function} cancelFn 取消按钮回调
* @returns {null} 无返回值
*/
eventBind: function () {
var _this = this;
$('#checks').click(function (event) {
event = event || window.event;
if (event.target.tagName === 'INPUT') {
var datastr = $(event.target).attr('data-info');
var dataArray = datastr.split('-');
var dataInfo = dataArray[0] + '-' + dataArray[1] + '-' + dataArray[2] + '-' + dataArray[3];
//存在
var index = _this.checkArray.indexOf(dataInfo);
if (index > -1) {
_this.reRender(false, dataInfo);
} else {
_this.reRender(true, dataInfo);
}
}
});
$('#checkAll').click(function (event) {
// 判断按钮状态
event = event || window.event;
//被选中
$('#checkList').html('');
_this.checkArray = [];
if ($('#checkAll:checked').length > 0) {
$.each(_this.initObj, function (index, element) {
var child = element.child;
$.each(child, function (i, ele) {
var checked = ele.label + '-' + ele.fieldName + '-' + ele.id + '-' + ele.disabled;
_this.reRender(true, checked);
});
});
$('#checks input:checkbox').prop('checked', true);
} else {
$(':checked').prop('checked', false);
}
});
//确定按钮
$('commit').click(function (event) {
event = event || window.event;
_this.commitFn(event, this.handleChecked());
});
$('#cancel').click(function (event) {
event = event || window.event;
_this.cancelFn(event);
});
$('#checkList').click(function (event) {
event = event || window.event;
if (event.target.tagName === 'A') {
_this.reRender(false, $(event.target).attr('data-info'));
}
});
},
/**
* @param {boolean} flag true 为新增 false为删除
* @param {str} info 数据字符串
* @returns {null} 无返回值
*/
reRender: function (flag, info) {
var _this = this;
var infoArray = info.split('-');
//新增
if (flag) {
this.checkArray.push(info);
var str = '<div type="text" class="label" id="' + infoArray[1] + '">';
str += '<div id="' + infoArray[1] + '_drag" >' + infoArray[0];
if (infoArray[3] !== 'true') {
str += '<a href="javascript:;" data-info="' + info + '" class="textbox-icon icon-clear clear " />';
}
str += '</div></div>';
$('#checkList').append(str);
if ($('#checkList').children().length === this.total) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
// 如果全部选中则勾选全选按钮
$('#' + infoArray[1]).draggable({
handle: '#' + infoArray[1] + '_drag',
axis: 'v',
proxy: function (source) {
var p = $('<div style="border:2px solid #ccc;width:80px"></div>');
p.html($(source).html()).appendTo('body');
return p;
},
onBeforeDrag: function (e) {
//点击A标签停止拖动
if (e.target.tagName == 'A') {
return false;
}
$('.label').droppable({
accept: '#' + infoArray[1],
onDrop: function (e, source) {
$(e.target).removeClass('ondrop');
// $(source).removeClass("ondrop");
//获取到当前降落的元素
// e为被降落的元素;
// source为降落元素
var id = e.target.id;
//清除由于拖拽产生的绝对定位样式
$(source).css('position', 'static');
$(source).css('top', 0);
$(source).css('left', 0);
$('#' + id).before(source);
_this.resort(source.id, id);
},
onDragEnter: function (e, source) {
$(e.target).addClass('ondrop');
},
onDragLeave: function (e, source) {
$(e.target).removeClass('ondrop');
},
});
},
onStopDrag: function (e) {
$('#' + infoArray[1]).css('position', 'static');
$('#' + infoArray[1]).css('top', 0);
$('#' + infoArray[1]).css('left', 0);
},
});
} else {
this.checkArray.splice(this.checkArray.indexOf(info), 1);
$('#' + infoArray[1]).remove();
$('#' + infoArray[2]).prop('checked', false);
$('#checkAll').prop('checked', false);
}
},
/**
* 功能 重排数组顺序使与HTML顺序保持一致
* @param {any} prev 拖动元素
* @param {any} next 被插入元素
* @returns {null} 无返回值
*/
resort: function (prev, next) {
var prevIndex = -1;
var nextIndex = -1;
$.each(this.checkArray, function (index, ele) {
var infoArray = ele.split('-');
if (infoArray[1] === next) {
nextIndex = index;
}
if (infoArray[1] === prev) {
prevIndex = index;
}
});
this.checkArray.splice(nextIndex, 0, this.checkArray[prevIndex]);
var k = prevIndex > nextIndex ? 1 : 0;
this.checkArray.splice(prevIndex + k, 1);
},
getChecked: function () {
return this.handleChecked();
},
/**
* 功能：将已选中的字符串对象转为对象
* @returns {null} 已选对象数组
*/
handleChecked: function () {
var array = [];
$.each(this.checkArray, function (index, ele) {
var objArray = ele.split('-');
array.push({ label: objArray[0], fieldName: objArray[1], id: objArray[2] });
});
return array;
},
};
return Fn;
}());
并没有贴出HTML：）
下面写下我的收获吧：
1.现在面向对象思想开发，感觉也就是原子性的体现，同时也是可能也是高内聚，低耦合的一种体现。
一个组件公开和私有的是要分清楚的，比如我有些方法实际上并不是接口的，但是我还是把他放在了原型链对象上，这是不应该的，因为这是一个立即执行函数，所以函数内也是可以声名一些函数的，即
(function(){
/*可以写一些公共函数供构造函数中的函数公用，能找到是因为作用域链的原因。这样这些函数就成了封闭性的函数，而不是接口了，不过不好的应该是函数会一直在内存中存在，因为原型对象的调用会持有他//的引用，所以这些公共函数无法退出内存。，但是我这个做的并不好，因为我全都放在了原型链上，让一个对象很笨重，另外就是给使用者一种可以调用的感觉，其实是这些函数是不能调用的，擅自调用甚至会有一些问题，以后这个问题就要避免，可以问一问磊哥，感觉这样是不对的。*/
}())；
2.是实现思路上的一个问题：
先说一下整体思路：传入一个data ,data中的对象会有四个属性：label fieldName id checked disabled child 六个属性 checked和disabled用来控制复选框状态 ，child是子数组，属性和父级一样，然后一个数组checkedList用来记录被勾选的选项，渲染左侧复选框时，我会把元素信息存在标签上的一个自定义属性中，这么做的原因是：因为点击了复选框，那么就需要在右侧列表添加一个或者删除一个列表元素，但是我不想再点击复选框时，再去data中遍历查询一些信息，因为data是有层级关系，遍历起来很麻烦，我实在不想再前端进行很多的循环，所以我就将所需的信息存了起来，然后再新增或者删除时，就直接拿到信息，然后查询元素信息，就可以直接进行操作了。但是有一个弊端，checkedList中的元素是一个平面一个字符串（有人就问，为啥要用字符串呢？你直接把对象序列化存进去，然后反序列化放数组里多好，反序列化会增加一个问题，就是在数组中找到一个对象，是不行的，因为数组的indexOf使用的是‘===’，而当我去验证我的checkedList中是否有这个对象时，那就还要写forEach，并且去比较属性的值，我觉得更加复杂。）会让数据看起来有些奇怪。然后就是在取数据是也会让他看起来怪怪的，就是要反序列化，我是使用分隔符 '-'进行分割的，所以就代码就看起来很麻烦。写这一段时总想还不如循环，现在想想循环可能更加的简洁，只是启动很多次循环会让我有点烦。我还是更喜欢索引，够直接。我采用这个方案的初衷就是为了提高性能。可能我觉得代码上使他看起来更麻烦。代码逻辑也复杂了不少。究竟孰优孰劣，我想这也不是一个问题，因为这个功能太小了，以至于没人会在意他，但是我还是希望能真正注意执行的效率。尽管我的处理实际上可能是更糟糕的，如果哪位大神觉得确实是这样，或者是有更好的方案，一定要给我留言，谢谢！
3.我想到另外一种实现，就在遍历时就直接创建出所有的元素 形成一个map 左侧复选框和右侧列表元素的map ，使用使用id作为属性值，对象作为属性值，另外一个map使用另外一个属性名作为属性值，这样再查询dom时更加的方便，这样就可以实现dom复用，然后要在右侧列表中添加一个属性控制是否显示，其实是是否被勾选的标记这样就从重新构建元素变成了存取元素。不知道jquery被easyUI修改后还能不能存储？还有很多疑问...
4.不知道我的上述思考会不会显得不太聪明的样子哈哈哈，请见谅。
那我就继续看书去了，拜拜！
标签：function,生活,ele,工作,str,var,checked,event 来源： https://www.cnblogs.com/DotHouse-betemE/p/13904488.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。