3g开发网站,建设银行网站背景图片,镇江有哪些网站,企业网络推广方案的制定代理模式
其实这种模式在现在很多地方也都有使用到#xff0c;如 Vue3 中的数据相应原理就是使用的 es6 中的 Proxy 代理及 Reflect 反射的方式来处理数据响应式
我们日常在使用数据请求时#xff0c;也会用到一些代理的方式#xff0c;比如在请求不同的域名#xff0c;端…代理模式
其实这种模式在现在很多地方也都有使用到如 Vue3 中的数据相应原理就是使用的 es6 中的 Proxy 代理及 Reflect 反射的方式来处理数据响应式
我们日常在使用数据请求时也会用到一些代理的方式比如在请求不同的域名端口等会出现跨域的情况这时就需要用到代理去获取对应的数据了日常可能会用到 nginx 代理来获取或者是 jsonp 的方式来获取
const Car function (name) { this.name name
}
const Mini function (car) {this.car carthis.getPrice function (price) {console.log(当前的价格是${price})}
}
const Proxy function (car) {this.car carthis.getPrice function (price) {(new Mini(car)).getPrice(price)}
}const car new Proxy(BMW)
car.getPrice(23W) // 当前的价格是23W
这样就通过代理模式拿到了对应的数据
装饰器模式
通常我们在团队中使用一些公用方法时会遇到这种情况在不改变他人代码的情况下如何通用他人的代码呢这就需要使用到我们常用到的装饰器模式了他便能很好的解决这种问题
const Fun function (name) {this.name namethis.sayHi () {console.log(my name: ${this.name})}this.eat (ttt) {console.log(${this.name} is eating)}
}const decor function (decFn, fn) {decFn()return fn
}
const test decor(function () {// todo: 需要做其他的事自己的逻辑console.log(开始吃饭了~~)
}, new Fun(朴者和尚).eat)test() // 朴者和尚 is eating这种模式还是很好理解的上面我们使用箭头函数为了避免 this 指向问题其实在团队协作中使用还是挺多的
const Car function (name) {this.name name;this.cost function (price100) { return price}
}
const BaoMaCar function (car) {this.cost function () {return car.cost() 100}
}
const BenChiCar function (car) {this.cost function () {return car.cost() 75}
}const bao new BaoMaCar(new Car(BMW))
const ben new BenChiCar(new Car(Audi))
console.log(bao.cost()) // 200
console.log(ben.cost()) // 175
在不同的车类型价格上增加不同的定制
