JavaScript设计模式-16.装饰者模式（上）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript 高级语法16-装饰者模式</title>
</head>
<body>
<script>
/*通过需求引出装饰者模式
*
*/ //接口
var Interface = function(name,methods){
if(arguments.length != 2){
alert("interface must have two paramters...");
}
this.name = name;//这个是接口的名字
this.methods = [];//定义个空数组来转载函数名
for (var i = 0; i < methods.length; i++) {
if(typeof methods[i] != "string"){
alert("method name must is String ...")
}else{
this.methods.push(methods[i])
}
}
}
//定义接口的一个静态方法来实现接口与实现类的直接检验
//静态方法不要写成Interface.prototype.* 因为这是写到接口原型连上的
//我们要把静态的函数直接写到类层次上
Interface.ensureImplements = function(object){
if(arguments.length<2){
alert("必须最少是2个参数");
return false;
}
//遍历
for (var i = 1; i < arguments.length; i++) {
var inter = arguments[i];
//如果你是接口就必须是Interface类型的
if(inter.constructor != Interface){
throw new Error("if is interface class must is Interface type");
}
//遍历函数集合并分析
for (var j = 0; j < inter.methods.length; j++) {
var method = inter.methods[j];
//实现类中必须有方法名字 和 接口中所有的方法名项目
if(!object[method] || typeof object[method] != "function"){
throw new Error("实现类并没有完全实现接口中的所有方法...");
}
}
}
} function demo(){
//汽车店的接口
var CarShop = new Interface("CarShop",["getPrice","assemble"]);
var myCarShop = function(){
this.getPrice = function(){
document.write(15000+"<br>");
}
this.assemble = function(){
document.write("汽车组装..."+"<br>")
}
Interface.ensureImplements(this,CarShop);
} var jimCarShop = new myCarShop();
jimCarShop.getPrice();
jimCarShop.assemble();
document.write("--------------------"+"<br>") /*新需求：
* 汽车还会有附属产品 音响 (k),真皮沙发(M),保险杠(N)
* 每一个附属的产品会影响到汽车的组装和其价格
* 你能想到什么办法？
*/ //改写接口
var CarShop2 = new Interface("CarShop2",["getPrice","assemble","addK","addM","addN"]);
var myCarShop2 = function(){
var price = 150000;
this.getPrice = function(){
document.write(price+"<br>")
}
this.assemble = function(){
document.write("汽车组装"+"<br>")
}
this.addK = function(){
price += 1000;
}
this.addM = function(){
price += 2000;
}
this.addN = function(){
price += 3000;
}
Interface.ensureImplements(this,CarShop2);
} var jimCarShop2 = new myCarShop2();
jimCarShop2.addK();
jimCarShop2.addM();
jimCarShop2.addN();
jimCarShop2.getPrice();
jimCarShop2.assemble(); /*好像能成功，但是新的问题来了
* 你把接口全改了，可是我继承本接口的类不一定全要有音响，沙发，保险杠。
* 难道我要改变所有实现本接口的实现类吗？
* 显然是不对的。
*/
//2.如果不改变接口，那我就增加子类
var CarShop = new Interface("CarShop",["getPrice","assemble"]);
var myCarShop = function(){
this.getPrice = function(){
document.write(150000+"<br>");
}
this.assemble = function(){
document.write("汽车组装..."+"<br>")
}
Interface.ensureImplements(this,CarShop);
}
var myCarShopM = function(){
this.getPrice = function(){
document.write(150100+"<br>");
}
this.assemble = function(){
document.write("汽车组装..."+"<br>")
}
Interface.ensureImplements(this,CarShop);
}
var myCarShopK = function(){
this.getPrice = function(){
document.write(150200+"<br>");
}
this.assemble = function(){
document.write("汽车组装..."+"<br>")
}
Interface.ensureImplements(this,CarShop);
}
//这种方式走不通
/*装饰者的概念和用法：
* 装饰者可以为对象添加新的特性
* 透明的把对象包装在具有相同接口的新对象中
*/ }
// demo();
function decorator(){
//装饰者模式来解决需求
var CarShop = new Interface("CarShop",["getPrice","assemble"]);
//目标对象
var myCarShop = function(){
this.getPrice = function(){
return 150000;
}
this.assemble = function(){
document.write("汽车组装...<br>");
}
Interface.ensureImplements(this,CarShop);
}
//装饰类
var M = function(carshop){
this.getPrice = function(){
return 1000 + carshop.getPrice();
}
this.assemble = function(){
document.write("M组装...<br>");
}
Interface.ensureImplements(this,CarShop);
}
var K = function(carshop){
this.getPrice = function(){
return 2000 + carshop.getPrice();
}
this.assemble = function(){
document.write("k组装...<br>");
}
Interface.ensureImplements(this,CarShop);
}
var N = function(carshop){
this.getPrice = function(){
return 3000 + carshop.getPrice();
}
this.assemble = function(){
document.write("N组装...<br>");
}
Interface.ensureImplements(this,CarShop);
} //调用 var car =new K(new M(new myCarShop()));
alert(car.getPrice());
car.assemble();
}
decorator();
</script>
</body>
</html>
JavaScript设计模式-16.装饰者模式（上）的更多相关文章
- 再起航，我的学习笔记之JavaScript设计模式13(装饰者模式)
装饰者模式 装饰者模式(Decorator): 在不改变原对象的基础上,通过对其进行过包装拓展(添加属性高或者方法)使原有对象可以满足用户的更复杂需求. 如果现在我们有个需求,需要做一个提交表单,当我 ...
- Javascript设计模式之装饰者模式详解篇
一.前言: 装饰者模式(Decorator Pattern):在不改变原类和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象. 装饰者模式的特点: 1. 在不改 ...
- JavaScript设计模式-17.装饰者模式（下）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript设计模式（装饰者模式）
一.模拟传统面向对象语言的装饰者模式: 假设我们在编写一个飞机大战的游戏,随着经验值的增加,我们操作的飞机对象可以升级成更厉害的飞机,一开始这些飞机只能发射普通的子弹,升到第二级时可以发射导弹,升到第 ...
- JavaScript设计模式(8)-装饰者模式
装饰者模式 1. 作用: 可用来透明地把对象包装在具有同样接口的另一对象之中,这样可以给一个方法添加一些行为,然后将方法调用传递给原始对象. 可用于为对象增加功能,用来代替大量子类. 装饰者对其组件进 ...
- javascript设计模式之装饰者模式
/* * 装饰者模式提供比继承更有弹性的替代方案 * 在不改变原构造函数的情况下,添加新的属性或功能 */ //需要装饰的类(函数) function Macbook() { this.cost = ...
- 学习javascript设计模式之装饰者模式
1.装饰者模式定义:给对象动态添加职责的方式称为装饰者(decorator)模式. js如何实现装饰者模式 通过保存原函数引用方式改写某函数 window.onload = function(){al ...
- 再起航，我的学习笔记之JavaScript设计模式16(享元模式)
### 享元模式 **享元模式(Flyweight):** 运用共享技术有效地支持大量的细粒度的对象,避免对象间拥有相同内容造成多余的开销. 上回我们在组合模式中创建了文章列表类,这次我们要向不同的文 ...
- javascript设计模式－－策略模式
javascript策略模式总结 1.什么是策略模式? 策略模式的定义是:定义一系列的算法,把他们独立封装起来,并且可以相互替换. 例如我们需要写一段代码来计算员工的奖金.当绩效为a时,奖金为工资的5 ...
随机推荐
- 机器学习—集成学习（Adaboost）
一.原理部分: 二.sklearn实现: from sklearn.ensemble import AdaBoostClassifier from sklearn.datasets import lo ...
- eclipse mac
在mac下安装eclipse,挺简单的.只是字体会发虚,有点麻烦. 安装完成后,双击eclipse图标,显示包内容,contents--info.plist,在</dist>前加<k ...
- Git管理
在bitbucket用git用法 核心流程:从远端中心repo那里git clone到本地,再在本地开发(add,commit),通常会利用branch管理,如果觉得code没问题了,就push到远端 ...
- jquery控制元素的隐藏和显示的几种方法。
组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
- PostgreSQL查询数据(基本查询)
原料:数据表 create table "SysUser"( "UserId" serial, --用户Id,自增 "UserName" ) ...
- c#去除DataTable空列
网上搜了好多,没找到能用的,自己写一个,有发现错误的给我留言. private void RemoveNULLColumns(ref DataTable data)//删除空列 { try { Dat ...
- 注意力机制（Attention Mechanism）应用——自然语言处理（NLP）
近年来,深度学习的研究越来越深入,在各个领域也都获得了不少突破性的进展.基于注意力(attention)机制的神经网络成为了最近神经网络研究的一个热点,下面是一些基于attention机制的神经网络在 ...
- php 编译代码
编译其实就是把所有的代码整合在于一个文件,减少文件包含时间,加快php解析,虽然优化后时间上提升了不多,但能优化便多多少少进行优化.下面给一个编译例子,从而引申. // 定义编译状态 define(' ...
- 2018-2019-2 20165219《网络对抗技术》Exp4 恶意代码分析
基础问题回答 实验目的 监控系统的运行状态,看有没有可疑的程序在运行 分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具尽量使用原生指令或sysinternals,systracer套 ...
- jquery中选择器的 html() text() val() attr() 方法的区别与使用方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...