udacity_javascript设计模式
javascript设计模式 的学习记录
在优达学城上找到的 《javascript设计模式》
他主要是带动我们的思考
在 《第二章 分离重构》 中使用了
model
octopus
view
这样分离结构式的概念来编写代码
代码写起来很长, 我看的很艰难(大概三天左右的碎片时间,都卡在这)
同样的效果,他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设计模式的更多相关文章
- MVVM设计模式和WPF中的实现(四)事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- java EE设计模式简介
1.何为设计模式 设计模式提供了对常见应用设计问题的解决方案.在面向对象的编程中,设计模式通常在解决与对象创建和交互相关的问题,而非整体软件架构所面对的大规模问题,它们以样板代码的形式提供了通用的解决 ...
- 计算机程序的思维逻辑 (54) - 剖析Collections - 设计模式
上节我们提到,类Collections中大概有两类功能,第一类是对容器接口对象进行操作,第二类是返回一个容器接口对象,上节我们介绍了第一类,本节我们介绍第二类. 第二类方法大概可以分为两组: 接受其他 ...
- 《JavaScript设计模式 张》整理
最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...
- 《JavaScript设计模式与开发实践》整理
最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...
- 设计模式之行为类模式大PK
行为类模式大PK 行为类模式包括责任链模式.命令模式.解释器模式.迭代器模式.中介者模式.备忘录模式.观察者模式.状态模式.策略 ...
- .NET设计模式访问者模式
一.访问者模式的定义: 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 二.访问者模式的结构和角色: 1.Visitor 抽象访问者角色,为该 ...
- Java开发中的23种设计模式详解
[放弃了原文访问者模式的Demo,自己写了一个新使用场景的Demo,加上了自己的理解] [源码地址:https://github.com/leon66666/DesignPattern] 一.设计模式 ...
- java 设计模式
目录: 设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计 ...
随机推荐
- sql 排序
select count(*) from vote group by contents PERCENT * from vote order by contents)as A group by cont ...
- java操作Excel的poi的字体设置
package com.java.poi; import org.apache.poi.hssf.usermodel.HSSFWorkbook;import org.apache.poi.ss.use ...
- BZOJ 1705: [Usaco2007 Nov]Telephone Wire 架设电话线 DP + 优化 + 推导
Description 最近,Farmer John的奶牛们越来越不满于牛棚里一塌糊涂的电话服务 于是,她们要求FJ把那些老旧的电话线换成性能更好的新电话线. 新的电话线架设在已有的N(2 <= ...
- python 遍历xml所有节点
1.xml文件 2.代码 #coding:utf-8 import xml import xml.etree.ElementTree as ET """ 实现从xml文件 ...
- codeforces 466B Wonder Room(思维,暴力)
题目 参考了别人的博客,百度来的博客 #include<iostream> #include<string> #include<stdio.h> #include& ...
- 关于 docsify ssr 的研究
关于 docsify ssr 的研究 docsify 虽然不错, 但是不支持 seo .官网虽然提供 seo 的一个简单示例, 但总总问题在 issues 中无人解答. 今天再次尝试, 解决了 ind ...
- 用python实现进度条功能
我在做python的作业:ftp服务时,客户端能够上传.下载文件,这个时候需要编写一个进度条来表示当前的传输进度. 我们可以使用sys,模块来完成任务,需要用到sys.stdout这个方法: 程序示例 ...
- BZOJ 4567 [SCOI2016]背单词 (Trie树、贪心)
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=4567 题解: 显然答案一定小于\(n\times n\), 字符串倒过来变成前缀建Tr ...
- UOJ #219 BZOJ 4650 luogu P1117 [NOI2016]优秀的拆分 (后缀数组、ST表)
连NOI Day1T1都不会做...看了题解都写不出来还要抄Claris的代码.. 题目链接: (luogu)https://www.luogu.org/problemnew/show/P1117 ( ...
- asp.net常用容器
autofac就是ioc的第三方的IOC容器 unity也是IOC容器 掌握这两个容器就可以了,非常简单