您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记
设计模式-面向过程完成页面风格切换
发布时间：2017-11-30 09:24:00编辑：雪饮阅读（）
一个用面向过程制作的页面风格切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function t(){
var sel=document.getElementsByTagName("select")[0];
if(sel.value=='male'){
document.getElementById('content').style.backgroundColor='gray';
document.getElementById('ad').innerHTML='汽车';
}
else if(sel.value=='female'){
document.getElementById('content').style.backgroundColor='pink';
document.getElementById('ad').innerHTML='减肥';
}
}
</script>
</head>
<body>
<h1>面向过程，不用设计模式来实现的切换效果</h1>
<select name="" id="" onchange="t();">
<option value="male">男士风格</option>
<option value="female">女士风格</option>
</select>
<div id="content">我是内容</div>
<div id="ad">我是广告</div>
<div id="study">xxx</div>
</body>
</html>
分析:这里做了一个根据select选择结果不同而进行content区域和ad区域进行关联变化的效果。但是如果想要再增加一个study区域则需要对t()函数中的if else流程控制进行修改，这样以来就是修改了t函数。而面向对象软件构造的原则是对修改关闭对扩展开放，这显然不符合修改关闭扩展开放的原则。
关键字词：设计模式
上一篇：设计模式-面向过程完成举报功能
下一篇：设计模式-面向接口开发