资讯专栏INFORMATION COLUMN

听飞狐聊JavaScript设计模式系列07

BetaRabbit / 342人阅读

摘要:本回内容介绍上一回聊到单例模式,做了一道题,内容不多,比较容易理解。这里其实还可以进一步优化,达到高聚类低耦合,这里工厂模式就告一段落了。

本回内容介绍

上一回聊到JS单例模式(singleton),做了一道题,内容不多,比较容易理解。
介一回嘞,聊聊工厂模式,之前聊到过工厂模式,这回聊深入点儿,可能会比较抽象,不过好在实际开发中使用还算广泛,理解起来会比较容易,开始咯:

1. 简单工厂

比如我们创建一个会员系统,有会员和管理员两种角色,每种角色有登录,注销的功能,
这里需要引入之前讲过的接口类,如下:

</>复制代码

  1. // 用户类
  2. function User(){};
  3. // 用户工厂模式
  4. User.prototype = {
  5. // 还原构造器,指向User
  6. constructor:User,
  7. // 创建用户的方法,传入的type是用户类型
  8. createUser:function(type){
  9. // 这里建一个变量,用于返回实例
  10. var user;
  11. // 判断传入的用户类型,返回该类型的实例
  12. switch(type){
  13. case "Member":user = new Member();break;
  14. case "Admin" :user = new Admin();break;
  15. };
  16. // 这里之前讲过的,检测接口
  17. Interface.ensureImplements(user,UserInterface)
  18. return user;
  19. }
  20. }
  21. // 创建一个用户接口,而且必须实现该接口的login,logout两个方法
  22. var UserInterface = new Interface("UserInterface",["login","logout"]);
  23. // 会员类,包括实现的接口方法
  24. function Member(){}
  25. Member.prototype.login = function(){alert("会员登录");}
  26. Member.prototype.logout = function(){alert("会员注销");}
  27. // 管理员类,包括实现的接口方法
  28. function Admin(){}
  29. Admin.prototype.login = function(){alert("管理员登录");}
  30. Admin.prototype.logout = function(){alert("管理员注销");}
  31. // new一个用户工厂
  32. var o = new User();
  33. // 创建一个管理员
  34. var a = o.createUser("Admin");
  35. // 调用login方法
  36. a.login();
  37. // 下面一堆是会员的实现,不用多说了吧
  38. var o2 = new User();
  39. var m = o.createUser("Member");
  40. m.logout();

这就是一个简单工厂模式实现了,应该很多盆友已经看出来了,同样的方法要实现两次,好像有点冗余了吧,那么就可以用到之前的继承了,改吧改吧,帅狐show time:

2. 简单工厂之解耦

这里要用到之前写的继承类了,写一个用户基类,还要考虑到每个用户和管理员分别有不同的权限,那么我们可以再做一次工厂解耦,细化粒度,如下:

</>复制代码

  1. function User(){};
  2. User.prototype = {
  3. constructor:User,
  4. // 给用户配置权限,type是用户类型
  5. assignRole:function(type){
  6. // 创建用户,这里还可以做很多扩展,这里先留...
  7. var user = UserFactory.createUser(type);
  8. return user;
  9. }
  10. }
  11. // 创建用户的工厂(还记的上一回的单例模式吗,这也是个单例模式哟)
  12. var UserFactory = {
  13. // 这里为了解耦,跟上面的代码对比一下,换了个位置
  14. createUser:function(type){
  15. var user;
  16. switch(type){
  17. case "Member":user = new Member();break;
  18. case "Admin" :user = new Admin();break;
  19. };
  20. Interface.ensureImplements(user,UserInterface)
  21. return user;
  22. }
  23. }
  24. var UserInterface = new Interface("UserInterface",["login","logout"]);
  25. // User的基类,如果有疑惑,看看之前讲的继承
  26. function BaseUser(){};
  27. BaseUser.prototype = {
  28. constructor:BaseUser,
  29. login:function(){
  30. alert(this.constructor.name + " 登录");
  31. },
  32. logout:function(){
  33. alert(this.constructor.name + " 注销");
  34. }
  35. }
  36. // 用户类,继承基类,这样就有了两个方法
  37. function Member(){}
  38. extend(Member,BaseUser);
  39. // 管理员类,这样就避免了重复创建的冗余
  40. function Admin(){}
  41. extend(Admin,BaseUser);
  42. // 这里没什么好说的,实例测试
  43. var o = new User();
  44. var a = o.assignRole("Admin");
  45. a.login();
  46. var o2 = new User();
  47. var m = o.assignRole("Member");
  48. m.logout();

这个例子稍微开始有点复杂了,结合了之前聊的接口,继承,单例等,在配置权限的地方其实还可以做很多扩展,比如:
有会员有不同等级的会员,管理有不同等级的管理员,不同的级别存在不同的方法,要做到这样的话,我们可以通过抽象类,让每个类覆盖方法,动态的创建工厂,来吧,继续帅狐show time:

3. 简单工厂之抽象类

不同的用户组有不同的角色,不同的角色拥有不同的权限,如下:

</>复制代码

  1. function User(){};
  2. User.prototype = {
  3. constructor:User,
  4. // 这里是个抽象方法,每个类可以根据不同的需求来重载
  5. assignRole:function(type){
  6. // 调用自身的抽象方法,意义是在无重载的时候执行
  7. this.abs(type);
  8. },
  9. // 这里是在无重载的时候执行
  10. abs:function(){
  11. throw new Error("the abstract class can override the virtual method with an abstract method.");
  12. }
  13. };
  14. // 多带带定义Member组
  15. function MemberGroup(){}
  16. extend(MemberGroup,User);
  17. MemberGroup.prototype = {
  18. constructor:MemberGroup,
  19. // 分配权限方法,根据传入的角色来创建不同的实例
  20. assignRole:function(type){
  21. var role;
  22. // 这里定义两个角色,会员和高级会员
  23. var group = ["Member","SeniorMember"];
  24. // indexOf眼熟吧,第一回的时候聊过的ES5的新玩意
  25. if(group.indexOf(type)>-1){
  26. // 调用用户工厂的创建用户方法
  27. role = UserFactory.createUser(type);
  28. }else{
  29. alert("无该"+type+"角色!");
  30. }
  31. return role;
  32. }
  33. }
  34. // 跟上面一样,这里定义Admin
  35. function AdminGroup(){}
  36. extend(AdminGroup,User);
  37. AdminGroup.prototype = {
  38. constructor:AdminGroup,
  39. assignRole:function(type){
  40. var role;
  41. // 这里定义两个角色,管理员和高级管理员
  42. var group = ["Admin","SeniorAdmin"];
  43. if(group.indexOf(type)>-1){
  44. role = UserFactory.createUser(type);
  45. }else{
  46. alert("无该"+type+"角色!");
  47. }
  48. return role;
  49. }
  50. }
  51. // 创建用户的工厂(跟上一个例子一样,只是这里是动态创建工厂)
  52. var UserFactory = {
  53. createUser:function(type){
  54. // eval()直接执行
  55. var user = eval("new "+type+"()");
  56. Interface.ensureImplements(user,UserInterface)
  57. return user;
  58. }
  59. }
  60. var UserInterface = new Interface("UserInterface",["login","logout"]);
  61. // User的基类,如果有疑惑,看看之前讲的继承
  62. function BaseUser(){};
  63. BaseUser.prototype = {
  64. constructor:BaseUser,
  65. login:function(){
  66. alert(this.constructor.name + " 登录");
  67. },
  68. logout:function(){
  69. alert(this.constructor.name + " 注销");
  70. }
  71. }
  72. // 会员类,继承基类,这样就有了两个方法
  73. function Member(){}
  74. extend(Member,BaseUser);
  75. // 高级会员类,有自己特有的高级方法
  76. function SeniorMember(){}
  77. extend(SeniorMember,BaseUser);
  78. SeniorMember.prototype.seniorM = function(){alert("高级会员的权限")};
  79. // 管理员类,这样就避免了重复创建的冗余
  80. function Admin(){}
  81. extend(Admin,BaseUser);
  82. // 高级管理员类,有自己特有的高级方法
  83. function SeniorAdmin(){}
  84. extend(SeniorAdmin,BaseUser);
  85. SeniorAdmin.prototype.seniorA = function(){alert("高级管理员的权限")};
  86. // 这里其实可以回忆一下装饰者模式,把高级管理员的实例做一次包装
  87. var obj = new SeniorAdmin();
  88. // 超级管理员类,装饰高级管理员的实例
  89. function SuperAdmin(obj){}
  90. SuperAdmin.prototype.superA = function(){
  91. obj.seniorA();
  92. alert("再弹一个窗,特效,特效,加特效!因为我是超级管理员!哟呼~~");
  93. };
  94. // 这里没什么好说的,实例测试
  95. var o = new MemberGroup();
  96. var a = o.assignRole("SeniorMember");
  97. a.seniorM();
  98. var o2 = new AdminGroup();
  99. var m = o2.assignRole("SeniorAdmin");
  100. m.seniorA();
  101. var o3 = new SuperAdmin(obj);
  102. o3.superA();

这个例子有点略复杂,在上一个例子的基础上做了抽象类,还复习了装饰者模式,如果感觉晕菜,可以跳过。
这里其实还可以进一步优化,达到高聚类低耦合,这里工厂模式就告一段落了。


装个逼先。今天看优酷放出了新版嘻哈四重奏,一看没有了原版人马,就算是笑点也笑不起来了,算了换一个剧看,啊呃~~

</>复制代码

  1. 这一回聊的内容比较绕脑袋,反正感觉晕菜的话就启动囫囵吞枣模式,想不通的先停下,以后再回过来看或许就恍然大悟,
    下面的内容,跟上一回一样,就一道题好了。

题目:快速排序

这个快速排序比较基础,网上很多,这里我就把注释写清楚一点,方便大家理解:

</>复制代码

  1. var arr = [12,5,36,6,22,66];
  2. // 快速排序
  3. function quickSort(arr){
  4. // 判断数组长度,只有小等于1的时候返回
  5. if(arr.length<=1){
  6. return arr;
  7. }
  8. // 向下取整,也就是取一半的长度
  9. var num = Math.floor(arr.length/2);
  10. // 取中间的那个数
  11. var numValue = arr.splice(num,1);
  12. // 定义两个数组做容器
  13. var left = [];
  14. var right = [];
  15. // 循环数组
  16. for(var i=0;i
  17. 网上找的例子,注释写的还算清楚吧,难度不大,跟上一回一样,当娱乐消遣。

  18. </>复制代码

    1. 这一回,主要聊了工厂模式,并且将前面的内容融合了进去,复习了继承,接口,单例模式,装饰者模式,涉及了一些简单的业务逻辑,对于刚接触面向对象,设计模式的童鞋稍微有点难度~~
      下一回,就聊用的比较频繁的一个设计模式,门面模式。

  19. 客观看完点个赞,推荐推荐呗,嘿嘿~~

  20. 注:此系飞狐原创,转载请注明出处

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86151.html

相关文章

  • 飞狐JavaScript设计模式系列06

    本回内容介绍 上一回聊到JS中模拟接口,装饰者模式,掺元类,分析了backbone的继承源码,感觉还好吧! 介一回,偶们来聊一下在JS单例模式(singleton),单例模式其实运用很广泛,比如:jquery,AngularJS,underscore吖虾米的都是单例模式,来吧,直接开始咯: 1. 单例模式 保证一个类只有一个实例,从全局命名空间里提供一个唯一的访问点来访问该对象。其实之前写过的对象...

    hiYoHoo 评论0 收藏0
  • 飞狐JavaScript设计模式系列02

    摘要:本回内容介绍上一回聊到数据类型,简单的过了一遍,包括个数组新特性等,这一回来聊聊对象,结合数组来实战一些例子,在做题中成长,记忆会更深刻,来吧,开始咯创建实例的方式有两种使用操作符后跟构造函数飞狐使用对象字面量表示法飞狐也可以飞狐这种写法与 本回内容介绍 上一回聊到JS数据类型,简单的过了一遍,包括9个数组新特性等,这一回来聊聊Object对象,结合数组来实战一些例子,在做题中成长,记...

    tangr206 评论0 收藏0
  • 飞狐JavaScript设计模式系列11

    摘要:桥接模式之特权函数特权函数,用一些具有特权的方法作为桥梁以便访问私有空间,可以回忆一下之前的系列。连续自然数分组,计算最多组的个数将至这个连续自然数分成组使每组相加的值相等。个数组中数字最多的一组有个此时的和为。 本回内容介绍 上一回,聊了适配器模式,图片预加载,介一回,聊桥接模式(Bridge),跟之前一样,难度比较小,桥接模式将抽象部分与它的实现部分分离,通过桥接模式联系彼此,同时...

    wanglu1209 评论0 收藏0
  • 飞狐JavaScript设计模式系列10

    摘要:本回内容介绍上一回,聊了代理模式,虚拟代理,图片懒加载,介一回,也比较容易,适配器模式,用一个新的接口对现有类的接口进行包装,处理类与的不匹配。这一回,主要聊了适配器模式,图片预加载,主要还是理解下一回,聊一聊桥接模式,顺便做一做计算题。 本回内容介绍 上一回,聊了代理模式,虚拟代理,图片懒加载,介一回,也比较容易,适配器模式(Adapter),用一个新的接口对现有类的接口进行包装,处...

    yexiaobai 评论0 收藏0
  • 飞狐JavaScript设计模式系列14

    摘要:本回内容介绍上一回,聊了聊状态模式,并介绍了一下介一回,聊链式编程,模拟一下,再模拟一下封装一个库。这一回,主要聊了链式调用,模拟了,尤其是,希望大家能喜欢这次代码分享。下一回,聊一聊的策略模式。 本回内容介绍 上一回,聊了聊状态模式(State),并介绍了一下vue.js;介一回,聊链式编程,模拟一下jQuery,再模拟一下underscore.js,封装一个库。 1. 链式调用 (...

    fox_soyoung 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<