js设计模式笔记-桥接模式 发表于 2017-08-21 桥接模式 某些类型由于自身的逻辑,会向多个维度变化,使其不增加复杂度并达到解耦的目的 将一个函数或者类当做一个桥梁,提取公共部分,将实现和抽象通过桥接的方法链接在一起 针对多维度变化,可以创建许多个桥梁 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758'use strict'let log = console.log.bind(console)function Speed (x, y) { this.x = x this.y = y}Speed.prototype.run = function () { log('run')}function Color (cl) { this.cl = cl}Color.prototype.draw = function () { log('draw')}function Shape (sp) { this.shape = sp}Shape.prototype.change = function () { log('改变形状')}function Speek (word) { this.word = word}Speek.prototype.say = function () { log('fuck')}// 创建一座桥梁,在生成 Ball的时候直接 new Ballfunction Ball (x, y, c) { this.speed = new Speed(x, y) this.color = new Color(c)}Ball.prototype.init = function () { this.speed.run() this.color.draw()}function People (x, y, f) { this.speed = new Speed(x, y) this.speek = new Speek(f)}People.prototype.init = function () { this.speed.run() this.speek.say()}// 通过桥梁生成实体var ball = new Ball(1, 2, '#ccc')ball.init()
js设计模式笔记--装饰者模式 发表于 2017-08-18 ##装饰者模式 不改变原对象的基础上,通过添加属性或方法使原对象满足要求1234567891011121314151617181920212223242526272829'use strict'// 装饰者var decorator = (function () { return function (input, fn) { // 获取事件源 var input = document.getElementById(input) if (typeof input.onclick === 'function') { // 将之前的存起来,那之前有很多怎么办 var old = input.onclick input.onclick = function () { old() // 看见吗就是执行了之前的函数,顺便加了个回调 fn() } } else { input.onclick = fn } // do something }}())document.getElementById('btn').onclick = function() { console.log('fuck')}decorator('btn', function() { console.log('just go on')})
js设计模式笔记--代理模式 发表于 2017-08-18 代理模式 对于一个对象不能直接引用另一个对象,所以通过代理起个中介作用 没想到这一章讲的是跨域,我的妈呀,这怎么成了设计模式了 跨域解决方案: jsonp 创建script标签获取数据,不能post iframe 通过iframe拿数据,写起来麻烦,还很弱 nginx或者其他服务器进行跨域,或者设置http cors … 其他
js设计模式笔记--适配器模式 发表于 2017-08-18 适配器模式 什么是适配器,就是将数据转化了一下,防止出错或者数据改变 假设引入了JQ,而JQ和自己的代码库重叠了,怎么办? window.my$ = jQuery 就是这么粗暴 比如你要的数据是[{},{}]这样的,后台给了你{},你怎么办 写个适配器,转化一下。 噗!吐血
js设计模式笔记--外观模式 发表于 2017-08-18 外观模式 这章坑爹,就是说了下兼容性的封装,在写个小小型代码库 12345678910'use strict'var A = (function () { var o = { g: function (id) { return document.getElementById(id) } } // todo: 其余不想写了,就是获取元素,添加事件的封装 return o}())
js设计模式笔记--单例模式 发表于 2017-08-18 单例模式 只能实例化一次,第二次实例化将之前实例化好的对象返回,就可以共享实例的内存,可用于modal弹框 12345678910111213141516171819202122232425262728'use strict'var single = (function () { var instance = null function Fuck (bitch) { this.bitch = bitch } Fuck.prototype.start = function () { return this.bitch } return { getInstance: function (bitch) { if (!instance) { instance = new Fuck(bitch) } return instance } }})()// 共享一个实例var s = single.getInstance('fucker')console.log(s)var y = single.getInstance('dsfsd')console.log(y)console.log(y.start())
js设计模式笔记--原型模式 发表于 2017-08-18 受不了了,什么都是设计模式,一个JS的原型链继承都能当做设计模式,也是醉了 整篇我看最有用的就是那个继承函数 说白了这个模式就像将原型的属性和方法进行共享
js设计模式笔记--建造者模式 发表于 2017-08-18 建造者模式 创建出来的对象直接具有已实现的某些属性方法 此模式参与对象的创建过程,干涉了对象的创建细节 场景:已有内部给定的方法和属性,只需要选择需要的属性,就可以产生一个完整的对象 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576~function () { 'use strict' var Human = function (param) { this.skill = param && param.skill || '保密' this.hobby = param && param.hobby || '保密' } Human.prototype = { getSkill: function () { return this.skill }, getHobby: function () { return this.hobby } } var Named = function (name) { var _this = this // 构造 ~function (name, _this) { _this.wholeName = name if (name.indexOf(' ') > -1) { _this.firstName = name.slice(0, name.indexOf(' ')) _this.secondName = name.slice(name.indexOf(' ')) } }(name, _this) } var Work = function (work) { var _this = this ~function (work, _this) { switch (work) { case 'code': _this.work = '工程师' _this.workDescript = '每天沉醉于编程' break case 'UI': case 'UE': _this.work = '设计师' _this.workDescript = '设计更似一种艺术' break case 'teach': _this.work = '教师' _this.workDescript = '分享也是一种快乐' break default: _this.work = work _this.workDescript = '不清楚你的职业' } }(work, _this) } Work.prototype.changeWork = function (work) { this.work = work } Work.prototype.changeDescript = function (descript) { this.workDescript = descript } var Person = function (name, work) { var _person = new Human() _person.name = new Named(name) _person.work = new Work(work) return _person } var person = new Person('s b', 'UI') console.log(person.skill) console.log(person.name.firstName)}()
js设计模式笔记--抽象工厂模式 发表于 2017-08-18 抽象工厂模式 抽象类:声明但是不能使用的类 创造一个通用的大类,通过这个类去创建一系列抽象类,让子类去继承父类定义的但不能使用的方法,子类然后去实现这个抽象的方法123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384~function (global) { 'use strict' var Car = function () { } Car.prototype = { getPrice: function () { return new Error('抽象方法不能调用') }, getSpeed: function () { return new Error('抽象方法不能调用') } } // 抽象工厂方法 var VehicleFactory = function (subType, superType) { if (typeof VehicleFactory[superType] === 'function') { // noinspection JSAnnotator function F () { } F.prototype = new VehicleFactory[superType]() subType.constructor = subType // 子类原型继承父类 subType.prototype = new F() } else { throw new Error('未创建该抽象对象') } } VehicleFactory.Car = function () { this.type = 'car' } VehicleFactory.Car.prototype = { getPrice: function () { return new Error('抽象方法不能调用') }, getSpeed: function () { return new Error('抽象方法不能调用') } } VehicleFactory.Bus = function () { this.type = 'bus' } VehicleFactory.Bus.prototype = { getPrice: function () { return new Error('抽象方法不能调用') }, getSpeed: function () { return new Error('抽象方法不能调用') } } VehicleFactory.Truck = function () { this.type = 'truck' } VehicleFactory.Truck.prototype = { getPrice: function () { return new Error('抽象方法不能调用') }, getSpeed: function () { return new Error('抽象方法不能调用') } } var BMW = function (price, speed) { this.price = price this.speed = speed } VehicleFactory(BMW, 'car') BMW.prototype.getPrice = function () { return this.price } BMW.prototype.getSpeed = function () { return this.speed }}(this)
js设计模式笔记--工厂模式 发表于 2017-08-18 工厂模式 工厂模式顾名思义就是一个工厂,里面可以创建各种类型的产品 工厂模式和类 工厂模式可以根据所需产生不同的类 类是一个厂内一个小型的团体 抽象工程模式 父类不提供实体方法,只提供接口,通过子类去实现覆盖 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960'use strict'const log = console.log.bind(console)log('--------简单工厂,就是一个简单的封装--------')~function () { function Button (type, placeholder) { let o = Object.create(null) o.content = placeholder o.click = function () { log(placeholder) } if (type === 'error') { o.color = 'red' } else { o.color = 'blue' } return o } var errorBtn = Button('error', 'heheheheh') var primaryBtn = Button('df', 'dfsdfsdfsdfd') log(errorBtn.content) log(primaryBtn.content)}()log('-------工厂方法模式---------')~function () { function Button (type, content) { if (this instanceof Button) { var o = new this[type](content) return o } else { return new Button(type, content) } } Button.click = function (content) { log(content) } Button.prototype = { constructor: 'Button', error: function (content) { this.color = 'red' Button.click(content) }, primary: function (content) { this.color = 'blue' Button.click(content) } } var a = Button('error', 'content') log(a.color)}()