javascript 几种常见设计模式

最新推荐文章于 2023-08-01 20:23:19 发布

theowl

最新推荐文章于 2023-08-01 20:23:19 发布

阅读量616

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/theowl/article/details/51009377

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<body>
<button id="show">show</button>
<button id="hide">hide</button>
<hr>
<button id="factoryShow">show</button>
<button id="factoryHide">hide</button>
<hr>
<button id="thisShow">show</button>
<button id="thisHide">hide</button>
<hr>
<button id="mixShow">show</button>
<button id="mixHide">hide</button>
<script>
window.onload = function (argument) {
//单例
function layer(){
function show(){
console.log('show');
}

function hide(){
console.log('hide');
}

return {
hide:hide,
show:show
}
};
var lio = layer();
document.getElementById('show').addEventListener('click',function(){
lio.show();
},false);
document.getElementById('hide').addEventListener('click',function(){
lio.hide();
},false);

//工厂模式
function factory(){
var factory = {};
factory['show'] = function(){
console.log('factoryshow');
}
factory.hide = function(){
console.log('factoryhide');
}
return factory;
}
var gongchang = factory();
document.getElementById('factoryShow').addEventListener('click',function(){
gongchang.show();
},false);
document.getElementById('factoryHide').addEventListener('click',function(){
gongchang.hide();
},false);

//构造函数模式
function construct(){
this.show = function(){
console.log('thisshow');
}
this.hide = function(){
console.log('thishide');
}
}
var construct = new construct();
document.getElementById('thisShow').addEventListener('click',function(){
construct.show();
},false);
document.getElementById('thisHide').addEventListener('click',function(){
construct.hide();
},false);

//混合模式
function mix(){
this.show = function(){
console.log('thisshow');
}
this.hide = function(){
console.log('thishide');
}
}
mix.prototype.prototypeShow = function(first_argument) {
console.log('prototypeshow');
};
var mix = new mix();
document.getElementById('mixShow').addEventListener('click',function(){
mix.prototypeShow();
},false);
document.getElementById('mixShow').addEventListener('click',function(){
mix.show();
},false);
document.getElementById('mixHide').addEventListener('click',function(){
mix.hide();
},false);

}
</script>
</body>