udacity_javascript设计模式
生活随笔
收集整理的這篇文章主要介紹了
udacity_javascript设计模式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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了
總結
以上是生活随笔為你收集整理的udacity_javascript设计模式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 动态修改字节码以替换用反射调用get s
- 下一篇： Android打包混淆文件模板