本文主要是介绍JSOO Day 04 设置模式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
设计模式就是可重用的用于解决软件设计中一般问题的方案。
其中一个原因是它可以让我们站在巨人的肩膀上,获得前人所有的经验
保证我们以优雅的方式阻止我们的代码,满足我们解决问题
怎么才能更称之为设计模式?
1,模式名称
2,该模式所能解决的问题
3,解决方案
4,使用该模式的效果(优点和缺点)
具体了解还可以看看《大话设计模式》
为什么要学习设计模式
1,模式是行之有效的解决方法:他们提供固定的解决方法来解决在软件开发中出现
的问题,这些都是久经考验的反映了开发者的经验和见解的使用模式来自定义的技术
2,模式可以很容易地重用,一个模式通常反映了一个可以适应自己需要的开箱即用的解决方案,这个特性让它很健壮
3,模式很善于表达:当我们看到一个提供某种解决方案的模式时,一般有一组结构和词汇
可以非常优雅地帮助表达相当大的解决方案
设计模式分类:
1,创建模式:涉及对象的创建
单例模式
工厂模式
建造者模式
原型模式
2,结构模式:涉及类和对象的组合
外观模式
代理模式
适配器模式
装饰模式
3,行为模式:刻画了类和对象交换及分配职责的方式,只要目标解耦
观察者模式
命令模式
模板模式
装饰者模式(保持原来不变的情况下,添加新的事件处理程序)
var btn1=document.getElementById('btn1')
var btn2=document.getElementById('btn2')
btn1.onclick=function () {console.log('haha');
}
btn2.onclick=function () {var oldClick=btn1.onclick;btn1.onclick=function () {if(typeof oldClick=='function'){oldClick()newClick()}}
}
function newClick() {console.log('新添加的事件处理程序');
}
桥接模式
var btn = document.getElementById('btn');
btn.onmouseover=function () {changStyle(btn,'green','red')
}
btn.onmouseout=function () {changStyle(btn,'red','green')
}
function changStyle(dom,color,bg) {dom.style.color=color;dom.style.backgroundColor=bg;
}
状态模式
function action(type) {/*不用状态模式if(type=='jump'){jump()}else if(type == 'cry'){cry()}else if(type=='smile'){smile()}*//*状态模式方法*/if(type in obj){obj[type]();}}var obj = {
jump() {},cry() {},smile() {}}
适配器模式
这篇关于JSOO Day 04 设置模式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!