看这篇文章之前，您得先了解一下面向对象以及闭包函数的概念，这样才能有助于您理解下面的内容。
在本周的学习前端过程中，因为页面量大，所以老师让我采用面向对象的方法去写（一开始全部都是用函数解决一切......）
先说一下用这个的好处。
1、作用域隔离。
2、结构清晰明了
本次演示的demo
demo
html代码
我们先来用面向对象的思想分解一下这个页面
面向对象方法拆解页面
现在先来确定一下逻辑
三个对象【一个大对象、两个小对象】
大对象里面四个点击事件分别控制其他两个小对象的一些方法
现在的问题出在了，大对象里面的点击事件如果去调用小对象里面的方法？？
看一下我之前的写法【麻(nao)烦(can)写法】
window.bigBox = {
init: function() {
var item1BtnAdd = document.querySelector('.item1-btn-add');
var item1BtnDelete = document.querySelector('.item1-btn-delete');
var item2BtnAdd = document.querySelector('.item2-btn-add');
var item2BtnDelete = document.querySelector('.item2-btn-delete');
var oItem1 = document.querySelector('.item1');
var oItem2 = document.querySelector('.item2');
item1BtnAdd.addEventListener('click', function() {
bigBox.item1.addInnerHtmlItem1(oItem1, '添加item1');
});
item1BtnDelete.addEventListener('click', function() {
bigBox.item1.deleteInnerHtmlItem1(oItem1);
});
item2BtnAdd.addEventListener('click', function() {
bigBox.item2.addInnerHtmlItem2(oItem2, '添加item2');
});
item2BtnDelete.addEventListener('click', function() {
bigBox.item2.deleteInnerHtmlItem2(oItem2);
});
},
item1: {
addInnerHtmlItem1(oItem1, message) {
oItem1.innerHTML += message;
},
deleteInnerHtmlItem1(oItem1) {
oItem1.innerHTML = '';
}
},
item2: {
addInnerHtmlItem2(oItem2, message) {
oItem2.innerHTML += message;
},
deleteInnerHtmlItem2(oItem2) {
oItem2.innerHTML = '';
}
}
}
bigBox.init();
</script>
我在这里的问题是，代码耦合度太高，无法管理，我是把item1、item2对象中的属性放在了大的对象中去初始化，然后调用其他两个对象的时候，把属性传过去，我现在特别不能理解以前为什么要这么写，可能我想着的是用一个IIFE（立即执行）函数中把整个大对象的数据都处理完毕。显然这样的是非常不好的。 就是应该让每个对象拥有自己的属性，不该把自己的孩子放给别人去生？？？
所以，我用了闭包函数的方法改造了一下（突然之间想出来的）。不知道对不对，大家仅作参考。
<script>
window.bigBox = {
init: function() {
// 初始化属性
var item1BtnAdd = document.querySelector('.item1-btn-add');
var item1BtnDelete = document.querySelector('.item1-btn-delete');
var item2BtnAdd = document.querySelector('.item2-btn-add');
var item2BtnDelete = document.querySelector('.item2-btn-delete');
// 四个点击事件
item1BtnAdd.addEventListener('click', function() {
bigBox.item1.initItem1().addInnerHtmlItem1('添加item1');
});
item1BtnDelete.addEventListener('click', function() {
bigBox.item1.initItem1().deleteInnerHtmlItem1();
});
item2BtnAdd.addEventListener('click', function() {
bigBox.item2.initItem2().addInnerHtmlItem2('添加item2');
});
item2BtnDelete.addEventListener('click', function() {
bigBox.item2.initItem2().deleteInnerHtmlItem2();
});
},
item1: {
initItem1() {
// 初始化属性
var oItem1 = document.querySelector('.item1');
// 两个方法
function addInnerHtmlItem1(message) {
oItem1.innerHTML += message;
}
function deleteInnerHtmlItem1() {
oItem1.innerHTML = '';
}
// 把自己的方法暴露给别人！！！
return {
addInnerHtmlItem1,
deleteInnerHtmlItem1
}
}
},
item2: {
initItem2() {
// 初始化属性
var oItem2 = document.querySelector('.item2');
//两个方法
function addInnerHtmlItem2(message) {
oItem2.innerHTML += message;
}
function deleteInnerHtmlItem2() {
oItem2.innerHTML = '';
}
// 把自己的方法暴露给别人！！！
return {
addInnerHtmlItem2,
deleteInnerHtmlItem2
}
}
}
}
bigBox.init();
</script>
这里我主要想到的是，每个对象拥有自己的属性，自己的属性由自己的方法【私有、公有】操作，不能让别人操作。这里的方法显然都是公有的，所以在初始化小对象的时候，把共有的方法传了出去。这样就大大降低耦合度。
网友评论