1. /*
  2. 一、单例模式
  3. */
  4. var Universe;
  5. (function () {
  6. var instance;
  7. Universe = function Universe() {
  8. if (instance) {
  9. return instance;
  10. }
  11. instance = this;
  12. };
  13. }());
  14. /*
  15. 二、构造函数模式
  16. */
  17. function VM() {
  18. this.name = "123";
  19. }
  20. VM.prototype.Method = function () { }
  21. var vm = new VM();
  22. /*
  23. 三、建造者模式 --- 回调
  24. 一个复杂对象由多个部分对象构成,应对部分对象发生变化,组合后算法结构不变的情况
  25. */
  26. // 回调:回调函数的处理,不关心数据来源,如ajax里的succes
  27. function GetBeer(id, callback) {
  28. //复杂对象 = GetBeer ,算法结构不变
  29. asyncRequest('get', URL, function (resp) {
  30. //部分对象callback,算法变化
  31. callback(resp, responseText);
  32. });
  33. }
  34. var el = document.querySelector('#test');
  35. el.addEventListener('click', GetBeerByIdBridge, false);
  36.  
  37. function GetBeerByIdBridge(e) {
  38. GetBeer(this.id, function (beer) { });
  39. }
  40. /*
  41. 四、工厂模式
  42. */
  43. //创建对象时,无需指定创建对象的具体类
  44. var productManager = {};
  45. productManager.createProductA = function () { };
  46. productManager.createProductB = function () { }
  47. productManager.factory = function (type) {
  48. return new productManager[type]();
  49. }
  50. productManager.factory("createProductA");
  51. /*
  52. 五、装饰者模式
  53. */
  54. // 为已有功能动态地添加更多功能的一种方式,把每个要装饰的功能放在单独的函数里,然后用该函数包装所要装饰的已有函数对象
  55. // 优点是把类(函数)的核心职责和装饰功能区分开了
  56. var tree = {};
  57. tree.decorate = function () { }
  58. tree.getDecorate = function (funcName) {
  59. tree[funcName].prototype = this;//指定当前方法的原型
  60. return new tree[funcName];
  61. }
  62. tree.Blue = function () {
  63. this.decorate = function () {
  64. this.Blue.prototype.decorate();//先执行原型的decorate 即:tree.decorate();
  65. }
  66. }
  67. tree.Red = function () {
  68. this.decorate = function () {
  69. this.Red.prototype.decorate();//先执行原型的decorate 即:tree.Bule.decorate();
  70. }
  71. }
  72. tree = tree.getDecorate("Bule");//将Bule赋值给tree,父级原型tree.Decorate可用
  73. tree = tree.getDecorate("Red");//将Red赋值给tree,父级原型tree.Bule.Decorate可用
  74. tree.decorate();
  75. /*
  76. 六、外观模式
  77. */
  78. // 把一些复杂操作封装起来,并创建一个简单的接口用于调用
  79. /*
  80. 使用条件
  81. 首先,设计阶段:三层架构之间建立外观Facade。
  82. 其次,开发阶段:子系统越来越复杂,增加外观Facade可以提供一个简单的接口,减少他们之间的依赖。
  83. 第三,老系统过于复杂,无法再进行修改,让新系统与外观facade交互。
  84. */
  85. var moduleEvent = {
  86. stop: function (e) {
  87. e.preventDefault();
  88. e.stopPropagation();
  89. }
  90. }
  91. /*
  92. 七、代理模式
  93. 1.远程代理,也就是为了一个对象在不同的地址空间提供局部代表,这样可以隐藏一个对象存在于不同地址空间的事实,就像web service里的代理类一样。
  94. 2.虚拟代理,根据需要创建开销很大的对象,通过它来存放实例化需要很长时间的真实对象,比如浏览器的渲染的时候先显示问题,而图片可以慢慢显示(就是通过虚拟代理代替了真实的图片,此时虚拟代理保存了真实图片的路径和尺寸。
  95. 3.安全代理,用来控制真实对象访问时的权限,一般用于对象应该有不同的访问权限。
  96. 4.智能指引,只当调用真实的对象时,代理处理另外一些事情。例如C#里的垃圾回收,使用对象的时候会有引用次数,如果对象没有引用了,GC就可以回收它了
  97. */
  98. var girl = function (naem) { }
  99. var sneder = function () {
  100. this.send = function () { }
  101. }
  102. var proxy = function () {
  103. this.send = function () {
  104. (new sender()).send();
  105. }
  106. }
  107. /*
  108. 八、观察者模式 -- 发布订阅模式
  109. 多个观察者观察一个主题对象,主题对象发生变化,通知所有观察者
  110. */
  111. var pubsub = {};
  112. (function (q) {
  113. var topics = {},
  114. subUid = -1;
  115. //订阅方法
  116. q.subscribe = function (topic,func) {
  117. if (!topics[topic]) {
  118. topics[topic] = [];
  119. }
  120. var token = (++subUid).toString();
  121. topics[topic].push({
  122. token: koken,
  123. func: func
  124. });
  125. return token;
  126. }
  127. //取消订阅
  128. q.unSubscribe = function (token) {
  129. for (var m in topics) {
  130. if (topics[m]) {
  131. for (var i = 0, j = topics[m].length; i < j;i++) {
  132. if (topics[m].token==token) {
  133. topics[m].splice(i, 1);
  134. return token;
  135. }
  136. }
  137. }
  138. }
  139. return false;
  140. }
  141. //发布方法
  142. q.publish = function (topic,args) {
  143. if (!topics[topic]) {
  144. return false;
  145. }
  146. setTimeout(function () {
  147. var subscribers = topics[topic],
  148. len = subscribers ? subscribers.length : 0;
  149. while (len--) {
  150. subscribers[len].func(topic, args);
  151. }
  152. }, 0);
  153. }
  154. }(pubsub));

设计模式 --深入理解javascript的更多相关文章

  1. js架构设计模式——理解javascript中的MVVM开发模式

    理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewMod ...

  2. 【设计模式+原型理解】第一章:使用Javascript来巧妙实现经典的设计模式

    刚开始学习设计模式之前,我是没想说要学习设计模式的,我只是因为想学习JS中的原型prototype知识,一开始我想JS中为什么要存在原型这个东西?于是慢慢通过原型而接触到设计模式,后来发现我这个过程是 ...

  3. 深入理解JavaScript系列(38):设计模式之职责链模式

    介绍 职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象 ...

  4. 深入理解JavaScript系列(36):设计模式之中介者模式

    介绍 中介者模式(Mediator),用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 主要内容来自:http://www ...

  5. 深入理解JavaScript系列(30):设计模式之外观模式

    介绍 外观模式(Facade)为子系统中的一组接口提供了一个一致的界面,此模块定义了一个高层接口,这个接口值得这一子系统更加容易使用. 正文 外观模式不仅简化类中的接口,而且对接口与调用者也进行了解耦 ...

  6. 深入理解JavaScript系列(31):设计模式之代理模式

    介绍 代理,顾名思义就是帮助别人做事,GoF对代理模式的定义如下: 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问. 代理模式使得代理对象控制具体对象的引用.代理几乎可以是任何对 ...

  7. 深入理解JavaScript系列(25):设计模式之单例模式

    介绍 从本章开始,我们会逐步介绍在JavaScript里使用的各种设计模式实现,在这里我不会过多地介绍模式本身的理论,而只会关注实现.OK,正式开始. 在传统开发工程师眼里,单例就是保证一个类只有一个 ...

  8. 深入理解javascript之设计模式

    设计模式 设计模式是命名.抽象和识别对可重用的面向对象设计实用的的通用设计结构. 设计模式确定类和他们的实体.他们的角色和协作.还有他们的责任分配. 每个设计模式都聚焦于一个面向对象的设计难题或问题. ...

  9. 深入理解JavaScript系列(33):设计模式之策略模式(转)

    介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很 ...

随机推荐

  1. Castle 集锦

    Castle Windsor http://www.cnblogs.com/RicCC/archive/2010/03/30/castle-windsor-ioc-di.html 官方配置说明(反正我 ...

  2. JLINK V8 Keil MDK4.10 STM32

    新买的JLINK v8仿真器,第一次使用,编译环境是Keil MDK4.10,目前芯片是STM32F103x. 按照光盘的说明先安装了驱动,USB接上JLINK v8,显示驱动成功.但是在debug或 ...

  3. 任务管理界面添加显示RAM信息

    显示RAM信息的核心代码是大蛋的,我只不过是整理下教程而已! 大蛋应该不会介意的吧,首先你需要apktool和SystemUI.apk,framework-res.apk 然后开始加载框架和反编译.. ...

  4. PHP 学习笔记 01

    例子: 为什么要学PHP 主观原因: 前段时间在学校处理了毕业的一些事情,回到上海后开始了找工作的旅程.意向工作是WPF开发或者ASP.NET 作为后端的WEB开发. 陆陆续续一直在面试,其中有一家公 ...

  5. TETRIS 项目开发笔记

    java学习一个月了,没有什么进展,期间又是复习Linux,又是看Android,瞻前顾后,感觉自己真的是贪得无厌, 学习的东西广而不精,所以写出的文章也就只能泛泛而谈.五一小长假,哪里都没有去,也不 ...

  6. SQL基础篇---函数及其函数配套使用的关键字

    一.数值函数 知识点1 SUM 求总和 SELECT breakfast,sum(price) FROM my_foods GROUP BY breakfast ORDER BY SUM(price) ...

  7. .NET开源工作流RoadFlow-流程设计-保存与发布

    如果流程未设计完时可以先保存,以后再打开接着设计.点击工具栏上的保存按钮即可保存当前流程设计: 如果下次要接着设计,则可以打开该流程继续设计: 如果流程设计完成,可以点击安装按钮来发布流程,流程安装成 ...

  8. spring中scope(作用越)理解

    今天总结了一下spring中作用域scope的用法.在spring中作用域通过配置文件形式的用法如下. <bean id="role" class="spring. ...

  9. oracle 约束

    约束是表中列的属性,用来维护数据结构完整性的一种手段约束的种类:NOT NULLUNIQUEPARIAMRY KEYFOREIGN KEYCHECK enble validate 检查现有数据和新数据 ...

  10. listview 优化

    ListView的优化: (前两点都是利用ListView的自身优化机制优化[缓存优化]) 1.利用ListView自身的缓存机制,他会缓存条目中的一个条目item,当listview第一屏显示完成之 ...