设计模式 ​

// 有快车 和 专车  快车 1元 专车 2元 一共5公里
  // 行程开始 需要提示车牌号 行程结束后显示结束价格
  class Car {
    constructor(name,number){
      this.name = name
      this.number = number
    }
  }

  class KuaiChe extends Car {
    constructor(name,number){
      super(name,number)
      this.price = 1
    }
  }

  class ZhuanChe extends Car {
    constructor(name,number){
      super(name,number)
      this.price = 1
    }
  }

  class Trip {
    constructor(car){
      this.car = car
    }
    start(){
      console.log(this.car.name,this.car.number);
    }
    end(){
      console.log(this.car.price * 5);
    }
  }

  const car = new KuaiChe('奔驰',100)
  let trip = new Trip(car)
  trip.start()
  trip.end()

var myObject = (function(){
    var __name = 'sven'; // 私有（private）变量
    return {
      getName: function(){ // 公开（public）方法
        return __name;
      }
    }
  })();

  console.log( myObject.getName() ); // 输出：sven
  console.log( myObject.__name ) // 输出：undefined

var makeSound = function( animal ){
	if ( animal instanceof Duck ){
		console.log( '嘎嘎嘎' );
	}else if ( animal instanceof Chicken ){
		console.log( '咯咯咯' );
	}
};

var Duck = function(){};
var Chicken = function(){};
makeSound( new Duck() ); // 嘎嘎嘎
makeSound( new Chicken() );

var makeSound = function( animal ){
    animal.sound();
  };

var Duck = function(){}

  Duck.prototype.sound = function(){
    console.log( '嘎嘎嘎' );
  };

  var Chicken = function(){}

  Chicken.prototype.sound = function(){
    console.log( '咯咯咯' );
  };

  makeSound( new Duck() ); // 嘎嘎嘎
  makeSound( new Chicken() ); // 咯咯咯

var googleMap = {
    show: function(){
      console.log( '开始渲染谷歌地图' );
    }
  };

  var renderMap = function(){
    googleMap.show();
  };
  renderMap(); // 输出：开始渲染谷歌地图

var googleMap = {
  show: function(){
    console.log( '开始渲染谷歌地图' );
  }
};

var baiduMap = {
  show: function(){
    console.log( '开始渲染百度地图' );
  }
};

var renderMap = function( type ){
  if ( type === 'google' ){
    googleMap.show();
  } else if ( type === 'baidu' ){
    baiduMap.show();
  }
};

renderMap( 'google' ); // 输出：开始渲染谷歌地图
renderMap( 'baidu' ); // 输出：开始渲染百度地图

var renderMap = function( map ){
	if ( map.show instanceof Function ){
		map.show();
	}
};

renderMap( googleMap ); // 输出：开始渲染谷歌地图
renderMap( baiduMap ); // 输出：开始渲染百度地图

var sosoMap = {
  show: function(){
    console.log( '开始渲染搜搜地图' );
  }
};
renderMap( sosoMap ); // 输出：开始渲染搜搜地图

window.$ = function(selector){
	return new JQuery(selector)
}

class Jquery {
	constructor(selector){
		this.selector = selector;
	}
	append(){}
	add(){}
}

var Plane = function(){
    this.blood = 100;
    this.attackLevel = 1;
    this.defenseLevel = 1;
  };

  var plane = new Plane();
  plane.blood = 500;
  plane.attackLevel = 10;
  plane.defenseLevel = 7;
  var clonePlane = Object.create( plane );
  console.log( clonePlane );

// 策略类
var strategies = {
	"S": function( salary ){
		return salary * 4;
	},
	"A": function( salary ){
		return salary * 3;
	},
	"B": function( salary ){
		return salary * 2;
	}
};
// 环境类 Context  ,把 请求委托给某一个策略类
// 每个策略对象负责的算法已被各自封装在对象内部
var calculateBonus = function( level, salary ){
	return strategies[ level ]( salary );
};

console.log( calculateBonus( 'S', 20000 ) ); // 输出：80000
console.log( calculateBonus( 'A', 10000 ) ); // 输出：30000

var myImage = (function(){
    var imgNode = document.createElement( 'img' );
    document.body.appendChild( imgNode );
    return {
      setSrc: function( src ){
        imgNode.src = src;
      }
    }
  })();

var proxyImage = (function(){
	var img = new Image;
	img.onload = function(){
    // 重新赋值
		myImage.setSrc( this.src );
	}
	return {
		setSrc: function( src ){
      // 先设置 gif 动图，因为是本地图片,所以加载速度很快
			myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
      // 设置真实地址
			img.src = src;
		}
	}
})();
// myImage 和 img.src 同时进行赋值
// myImage 被代理,使用 一个虚拟对象img 进行代理
proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

// 未加载真正的 miniConsole.js 之前的代码如下：
var cache = [];
var miniConsole = {
	log: function(){
		var args = arguments;
		cache.push( function(){
			return miniConsole.log.apply( miniConsole, args );
		});
	}
};
miniConsole.log(1);

var handler = function( ev ){
    if ( ev.keyCode === 113 ){
      var script = document.createElement( 'script' );
      script.onload = function(){
        for ( var i = 0, fn; fn = cache[ i++ ]; ){
          fn();
        }
      };
      script.src = 'miniConsole.js';
      document.getElementsByTagName( 'head' )[0].appendChild( script );
    }
};
document.body.addEventListener( 'keydown', handler, false );

// miniConsole.js 代码：
miniConsole = {
  log: function(){
    // 真正代码略
    console.log( Array.prototype.join.call( arguments ) );
  }
};

// 发布者
class Subject {
	constructor(){
		this.observers = [];
		this.state = 0
	}
	getState(){
		return this.state
	}
	setState(value){
		this.state = value;
		// 通知观察者们
		this.notifyObserverAll()
	}

	notifyObserverAll(){
		this.observers.forEach(observer=>{
			// 用户手中的铃铛 触发
			observer.update()
		})
	}

	attach(observer){
		this.observers.push(observer)
	}
}

// 观察者
class Observer {
	constructor(name,subject){
		this.name = name
		this.subject = subject
		// 把自己 push 进去 Subject
		this.subject.attach(this)
	}

	update() {
		console.log(`${this.name}${this.subject.getState()}`);
	}
}
// 店员
let s =new Subject()
// 顾客
let o1 = new Observer('o2',s)
// 也可以,这样不过是需要外部调用 attach 方法
let s =new Subject()
let o1 = new Observer('o2')
s.attach(o1)

s.setState(1)

document.body.addEventListener( 'click', function(){
  alert(2)
}, false );

let pubSub = {
  subs: [],
  subscribe(key, fn) { //订阅
    if (!this.subs[key]) {
      this.subs[key] = [];
    }
    this.subs[key].push(fn);
  },

  publish(...arg) {//发布
    let args = arg;
    // 去除发布名称，剩下的都是参数
    let key = args.shift();
    let fns = this.subs[key];

    if (!fns || fns.length <= 0) return;

    for (let i = 0, len = fns.length; i < len; i++) {
      fns[i](args);
    }
  },
  unSubscribe(key) {
    delete this.subs[key]
  }
}

//测试
pubSub.subscribe('name', name => {
  console.log(`your name is ${name}`);
})
pubSub.subscribe('gender', gender => {
  console.log(`your name is ${gender}`);
})
pubSub.publish('name', 'leaf333');  // your name is leaf333
pubSub.publish('gender', '18');  // your gender is 18

// 小兵,只有操作
class Car {
    start () {
        return '起步'
    }
    turnLeft () {
        return '左转'
    }
    turnRight () {
        return '右转'
    }
    gotStraight () {
        return '直行'
    }
    stop () {
        return '靠边停车'
    }
}

// 类似于 小号手的作用,接受命令,并且进行封装之后 传递给 car
class Command {
    constructor(car) {
        this.car = car
    }
    start () {
        console.log(`${this.car.start()}`)
    }
    left () {
        console.log(`${this.car.turnLeft()}`)
    }
    right () {
        console.log(`${this.car.turnRight()}`)
    }
    straight () {
        console.log(this.car.gotStraight())
    }
    end () {
        console.log(`${this.car.gotStraight()} ${this.car.stop()}`)
    }
    exec (cmd) {
        if (!this[cmd]) return false
        return this[cmd]()
    }
}

// 类似于将军
class Invoker {
    constructor(command) {
        this.command = command
    }
    invoke (cmd) {
        this.command.exec(cmd)
    }
}

const car = new Car()
// 控制小车的命令
const command = new Command(car)

const routes = [
    'start',
    'straight',
    'left',
    'end'
]
const invoker = new Invoker(command)

routes.forEach(route => {
    invoker.invoke(route)
})

abstract class Beverage {
  init() {
    // 模板方法
    this.boilWater();
    this.brew();
    this.pourInCup();
    this.addCondiments();
  }
  boilWater() {
    console.log("把水煮沸");
  }
  abstract brew();
  abstract pourInCup();
  abstract addCondiments();
}

class Coffee extends Beverage {
  brew(){
    console.log("brew Coffee");
  }
  pourInCup() {

  }
  addCondiments() {

  }
}

class Tea extends Beverage {
  brew(){
    console.log("brew Tea");
  }
  pourInCup() {

  }
  addCondiments() {

  }
}
let c = new Coffee;
c.init()

var order = function( orderType, pay, stock ){
	if ( orderType === 1 ){ // 500 元定金购买模式
		if ( pay === true ){ // 已支付定金
			console.log( '500 元定金预购, 得到 100 优惠券' );
		}else{ // 未支付定金,降级到普通购买模式
			if ( stock > 0 ){ // 用于普通购买的手机还有库存
				console.log( '普通购买, 无优惠券' );
			}else{
				console.log( '手机库存不足' );
			}
		}
	}
	else if ( orderType === 2 ){ // 200 元定金购买模式
		if ( pay === true ){
			console.log( '200 元定金预购, 得到 50 优惠券' );
		}else{
			if ( stock > 0 ){
				console.log( '普通购买, 无优惠券' );
			}else{
				console.log( '手机库存不足' );
			}
		}
	}
	else if ( orderType === 3 ){
		if ( stock > 0 ){
			console.log( '普通购买, 无优惠券' );
		}else{
			console.log( '手机库存不足' );
		}
	}
};
order( 1 , true, 500); // 输出： 500 元定金预购, 得到 100 优惠券

var order500 = function( orderType, pay, stock ){
  if ( orderType === 1 && pay === true ){
    console.log( '500 元定金预购, 得到 100 优惠券' );
  }else{
    order200( orderType, pay, stock ); // 将请求传递给 200 元订单
  }
};

// 200 元订单
var order200 = function( orderType, pay, stock ){
  if ( orderType === 2 && pay === true ){
    console.log( '200 元定金预购, 得到 50 优惠券' );
  }else{
    orderNormal( orderType, pay, stock ); // 将请求传递给普通订单
  }
};

// 普通购买订单
var orderNormal = function( orderType, pay, stock ){
  if ( stock > 0 ){
    console.log( '普通购买, 无优惠券' );
  }else{
    console.log( '手机库存不足' );
  }
};

order500( 1 , true, 500); // 输出：500 元定金预购, 得到 100 优惠券
order500( 1, false, 500 ); // 输出：普通购买, 无优惠券
order500( 2, true, 500 ); // 输出：200 元定金预购, 得到 50 优惠券
order500( 3, false, 500 ); // 输出：普通购买, 无优惠券
order500( 3, false, 0 ); // 输出：手机库存不足

// 对于一些流程图非常方便
// 组长
class ZuZhange {
	handle() {
		console.log("ZuZhangeHandle");
	}
}
// 经理
class jingLi {
	handle() {
		console.log("jingLiHandle");
	}
}
// 老板
class laoBan {
	handle() {
		console.log("laoBanHandle");
	}
}

class Action {
	constructor(name, action) {
		this.name = name;
    // 自己的行动
		this.action = action;
    // 下一个流程行为
		this.nextAction = null;
	}
	setNextAction(action) {
		this.nextAction = action;
	}

	handle() {
		// 独一无二的方法
		this.action.handle();
		console.log(`${this.name}handle`);
		// 链条可以一直延续
		this.nextAction?.handle();
	}
}

const a1 = new Action("组长", new ZuZhange());
const a2 = new Action("经理", new jingLi());
const a3 = new Action("老板", new laoBan());
a1.setNextAction(a2);
a2.setNextAction(a3);
a1.handle();

var goods = { // 手机库存
  "red|32G": 3,
  "red|16G": 0,
  "blue|32G": 1,
  "blue|16G": 6
};

// 自执行函数保证数据没有污染
var mediator = (function(){
  var colorSelect = document.getElementById( 'colorSelect' ),
    memorySelect = document.getElementById( 'memorySelect' ),
    numberInput = document.getElementById( 'numberInput' ),
    colorInfo = document.getElementById( 'colorInfo' ),
    memoryInfo = document.getElementById( 'memoryInfo' ),
    numberInfo = document.getElementById( 'numberInfo' ),
    nextBtn = document.getElementById( 'nextBtn' );

  return {
    changed: function( obj ){
      var color = colorSelect.value, // 颜色
        memory = memorySelect.value,// 内存
        number = numberInput.value, // 数量
        stock = goods[ color + '|' + memory ]; // 颜色和内存对应的手机库存数量

      if ( obj === colorSelect ){ // 如果改变的是选择颜色下拉框
        colorInfo.innerHTML = color;
      }else if ( obj === memorySelect ){
        memoryInfo.innerHTML = memory;
      }else if ( obj === numberInput ){
        numberInfo.innerHTML = number;
      }

      if ( !color ){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请选择手机颜色';
        return;
      }
      if ( !memory ){
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请选择内存大小';
        return;
      }
      // 输入购买数量是否为正整数
      if ( Number.isInteger ( number - 0 ) && number > 0 ){ 
        nextBtn.disabled = true;
        nextBtn.innerHTML = '请输入正确的购买数量';
        return;
      }
      nextBtn.disabled = false;
      nextBtn.innerHTML = '放入购物车';
    }
  }
})();

// 事件函数：
colorSelect.onchange = function(){
  mediator.changed( this );
};
memorySelect.onchange = function(){
  mediator.changed( this );
};
numberInput.oninput = function(){
  mediator.changed( this );
};

// 装饰一个类
// 表明把这个类当做参数传进装饰器中,会自动执行

// 不传参
@testable
class MyTestableClass {
 // ...
}

function testable(target) {
 target.isTestable = true;
}

// 传参,因为会自动执行,所以要使用传递一个函数
@Dec(true)
class Shape {
 // ...
}

function Dec(isDec) {
 return function(target) {
   target.isDec = isDec
 }
}

console.log(Shape.isDec)

// 装饰一个方法
class Shape {
 @log
 setColor(color) {
   return color
 }
}

function log(target, name, descriptor) {
 var oldValue = descriptor.value
 // 函数切片
 descriptor.value = function() {
   console.log(`Calling ${name} width `, arguments)
   return oldValue.apply(this, arguments)
 }
 return descriptor
}
// 类似于
Object.defineProperty(Shape.prototype, 'setColor', descriptor);
// descriptor对象原来的值如下
// {
//   value: specifiedFunction,
//   enumerable: false,
//   configurable: true,
//   writable: true
// };

const shape = new Shape()
const color = shape.setColor('red')
console.log('color', color)

// 例子2
class Person {
 @readonly
 name() { return `${this.first} ${this.last}` }
}

function readonly(target, name, descriptor){
 // descriptor对象原来的值如下
 // {
 //   value: specifiedFunction,
 //   enumerable: false,
 //   configurable: true,
 //   writable: true
 // };
 descriptor.writable = false;
 return descriptor;
}

// 装饰器第一个参数是类的原型对象,上例是 Person.prototype
// 装饰器的本意是要“装饰”类的实例
// 但是这个时候实例还没生成,所以只能去装饰原型

// 第二个参数是所要装饰的属性名,第三个参数是该属性的描述对象。

Function.prototype.before = function( beforefn ){
	var __self = this; // 保存原函数的引用
	return function(){ // 返回包含了原函数和新函数的"代理"函数
		beforefn.apply( this, arguments );
		// 执行新函数,且保证 this 不被劫持,新函数接受的参数
		// 也会被原封不动地传入原函数,新函数在原函数之前执行
		return __self.apply( this, arguments ); // 执行原函数并返回原函数的执行结果,
		// 并且保证 this 不被劫持
	}
}

Function.prototype.after = function( afterfn ){
	var __self = this;
	return function(){
		var ret = __self.apply( this, arguments );
		afterfn.apply( this, arguments );
		return ret;
	}
};

function a(a,b){
	console.log(a,b)
}

let s = a.before(a)

s(1,4)

class Color {
	constructor(name){
		this.name = name
	}
}

class Shape {
	constructor(shape,color){
		this.shape = shape
		this.color = color
	}
	draw(){
		console.log( `${this.shape}是${this.color.name}` )
	}
}

const red = new Color('red')
const circle = new Shape('circle',red)
circle.draw()

const yellow = new Color('yellow')
const triangle = new Shape('triangle', yellow)
triangle.draw()

function bindEvent (ele,selector,fn){
	if(!fn){
		fn = selector;
		selector = null
	}
	fn()
}

bindEvent('a','#div',()=>{
	console.log(111)
})

bindEvent('b',()=>{
	console.log(222)
})

class BarChart {
  draw () {
    console.log('画一个柱状图')
  }
}
class SectorGraph {
  draw () {
    console.log('画一个饼图')
  }
}
class LineChart {
  draw () {
    console.log('画一个折线图图')
  }
}

class Chart {
  constructor() {
    this.barChart = new BarChart()
    this.sectorGraph = new SectorGraph()
    this.lineChart = new LineChart()
  }
  drawBarChart () {
    this.barChart.draw()
  }
  drawSectorGraph () {
    this.sectorGraph.draw()
  }
  drawLineChart () {
    this.lineChart.draw()
  }
}

const chart = new Chart()
chart.drawBarChart() // 画一个柱状图
chart.drawSectorGraph() // 画一个饼图
chart.drawLineChart() // 画一个折线图图

function addEvent(dom, type, fn) {
  if (dom.addEventListener) {      // 支持DOM2级事件处理方法的浏览器
    dom.addEventListener(type, fn, false)
  } else if (dom.attachEvent) {    // 不支持DOM2级但支持attachEvent
    dom.attachEvent('on' + type, fn)
  } else {
    dom['on' + type] = fn      // 都不支持的浏览器
  }
}

const myInput = document.getElementById('myinput')
addEvent(myInput, 'click', function() {console.log('绑定 click 事件')})

class SingObjcet {
  login(arg){
    console.log('login',arg);
  }
}

// 自执行函数
SingObjcet.getInstance = (function(){
  let instance;
  return function (){
    if(!instance){
      instance = new SingObjcet()
    }
    return instance
  }
})()

let obj1 = SingObjcet.getInstance()
obj1.login(12)

let obj2= SingObjcet.getInstance()
obj2.login()

console.log(obj1 == obj2); //true