diff --git a/README.md b/README.md index d0b7e90f9189273df1242c093df746130152469c..0403ae37af445176cd4acf35a79b5b8b663d27f6 100644 --- a/README.md +++ b/README.md @@ -3,35 +3,48 @@ #### 介绍 学习设计模式 -#### 软件架构 -软件架构说明 +1. 设计模式的原则 + 描述不断发生的重复问题,以及该问题解决方案的核心。能一次又一次的使用该方案不必重复劳动。 + +2. 一大法则 + 迪米特法则(最少知识法则):一个软件实体应该尽可能少的与其他实体发生相互作用,每一个软件单位对其他的单位都只有最少的知识,而且局限于那些与本单位密切相关的软件单位。 + +3. 五大原则: + 1. 单一职责原则:一个类应该仅有一个引起它变化的原因,简单来说就是功能要单一。 + 2. 开放封闭原则:对扩展开发,对修改关闭。 + 3. 里氏替换原则:基类出现的地方,子类一定出现。 + 4. 接口隔离原则:一个接口应该是一种角色,不该干的事情不干,该干的都要干,降低耦合、减低依赖。 + 5. 依赖翻转原则:针对接口编程,以来抽象而不依赖具体。 + +4. 高内聚、低耦合 + 1. 内聚:一个功能模块只关注一个功能。 + 2. 低耦合:尽量减少由于交互引起的单个模块无法独立使用或者无法移植的情况发生。 + +5. 设计模式: + 1. 创建型:5 + - 工厂模式:创建对象时不会对客户端暴露创建逻辑,并且通过使用一个共同的接口来指向新创建的对象。借助构造函数实现。 + - 单例模式:保证一个类仅有一个访问它的全局变量。如:弹窗,vuex,jQuery。 + - 原型模式:用原型实例创建新的对象。通过拷贝这些原型创建新的对象。要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它。 + - 构造器模式 + - 抽象工厂模式 + 2. 结构型:7 + - 装饰器模式 + - 适配器模式 + - 代理模式 + - 桥接模式 + - 外观模式 + - 组合模式 + - 享元模式 + 3. 行为型:11 + - 迭代器模式 + - 发布/订阅模式(观察者) + - 策略模式 + - 状态模式 + - 解释器模式 + - 中介者模式 + - 访问者模式 + - 备忘录模式 + - 模板方式模式 + - 职责链模式 + - 命令模式 - -#### 安装教程 - -1. xxxx -2. xxxx -3. xxxx - -#### 使用说明 - -1. xxxx -2. xxxx -3. xxxx - -#### 参与贡献 - -1. Fork 本仓库 -2. 新建 Feat_xxx 分支 -3. 提交代码 -4. 新建 Pull Request - - -#### 特技 - -1. 使用 Readme\_XXX.md 来支持不同的语言,例如 Readme\_en.md, Readme\_zh.md -2. Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com) -3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目 -4. [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目,是综合评定出的优秀开源项目 -5. Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help) -6. Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/) diff --git a/dist/FactoryMode.js b/dist/FactoryMode.js new file mode 100644 index 0000000000000000000000000000000000000000..81f569fdc9fb602c02df13aabab7677e8046cdd5 --- /dev/null +++ b/dist/FactoryMode.js @@ -0,0 +1,16 @@ +"use strict"; +class Student { + constructor(name, sex, age) { + this.name = name; + this.sex = sex; + this.age = age; + } + consoleStudentInfo() { + console.log('用户信息:' + this.name + ' ; ' + this.sex + ' ; ' + this.age); + } +} +const student1 = new Student('张三', true, 20); +student1.consoleStudentInfo(); +const student2 = new Student('李四', false, 21); +student2.consoleStudentInfo(); +//# sourceMappingURL=FactoryMode.js.map \ No newline at end of file diff --git a/dist/FactoryMode.js.map b/dist/FactoryMode.js.map new file mode 100644 index 0000000000000000000000000000000000000000..ae889f43aed5ca2617837ff2115bb1068646cd22 --- /dev/null +++ b/dist/FactoryMode.js.map @@ -0,0 +1 @@ +{"version":3,"file":"FactoryMode.js","sourceRoot":"","sources":["../model/FactoryMode.ts"],"names":[],"mappings":";AAIA,MAAM,OAAO;IAKT,YAAY,IAAY,EAAE,GAAW,EAAE,GAAW;QAC9C,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;QACd,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;IAClB,CAAC;IAED,kBAAkB;QACd,OAAO,CAAC,GAAG,CAAC,OAAO,GAAE,IAAI,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1E,CAAC;CACJ;AAED,MAAM,QAAQ,GAAG,IAAI,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,CAAC,CAAA;AAC5C,QAAQ,CAAC,kBAAkB,EAAE,CAAA;AAE7B,MAAM,QAAQ,GAAG,IAAI,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAA;AAC7C,QAAQ,CAAC,kBAAkB,EAAE,CAAA"} \ No newline at end of file diff --git a/dist/SingletonPattern-class.js b/dist/SingletonPattern-class.js new file mode 100644 index 0000000000000000000000000000000000000000..11f29b5ca8f166956719bae0b6bbf4238c5a3a80 --- /dev/null +++ b/dist/SingletonPattern-class.js @@ -0,0 +1,16 @@ +"use strict"; +class Singleton { + constructor(divInfo) { + this.divInfo = null; + this.divInfo = divInfo; + } + static getInstance(divInfo) { + if (this.instance) { + return this.instance; + } + this.instance = new Singleton(divInfo); + return this.instance; + } +} +Singleton.instance = null; +//# sourceMappingURL=SingletonPattern-class.js.map \ No newline at end of file diff --git a/dist/SingletonPattern-class.js.map b/dist/SingletonPattern-class.js.map new file mode 100644 index 0000000000000000000000000000000000000000..b5fdd74c16556a075462ad40131a728e35a98835 --- /dev/null +++ b/dist/SingletonPattern-class.js.map @@ -0,0 +1 @@ +{"version":3,"file":"SingletonPattern-class.js","sourceRoot":"","sources":["../model/SingletonPattern-class.ts"],"names":[],"mappings":";AAAA,MAAM,SAAS;IAMX,YAAY,OAAyB;QAF7B,YAAO,GAA4B,IAAI,CAAA;QAG3C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;IAC1B,CAAC;IAED,MAAM,CAAC,WAAW,CAAC,OAAyB;QACxC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,OAAO,IAAI,CAAC,QAAQ,CAAA;SACvB;QACD,IAAI,CAAC,QAAQ,GAAG,IAAI,SAAS,CAAC,OAAO,CAAC,CAAA;QACtC,OAAO,IAAI,CAAC,QAAQ,CAAA;IACxB,CAAC;;AAdM,kBAAQ,GAAqB,IAAI,AAAzB,CAAyB"} \ No newline at end of file diff --git a/dist/SingletonPattern.js b/dist/SingletonPattern.js new file mode 100644 index 0000000000000000000000000000000000000000..06b9aa05a27d0df383d8887e251d8a6101016610 --- /dev/null +++ b/dist/SingletonPattern.js @@ -0,0 +1,21 @@ +"use strict"; +var getSingleton = function (fn) { + let result; + return function (...args) { + return result || (result = fn.apply(this, args)); + }; +}; +var craeteAlertMessage = function (divInfo) { + var div = document.createElement('div'); + div.innerHTML = divInfo.html; + for (const key in divInfo.style) { + if (Object.prototype.hasOwnProperty.call(divInfo.style, key)) { + div.style[key] = divInfo.style[key]; + } + } + div.style.height = divInfo.height; + div.style.width = divInfo.width; + return div; +}; +var singletonCreateAlertMessage = getSingleton(craeteAlertMessage); +//# sourceMappingURL=SingletonPattern.js.map \ No newline at end of file diff --git a/dist/SingletonPattern.js.map b/dist/SingletonPattern.js.map new file mode 100644 index 0000000000000000000000000000000000000000..a2dfbf8c8ec7f1ac3ccbafb891ad6302c633acd1 --- /dev/null +++ b/dist/SingletonPattern.js.map @@ -0,0 +1 @@ +{"version":3,"file":"SingletonPattern.js","sourceRoot":"","sources":["../model/SingletonPattern.ts"],"names":[],"mappings":";AAKA,IAAI,YAAY,GAAG,UAAU,EAAY;IACrC,IAAI,MAAW,CAAA;IACf,OAAO,UAAqB,GAAG,IAAW;QAEtC,OAAO,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IACpD,CAAC,CAAA;AACL,CAAC,CAAA;AAkBD,IAAI,kBAAkB,GAAG,UAAU,OAAyB;IACxD,IAAI,GAAG,GAAmB,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IACvD,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC,IAAI,CAAA;IAE5B,KAAK,MAAM,GAAG,IAAI,OAAO,CAAC,KAAK,EAAE;QAC7B,IAAI,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE;YACzD,GAAG,CAAC,KAA6B,CAAC,GAAU,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;SACtE;KACJ;IAED,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAA;IACjC,GAAG,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAA;IAE/B,OAAO,GAAG,CAAA;AACd,CAAC,CAAA;AAGD,IAAI,2BAA2B,GAAG,YAAY,CAAC,kBAAkB,CAAC,CAAA"} \ No newline at end of file diff --git a/model/1.FactoryMode.ts b/model/1.FactoryMode.ts new file mode 100644 index 0000000000000000000000000000000000000000..1204175fe102af5b5dc4397bb05b84a1bb2f1541 --- /dev/null +++ b/model/1.FactoryMode.ts @@ -0,0 +1,25 @@ +/** + * 工厂模式 + */ + +class Student { + private name: string; + private sex: boolean; + private age: number; + + constructor(name: string, sex:boolean, age: number) { + this.name = name + this.sex = sex + this.age = age + } + + consoleStudentInfo () { + console.log('用户信息:'+ this.name + ' ; ' + this.sex + ' ; ' + this.age); + } +} + +const student1 = new Student('张三', true, 20) +student1.consoleStudentInfo() + +const student2 = new Student('李四', false, 21) +student2.consoleStudentInfo() \ No newline at end of file diff --git a/model/2.SingletonPattern-class.ts b/model/2.SingletonPattern-class.ts new file mode 100644 index 0000000000000000000000000000000000000000..793fdb4034a6ca50bc48171fde3e3cfd4b14392f --- /dev/null +++ b/model/2.SingletonPattern-class.ts @@ -0,0 +1,22 @@ +// 单例模式 +class Singleton { + + static instance: Singleton | null = null + + private divInfo: InterfaceDivInfo | null = null + + constructor(divInfo: InterfaceDivInfo) { + this.divInfo = divInfo + } + + static getInstance(divInfo: InterfaceDivInfo) { + if (this.instance) { + return this.instance + } + this.instance = new Singleton(divInfo) + return this.instance + } + +} + +// Singleton.getInstance({ height: '200px', width: '200px', html: 'bbbb', style: { color: 'pink' } }) \ No newline at end of file diff --git a/model/2.SingletonPattern.ts b/model/2.SingletonPattern.ts new file mode 100644 index 0000000000000000000000000000000000000000..c76d1e61166a202fd595513f43a813f9c3e8b995 --- /dev/null +++ b/model/2.SingletonPattern.ts @@ -0,0 +1,47 @@ +/** + * 单例模式的方法 + * @param fn 方法 + * @returns 实例方法 + */ +var getSingleton = function (fn: Function) { + let result: any + return function (this: any, ...args: any[]) { + // 在这里判断之前是否存在过该方法 + return result || (result = fn.apply(this, args)) + } +} + +interface InterfaceAnyObj { + [key: string]: any +} + +interface InterfaceDivInfo { + html: string + width: string + height: string + style: InterfaceAnyObj +} + +/** + * 创建一个弹窗的方法 + * @param divInfo 弹窗的一下信息 + * @returns 返回弹窗的实例 + */ +var craeteAlertMessage = function (divInfo: InterfaceDivInfo): HTMLDivElement { + var div: HTMLDivElement = document.createElement('div') + div.innerHTML = divInfo.html + + for (const key in divInfo.style) { + if (Object.prototype.hasOwnProperty.call(divInfo.style, key)) { + (div.style as CSSStyleDeclaration)[key as any] = divInfo.style[key] + } + } + + div.style.height = divInfo.height + div.style.width = divInfo.width + + return div +} + +// 使用单例方法创建弹窗 +var singletonCreateAlertMessage = getSingleton(craeteAlertMessage) diff --git a/model/3.PrototypeMode.ts b/model/3.PrototypeMode.ts new file mode 100644 index 0000000000000000000000000000000000000000..a0121ad4458af6527e430f6d3a05de5a89e53e33 --- /dev/null +++ b/model/3.PrototypeMode.ts @@ -0,0 +1,37 @@ +// 原型模式 +interface InterfaceRobotFactory { + name: string;// 名称 + price: number;// 价格 + power: number;// 功率 + color: string;// 颜色 +} + +// 机器人 +class Robot { + public name: string + public price: number + public power: number + public color: string + + constructor() { + this.name = 'robot' + this.price = 100 + this.power = 100 + this.color = 'pink' + } + + public writeRobotInfo() { + console.log('robot:', this.name, this.price, this.power, this.color) + } +} + +const robot1 = new Robot() +robot1.writeRobotInfo() + +const robot2 = Object.create(robot1) +robot2.name = 'robot2' +robot2.writeRobotInfo() + +const robot3 = robot1 +robot3.name = 'robot3' +robot3.writeRobotInfo() \ No newline at end of file diff --git a/model/createObjectType.ts b/model/createObjectType.ts new file mode 100644 index 0000000000000000000000000000000000000000..c7c39566e73922302ea80033c69ba4c9cd78f202 --- /dev/null +++ b/model/createObjectType.ts @@ -0,0 +1,28 @@ +// 1. 字面量创建 +const obj1 = {} + +/** + * 2. new操作符创建:创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例 + * + * 调用的时候发生四件事: + * a. 创建一个空对象({}); + * b. 为新对象添加属性 __proto__ , 将该属性链接至构造函数的原型对象; + * c. 执行构造函数方法,属性和方法被添加到this引用的对象中; + * d. 如果构造函数中没有返回新对象,那么返回this,即创建这个新对象。否则返回构造函数中返回的对象。 + */ +const obj2 = new Object() + +/** + * 3. 使用 Object.create() 创建对象 + * Object.create() 方法创建一个新对象,使用现有的对象来提供新创建的对象的 __proto__。 + */ +const obj3 = Object.create(null) + + +console.log(obj1, obj2, obj3); + +console.log('obj1 === obj2', obj1 == obj2); + +console.log('obj1 === obj3', obj1 == obj3); + +console.log('obj2 === obj3', obj2 == obj3); diff --git a/package.json b/package.json new file mode 100644 index 0000000000000000000000000000000000000000..b28512d0e4b781a9b5cedcf9e4308fcf245370dd --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "design-patterns", + "version": "1.0.0", + "description": "学习设计模式", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "build": "tsc", + "build:browserify": "browserify ./dist/SingletonPattern.js -o ./dist/SingletonPattern.js" + }, + "repository": { + "type": "git", + "url": "https://gitee.com/csq-cn/design-patterns.git" + }, + "author": "", + "license": "ISC" +} diff --git a/singletonPatternClassTest.html b/singletonPatternClassTest.html new file mode 100644 index 0000000000000000000000000000000000000000..5efc4143bb72544a156b76b81027d129ba7f08cf --- /dev/null +++ b/singletonPatternClassTest.html @@ -0,0 +1,49 @@ + + + +
+ + +