javascript设计模式 的学习记录
在优达学城上找到的 《javascript设计模式》
他主要是带动我们的思考
在 《第二章 分离重构》 中使用了
modeloctopusview
这样分离结构式的概念来编写代码
代码写起来很长， 我看的很艰难（大概三天左右的碎片时间，都卡在这）
同样的效果，他js 100行 我20行， 他html 6行 我很多行（忘了，删了）。
他将数据放在 js的model 里用一个json 数组保存， 而我是放在 html 里
我的初学者也能看明白， 他的怕是难懂了许多。。
孰优孰劣不好说， 但我还是喜欢他的分离式概念， 看着逼格就高（误..
admin 相关部分是我添加的， 照着他的方法写了一次， 也不知道有没有错， 不过感觉还挺不错。。。蛮开心
下面是代码：
// html
<ul id="cat-list"></ul>
<div id="cat">
<h2 id="cat-name"></h2>
<div id="cat-count"></div>
<img id="cat-img" src="cat.jpg" alt="cute cat">
</div>
<button id="admin">admin( click for show(hidden) )</button>
<form action="" id="admin-form">
name: <input type="text" id="admin-name" placeholder="自拟名称"> <br />
imgURL: <input type="text" id="admin-imgURL" placeholder="自拟图片路径"> <br />
clicks: <input type="text" id="admin-clicks" placeholder="自拟点击次数"> <br />
<button type="button" id="admin-cancel">cancel</button>
<button type="button" id="admin-save">save</button>
<p>空表单也可以提交，没做判断</p>
</form>
/* ======= Model ======= */
var model = {
currentCat: null,
cats: [
{
clickCount : 0,
name : 'Tabby',
imgSrc : 'cat.jpg',
imgAttribution : 'https://www.flickr.com/photos/bigtallguy/434164568'
},
{
clickCount : 0,
name : 'Tiger',
imgSrc : 'cat2.jpg',
imgAttribution : 'https://www.flickr.com/photos/xshamx/4154543904'
},
{
clickCount : 0,
name : 'Scaredy',
imgSrc : 'cat3.jpg',
imgAttribution : 'https://www.flickr.com/photos/kpjas/22252709'
}
],
adminTF: false
};
/* ======== Octopus ========= */
var octopus = {
init: function (){
// 显示第一张猫的图片
model.currentCat = model.cats[0];
// 视图初始化
catListView.init();
catView.init();
adminBtn.init();
adminList.init();
},
// 获得现在的猫
getCurrentCat: function (){
return model.currentCat;
},
// 获得所有猫
getCats: function (){
return model.cats;
},
// 设置现在的猫
setCurrentCat: function (cat){
model.currentCat = cat;
},
// 点击增加量
incrementCounter: function (){
// 表示 currentCat中的数字自加
model.currentCat.clickCount++;
catView.render();
},
// 获取 true or false
getAdminTF: function(){
return model.adminTF;
},
// 点击admin 显示或隐藏
adminShow: function (){
adminBtn.render();
},
// admin cancel取消
adminList_cancel: function (){
adminList.render_cancel();
},
// admin save保存
adminList_save: function (){
adminList.render_save();
}
};
/* ======= View ======== */
var catView = {
init: function(){
this.catElem = document.getElementById('cat');
this.catNameElem = document.getElementById('cat-name');
this.catImageElem = document.getElementById('cat-img');
this.countElem = document.getElementById('cat-count');
// 监听事件， 点击后自加
this.catImageElem.addEventListener('click', function (){
octopus.incrementCounter();
});
// 渲染
this.render();
},
render: function (){
// 更新 DOM的值
var currentCat = octopus.getCurrentCat();
this.countElem.textContent = currentCat.clickCount;
this.catNameElem.textContent = currentCat.name;
this.catImageElem.src = currentCat.imgSrc;
}
};
var catListView = {
init: function(){
//
this.catListElem = document.getElementById('cat-list');
this.render();
},
render: function (){
var cat, elem, i;
// 获取猫数组
var cats = octopus.getCats();
// 清空之前输出的内容
this.catListElem.innerHTML = '';
// 循环 cats
for ( i = 0; i < cats.length; i++) {
cat = cats[i];
elem = document.createElement('li');
elem.textContent = cat.name;
// 这里做了点小处理， 用闭包传参，防止cat值全是最后一位
elem.addEventListener('click', (function(catCopy){
return function(){
octopus.setCurrentCat(catCopy);
catView.render();
};
})(cat));
// 最后， 添加element
this.catListElem.appendChild(elem);
}
}
};
var adminBtn = {
init: function(){
this.adminElem = document.getElementById('admin');
this.adminFormElem = document.getElementById('admin-form');
this.adminElem.addEventListener('click', function (){
octopus.adminShow();
});
},
render: function(){
if(octopus.adminTF) {
this.adminFormElem.style.display = 'block';
octopus.adminTF = false;
} else {
this.adminFormElem.style.display = 'none';
octopus.adminTF = true;
}
}
};
var adminList = {
init: function (){
this.adminNameElem = document.getElementById('admin-name');
this.adminImgUrlElem = document.getElementById('admin-imgURL');
this.adminClicksElem = document.getElementById('admin-clicks');
this.adminCancelElem = document.getElementById('admin-cancel');
this.adminSaveElem = document.getElementById('admin-save');
// cancel
this.adminCancelElem.addEventListener('click', function(){
octopus.adminList_cancel();
});
// save
this.adminSaveElem.addEventListener('click', function(){
octopus.adminList_save();
});
},
render_cancel: function (){
var currentCat = octopus.getCurrentCat();
this.adminNameElem.value = '';
this.adminImgUrlElem.value = '';
this.adminClicksElem.value = '';
// 点击后关机 admin 界面
octopus.adminTF = false;
adminBtn.render();
},
render_save: function(){
var currentCat = octopus.getCurrentCat();
currentCat.name = this.adminNameElem.value;
currentCat.imgSrc = this.adminImgUrlElem.value;
currentCat.clickCount = this.adminClicksElem.value;
// 记得更新
catView.render();
// 点击后关机 admin 界面
octopus.adminTF = false;
adminBtn.render();
}
};
// 调用
octopus.init();
推荐大家都可以看看，真的不错 javascript设计模式
也托管在github了