[关闭]
@GivenCui 2016-06-01T14:44:36.000000Z 字数 4234 阅读 657

第七,八课 设计模式

js高级

目录

JS课程合集跳转链接

设计模式的概念

什么是设计模式

  • 设计模式是一套反复使用, 代码设计经验的总结.使用设计模式是为了能够更好的理解代码,更好的重用代码.
  • 设计模式不是JS独有的, 我们常用的23种设计模式, 针对的是大部分面向对象语言.

1.代理设计模式

想实现某个功能,自己不去实现,我委托"别人"帮我实现.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>                           
  6.     <script type = "text/javascript">
  8.     </script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

2.单例设计模式

单例设计模式
通过构造函数,无论创造多少次,只能创造出来唯一的一个实例对象.
单例设计模式的应用场景:
1. 节约性能
2. 数据共享
3. window就是单例对象

单线程就可以用this第二次以后保持不变;JS就是单线程的.
多线程的话可能没办法确定谁是第一次,上"锁"解决.

单例设计模式的实现思想

查资料!
!!!!!!!!!!

匿名函数立即调用的写法

声明和调用一起写的方法
应用作为匿名空间
应用在闭包情况下的立即调用
在单例模式时用来第一次创建之后就"锁住"

  1. (function () {
  2.     console.log("测试,是否立即调用??");
  3. })();
  1. var fn = (function () {
  2.     console.log("另一种写法");
  3. })();

3.策略设计模式

定义一些算法或逻辑, 把它们封装起来, 根据情况去分别调用这些算法和逻辑;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>策略设计模式</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         // 创建一个策略对象, 方便管理相应的算法
  10.         // 类似switch的逻辑,可以代替switch来设计更高级的功能!!
  11.         var strategies = {
  13.             a : function (salary) {     // a策略
  14.                 return salary*2;
  15.             },
  16.             b : function (salary) {     // b策略
  17.                 return salary*3;
  18.             },
  19.             c : function (salary) {     // c策略
  20.                 return salary*4;
  21.             }
  22.         };
  24.         // 
  25.         var getMoney = function (level,salary) {
  26.             // 用[]去匹配
  27.             return strategies[level](salary);       // []可以调用形参属性,同时属性又是一个方法
  28.         };
  29.         var x = getMoney("b", 20000);
  30.         console.log(x);
  31.     </script>
  32. </body>
  33. </html>

4.适配器设计模式

解决两个软件或者两个程序数据接口不兼容的问题
举例: 生活中的笔记本的电源适配器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>适配器设计模式</title>
  6.     <script type = "text/javascript">
  8.     </script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

5.工厂设计模式

设计一个函数,用来接收参数,并根据不同的参数返回同一个接口的不同实例.

工厂设计模式的优缺点:
1. 优点: 解决了创建多个相似对象的问题
2. 缺点: 没有解决对对象的识别问题(没有明确的对象的类型).

思想的应用
1. 把工厂作为一个工具类去封装方法.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>工厂设计模式</title>
  6.     <script type = "text/javascript">
  8.     </script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

6.模板设计模式

利用继承的思想实现模板设计模式,JS中的继承是利用prototype来实现.

两部分组成
1.抽离出来的父类(父级)对象
2.具体的子类(子级)对象

注: JS中没有类的继承,只有对象的继承.换句话说,某个类型只能继承于某个类型的一个实例对象.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>模板设计模式</title>
  6. </head>
  7. <body>
  8.     <script type="text/javascript">
  9.         // 模板设计模式,利用继承
  10.         // JS的继承用prototype来实现
  12.         /*
  13.          * 咖啡
  14.          * 1. 烧水
  15.          * 2. 冲咖啡
  16.          * 3. 把咖啡倒入杯子
  17.          * 4. 加糖和奶
  18.          *
  19.          */
  21.         // coffee构造函数
  22.         // console.group("喝咖啡流程");
  23.         // var Coffee = function () {
  25.         // };
  27.         // // 烧水方法
  28.         // Coffee.prototype.boilWater = function () {
  29.         //  console.log ("烧水");
  30.         // };
  31.         // // 冲咖啡
  32.         // Coffee.prototype.brewCoffee = function () {
  33.         //  console.log("冲咖啡");
  34.         // };
  35.         // // 把咖啡倒入杯子
  36.         // Coffee.prototype.pourInCup = function () {
  37.         //  console.log("把咖啡倒入杯子");
  38.         // };
  39.         // // 加糖/盐
  40.         // Coffee.prototype.addSugarAndMilk = function () {
  41.         //  console.log("加糖和奶");
  42.         // };
  44.         // /*********封装一下咖啡的流程**********/
  45.         // Coffee.prototype.init = function () {
  46.         //  this.boilWater();
  47.         //  this.brewCoffee();
  48.         //  this.pourInCup();
  49.         //  this.addSugarAndMilk();
  50.         // };
  52.         // // 创建一个咖啡对象
  53.         // var coffee = new Coffee();
  54.         // coffee.init();
  55.         // console.groupEnd();
  57.         // console.group("喝茶流程"); 
  58.         //  /*
  59.         //   * 茶
  60.         //   */
  61.         //  // 喝茶的构造函数
  62.         //  var Tea = function () {
  64.         //  };
  66.         //  // 1.烧水
  67.         //  Tea.prototype.boilWater = function () {
  68.         //      console.log("烧水");
  69.         //  };
  70.         //  // 2.沏茶
  71.         //  Tea.prototype.brewTea = function () {
  72.         //      console.log("沏茶");
  73.         //  };
  74.         //  // 3.把茶放到杯子中
  75.         //  Tea.prototype.pourInCup = function () {
  76.         //      console.log("把茶放到杯子中");
  77.         //  };
  78.         //  // 4.加柠檬
  79.         //  Tea.prototype.addLemon = function () {
  80.         //      console.log("加柠檬");
  81.         //  };
  83.         //  // 封装喝茶流程
  84.         //  Tea.prototype.init = function () {
  85.         //      this.boilWater();
  86.         //      this.brewTea();
  87.         //      this.pourInCup();
  88.         //      this.addLemon();
  89.         //  };
  91.         //  // 创造茶的实例
  92.         //  var tea = new Tea();
  93.         //  tea.init();
  94.         // console.groupEnd();
  96.         /******发现有共同点,提出一个父类*****/
  97. console.group("用模板设计模式优化");
  98.     // 共同的部分抽象到一个父类里,子类继承父类即可
  99.     // JS中没有类的继承,只有对象的继承.换句话说,某个类型只能继承于某个类型的一个实例对象. 
  100.     // 咖啡和茶共有方法抽象
  101.     // 1.boilwater() 2. brew()  3. pourInCup() 4. add()
  102.     // 放到父类里
  104.     var Drink = function () {
  106.     };
  108.     Drink.prototype.boilwater = function () {
  109.         console.log("烧水");
  110.     };
  111.     // 空是为了子类去具体实现
  112.     Drink.prototype.brew = function () {
  113.     };
  114.     Drink.prototype.pourInCup = function () {
  115.         console.log("倒入杯中");
  116.     };
  117.     // 空是为了子类去具体实现
  118.     Drink.prototype.add = function () {
  119.     };
  121.     // 父类流程的实现 
  122.     Drink.prototype.init = function () {
  123.         this.boilwater();
  124.         this.brew();
  125.         this.pourInCup();
  126.         this.add();
  127.     };
  129. /********下面是子类**************/
  131.     console.log("*****喝茶*****");
  132.     // 咖啡
  133.     var Coffee = function () {
  134.     };
  136.     Coffee.prototype = new Drink();
  137.     Coffee.prototype.constructor = Coffee;
  138.     Coffee.prototype.brew = function() {
  139.         console.log("冲咖啡");
  140.     };
  141.     Coffee.prototype.add = function() {
  142.         console.log("咖啡中加糖");
  143.     };
  147.      var coffee = new Coffee();
  148.      coffee.init();
  150.     console.log("*****喝茶*****");
  152.     // 茶
  153.     var Tea = function () {
  155.     };
  157.     Tea.prototype = new Drink();
  158.     Tea.prototype.constructor = Tea;
  159.     Tea.prototype.brew = function() {
  160.         console.log("冲茶");
  161.     };
  162.     Tea.prototype.add = function() {
  163.         console.log("茶中加柠檬");
  164.     };
  167.     var tea = new Tea();
  168.     tea.init();
  170. console.groupEnd();     
  171.     </script>
  172. </body>
  173. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注