1.什么是设计模式
设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结,使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 设计模式就是一种 编程规范 构架层面的
2.设计模式之单例模式
单例模式:字面量的对象声明 其实在设计模式中可以看作是一种单例模式,所谓单例模式,就是永远保持对象的一个实例。
var obj=new Object();
var obj={};
obj={} 一次只能创建一个对象 单例模式
方法一:
function Cat(){
//在构造函数内部可以为构造函数定义私有属性 Cat.属性
//this指向构造函数new出来的对象
if(Cat.ins){//在构造函数内部 可以为构造数值指定任意一个属性 用来接收值
return Cat.ins;
}
Cat.ins=this;//第一次new出来的值
return Cat.ins;
}
var c1=new Cat();
var c2=new Cat();
alert(c1 == c2);
方法二:
function Cat(){
if(!Cat.instance){
Cat.instance={
name:”jack”,
index:0//私有变量
}
}
return Cat.instance;
}
//实现单例模式
//实现思路:将第一次new出来的对象 this 保存到一个变量中 返回这个变量
//再次创建对象时, 判断 这个变量中是否有值,如果有,就直接将这个变量返回
function MayPlane(){
if(MayPlane.instance){//在构造函数内部 可以为构造数值指定任意一个属性 用来接收值
return MyPlane.Instance;
}
MayPlane.Instance=this;
return MyPlance.instance;
}
var plane=new MyPlane();
2.设计模式之代理模式
代理模式:为其他对象提供一种代理,并以控制对这个对象的访问
3.设计模式之适配器模式
适配器模式:(Adapter Pattern)是作为两个不兼容的接口之间的桥梁
将一个类的接口转换成客户希望的另一个接口,适配器模式使得由于接口不兼容而不能一起工作的那些类可以一起工作
function Iphone(){
this.music=function(){
console.log(“手机可以播放音乐”);
}
this.phonecall=function(){
console.log(“手机可以打电话”);
}
}
function Ipad(){
this.music=function(){
console.log(“Ipad可以播放音乐”);
}
}
//通过适配器可以判断 手机和pad的功能
function Adapter(pro){
this.pro=pro;
this.music=function(){
if(this.pro.music){
console.log("可以听音乐");
}else{
console.log("不可以播放音乐")
}
}
this.phonecall=function(){
if(this.pro.phonecall){
console.log("可以打电话");
}else{
console.log("不可以打电话")
}
}
}
var iphone=new Iphone();
var ipad=new Ipad();
var ada1=new Adapter(iphone);
var ada2=new Adapter(ipad);
//同时测试两个产品
function test(adapter){//判断适配器的功能
adapter.music();
adapter.phonecall();
console.log("测试成功");
}
test(ada1);
test(ada2);
4.设计模式之工厂模式
让对象的调用者和对象创建过程分离,当对象调用者需要对象时,直接向工厂请求即可,从而避免了对象的调用者与对象的实现类似编程方式耦合,以提高系统的可维护性、可拓展性
5.设计模式之观察者模式
观察者模式又叫做发布订阅模式(Publish/Subscribe)。它定义了一种一对多的关系,让对个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己
时间到了—放学了
半夜12点了—该通宵了
小孩哭了—喂奶了
6.策略模式
定义一系列算法,把它们一个一个封装起来,并且使它们可以相互替换(具有相同的目标和意图)
window.onload = function() {
new MoveDiv().addListener({type: “mouse”}) //策略模式
}
function MoveDiv() {
this.div = document.getElementsByTagName("div")[0];
this.addListener = function(obj) {//判断div是通过鼠标操作还是键盘操作
switch(obj["type"]) {
case "key":{
document.onkeydown = function(e) {
var e=e||event;
var code = e.keyCode;
switch(code) { case 37:{this.div.style.left = this.div.offsetLeft - 8 + "px";break;}
case 39:{ this.div.style.left = this.div.offsetLeft + 8 + "px";break;}
}
}.bind(this)
break;
}
case "mouse":{document.onmousemove = function(e) { this.div.style.left = e.pageX -8 + "px"; this.div.style.top = e.pageY +8 + "px";
}.bind(this)
break;
}
}
}
}
8.闭包
什么是闭包?
一个函数返回另一个匿名函数,这个匿名函数就称为闭包
能够访问其他函数内部局部的函数,这样的函数就称为闭包
var list=document.getElementsByTagName(“li”);
for(var i=0;i