17.工厂模式.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!--
  10. js五中设计模式:
  11. 单例模式
  12. 工厂模式
  13. 代理模式
  14. 装饰器模式
  15. 发布订阅模式
  16. -->
  17. <!--
  18. 工厂模式:
  19. 不使用new创建对象 由工厂函数/类统一对对象进行管理 例如创建 封装逻辑
  20. 缺点:
  21. 当模式过多时 工厂代码会显得臃肿
  22. 场景:
  23. 批量相似的对象 同意管理构造逻辑
  24. -->
  25. <script>
  26. // admin
  27. function Production(pName) {
  28. this.name = pName;
  29. this.role = '管理员';
  30. }
  31. // users
  32. function User(uName) {
  33. this.name = uName;
  34. this.role = '用户';
  35. }
  36. function Info(type,name) {
  37. switch(type) {
  38. case 'admin':
  39. return new Production(name);
  40. case 'users':
  41. return new User(name);
  42. default:
  43. throw new Error("传参错误");
  44. }
  45. }
  46. let f1 = Info("admin","图图")
  47. let f2 = Info("users","喜羊羊")
  48. console.log(f1,'f1');
  49. console.log(f2,'f2');
  50. </script>
  51. </body>
  52. </html>