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设计模式的更多相关文章

  1. MVVM设计模式和WPF中的实现(四)事件绑定

    MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...

  2. java EE设计模式简介

    1.何为设计模式 设计模式提供了对常见应用设计问题的解决方案.在面向对象的编程中,设计模式通常在解决与对象创建和交互相关的问题,而非整体软件架构所面对的大规模问题,它们以样板代码的形式提供了通用的解决 ...

  3. 计算机程序的思维逻辑 (54) - 剖析Collections - 设计模式

    上节我们提到,类Collections中大概有两类功能,第一类是对容器接口对象进行操作,第二类是返回一个容器接口对象,上节我们介绍了第一类,本节我们介绍第二类. 第二类方法大概可以分为两组: 接受其他 ...

  4. 《JavaScript设计模式 张》整理

    最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式 包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...

  5. 《JavaScript设计模式与开发实践》整理

    最近在研读一本书<JavaScript设计模式与开发实践>,进阶用的. 一.高阶函数 高阶函数是指至少满足下列条件之一的函数. 1. 函数可以作为参数被传递. 2. 函数可以作为返回值输出 ...

  6. 设计模式之行为类模式大PK

                                        行为类模式大PK 行为类模式包括责任链模式.命令模式.解释器模式.迭代器模式.中介者模式.备忘录模式.观察者模式.状态模式.策略 ...

  7. .NET设计模式访问者模式

    一.访问者模式的定义: 表示一个作用于某对象结构中的各元素的操作.它使你可以在不改变各元素类的前提下定义作用于这些元素的新操作. 二.访问者模式的结构和角色: 1.Visitor 抽象访问者角色,为该 ...

  8. Java开发中的23种设计模式详解

    [放弃了原文访问者模式的Demo,自己写了一个新使用场景的Demo,加上了自己的理解] [源码地址:https://github.com/leon66666/DesignPattern] 一.设计模式 ...

  9. java 设计模式

    目录: 设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计 ...

随机推荐

  1. 【Leetcode】【简单】【682棒球比赛】【JavaScript】

    题目 682. 棒球比赛 你现在是棒球比赛记录员.给定一个字符串列表,每个字符串可以是以下四种类型之一:1.整数(一轮的得分):直接表示您在本轮中获得的积分数.2. "+"(一轮的 ...

  2. [Usaco2004 Open]Cube Stacking 方块游戏

    题面:     约翰和贝茜在玩一个方块游戏.编号为1到n的n(1≤n≤30000)个方块正放在地上.每个构成一个立方柱.    游戏开始后,约翰会给贝茜发出P(1≤P≤100000)个指令.指令有两种 ...

  3. BZOJ 4244 邮戳拉力赛 (DP)

    手动博客搬家: 本文发表于20181211 18:01:21, 原地址https://blog.csdn.net/suncongbo/article/details/84957907 为了防止我的博客 ...

  4. hdu 4009 最小树形图模板题朱刘算法

    #include<stdio.h> /*思路:显然对于每个地方, 只有一种供水方式就足够了,这样也能保证花费最小, 而每个地方都可以自己挖井,所以是不可能出现无解的情况的, 为了方便思考, ...

  5. JAVA接口的简单实现

    感觉越来越强烈, 我的心在跳~~~,我的宝剑在嘟~~ Flyer.java package cc.openhome; public interface Flyer{ public abstract v ...

  6. JAVA的输入输出基本操作样例

    这些类的继承关系有些类似,弄一个作为样例,理解一下其中的机制. package cc.openhome; import java.io.*; public class Member { private ...

  7. 使用PSI-probe监控tomcat7

    http://www.lambdaprobe.org/ http://blog.csdn.net/tanglei6636/article/details/70169153 http://blog.cs ...

  8. mongodb--win10安装

    安装完成后再将安装后的bin目录加入PATH路径

  9. java异常 之 异常的层次结构

    一:起因 (1)近期在用java处理分析各种数据,碰到了一些异常,如parse()异常 ParseException,valueOf()NumberFormatException  IllegalAr ...

  10. 转:APP测试总结