欢迎访问 如意编程网!

如意编程网

当前位置: 首页 > 编程资源 > 综合教程 >内容正文

综合教程

udacity_javascript设计模式

发布时间:2023/10/11 综合教程 34 老码农
如意编程网 收集整理的这篇文章主要介绍了 udacity_javascript设计模式 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

javascript设计模式 的学习记录

在优达学城上找到的 《javascript设计模式》

他主要是带动我们的思考

在 《第二章 分离重构》 中使用了

  • model
  • octopus
  • view

这样分离结构式的概念来编写代码

代码写起来很长, 我看的很艰难(大概三天左右的碎片时间,都卡在这)

同样的效果,他js 100行 我20行, 他html 6行 我很多行(忘了,删了)。

他将数据放在 jsmodel 里用一个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设计模式的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错,欢迎将如意编程网推荐给好友。