js实现观察者模式风格替换
如下图,我们看到两种风格:在选择男士时,页面颜色为黑色;在选择女士时,页面颜色为粉红色。
主要可以分为两类:
下拉框 ---》 被观察者
div ---》 观察者
面向过程实现风格替换:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
div{
border: 1px solid #000000;
width: 400px;
height:100px;
margin-top: 5px;
}
</style>
<body>
<select name="" id="">
<option value="man" selected>男士</option>
<option value="woman">女士</option>
</select>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
<script>
var sel=document.getElementsByTagName('select')[0];
var one=document.getElementById("one");
var two=document.getElementById("two");
one.style.background="black";
two.innerHTML="i am superman";
window.onload=function(){
sel.onchange=function(){
var sv=sel.value;
if(sv=="woman"){
one.style.background="pink";
two.innerHTML="i am superwoman";
}else if(sv=="man"){
one.style.background="black";
two.innerHTML="i am superman";
}
}
}
</script>
</html>
观察者模式实现风格替换:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
div{
border: 1px solid #000000;
width: 400px;
height:100px;
margin-top: 5px;
}
</style>
<body>
<select name="" id="">
<option value="man" selected>男士</option>
<option value="woman">女士</option>
</select>
<div id="one"></div>
<div id="two"></div>
<!--
如果新增加一个 div3 就需要修改旧的代码了,可以看出这种方式的扩展性就特别的低。
因为在面向对象编程中有中思维叫:开闭原则。对于修改是封闭的,对于扩展是开放的。
解决方案:
我们可以用观察者模式,解决这一扩展性低问题。
观察者模式,顾名思义:重点是观察下拉框(被观察者)的改变,
当下拉框改变时,div(观察者)做出相应改变。
-->
<div id="three"></div>
</body>
<script>
var sel=document.getElementsByTagName('select')[0];
var one=document.getElementById("one");
var two=document.getElementById("two");
one.style.background="black";
two.innerHTML="i am superman";
//定义一个对象,用来存储观察者对象。
sel.servers={};
//定义一个添加观察者方法
sel.attach=function(key,val){
sel.servers[key]=val;
};
//将观察者添加到观察者队列中
sel.attach("one",one);
sel.attach("two",two);
sel.onchange=function(){
for(var i in this.servers){
this.servers[i].update(this);
}
};
one.update=function(obj){
if(obj.value=="man"){
this.style.background="black";
}else{
this.style.background="pink";
}
};
two.update=function(obj) {
if (obj.value == "man") {
this.innerHTML = "i am superman";
} else {
this.innerHTML = "i am superwoman";
}
};
//当再出现观察者时,我们只需要将观察者添加到观察者队列中。
//降低了代码的耦合性,增加了代码的扩展性。
var three=document.getElementById('three');
sel.attach("three",three);
three.update=function(obj) {
if (obj.value == "man") {
this.innerHTML = "man";
} else {
this.innerHTML = "woman";
}
};
</script>
</html>
js实现观察者模式风格替换的更多相关文章
- JS实现IOS风格对话框 jquery / zepto
Alert alert("这个是一个alert弹窗"); Alert 自定义参数 alert({ content: "自定义alert弹窗", btnText: ...
- 使用 iosOverlay.js 创建 iOS 风格的提示和通知
iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果.为了防止图标加载的时候闪烁,你需要预加载的图像资源.不兼容 CSS 动画的浏览器需要 jQuery 支持.浏览器兼 ...
- js用replaceAll全部替换的方法
1 前言 js中字符串整体替换,只有自带的replace,并没有replaceAll,如果我们需要把字符串中的字符统一替换,可以用正则表达式,由于经常使用就在String直接加个原生方法,方便调用. ...
- js设计模式-观察者模式
定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...
- js中字符串全部替换
废话不多说,直接发结果 在js中字符串全部替换可以用以下方法: str.replace(/需要替换的字符串/g,"新字符串") 比如: "yyyy-MM-dd-hh-mm ...
- js使用占位符替换字符串
js使用占位符替换字符串是一个ES6中的模版字符串语法. 在``中使用 ${} var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and ...
- JS 正则查找与替换
JS正则查找与替换 一.前提/背景 今天遇到个问题,需要替换字符串中部分字符,这些字符相对整个字符串而言,与其他子字符串类似,无法单独提出:重要的是,该字符串是动态的生成的,就像我们日常看到的网页Ur ...
- 谈谈JS的观察者模式(自定义事件)
呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...
- js实现观察者模式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Reroute Unassigned Shards——遇到主shard 出现的解决方法就是重新路由
Red Cluster! 摘自:http://blog.kiyanpro.com/2016/03/06/elasticsearch/reroute-unassigned-shards/ There a ...
- (转)PHP(其他语言类似)编码的规范性
为了提高工作效率,保证开发的有效性和合理性,并最大程度提高程序代码的可读性和可重复利用性,提高沟通效率,需要一份代码编辑规范. 一.文件标记: 1.所有php文件 ...
- Avalon.js 实现列表
<table border="0" cellpadding="0" cellspacing="0" class="tab1& ...
- jQuery学习(八)——使用JQ插件validation进行表单校验
1.官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 目录结构: 2.引入jquery库和validation插件 ...
- 通过nodeSelector配置项实现pod部署至指定node
Node节点添加标签 [root@node1 work]# kubectl label nodes node1 node=master --overwrite node/node1 labeled [ ...
- 一片非常有趣的文章 三分钟读懂TT猫分布式、微服务和集群之路
原文http://www.cnblogs.com/smallSevens/p/7501932.html#3782600 三分钟读懂TT猫分布式.微服务和集群之路 针对新手入门的普及,有过大型网站技 ...
- caioj 1114 树形动态规划(TreeDP)3.0:多叉苹果树【scy改编ural1018二叉苹果树】
一波树上背包秒杀-- #include<cstdio> #include<cstring> #include<algorithm> #include<vect ...
- 紫书 习题 8-23 UVa 1623 (set妙用 + 贪心)
这道题我是从样例中看出思路了 2 4 0 0 1 1 看这组数据, 输出的是No, 为什么呢?因为两个1之间没有神龙喝水, 所以一定会有水灾. 然后就启发了我,两次同一个湖的降水之间必须至少有一次神龙 ...
- ASP.NET-让html代码输出为字符串
HttpUtility.HtmlEncode这个函数可以让s变成没有攻击的代码,可以提升网站的安全性 public string Index(string s = "suepr name i ...
- python 与cpp接口编程
(1)vc6下面生成dll学习 1.使用 VC6.0 生成 DLL新建项目 “Win32 Dynamic-Link Library”,输入项目名称,确定后选择 “A simple DLL projec ...