JS 与设计模式初解

xorpay 发布于2019-08-20 12:35 / 475人阅读

摘要：关于的设计模式，强力推荐这本书设计模式与开发实践，来自腾讯的大牛所著。讲解设计模式之前，我们先接触一个重要的概念鸭子类型什么叫鸭子类型呢需求如果我们想听鸭子的嘎嘎嘎叫声情况如果有一只狗不是鸭子，它也能发出嘎嘎嘎的叫声。

当一个项目的代码量比较多，或者多人开发的时候，就需要引入一些设计模式来让我们更好的构建项目。否则代码就会变得乱糟糟，像一团面条一样了。
讲解设计模式比较好的书有：
1、设计模式
2、Head First设计模式

不过以上两本书主要是关于静态语言、面向对象的具体实现，因为静态面向对象语言（比如C++ 和 Java）代码写法限制的是比较多的。不能给类动态的添加属性、方法，函数的参数限制了类型等。

JS 虽然也是面向对象，但是同时支持函数式编程，函数本身是一种值可以传递。JS的动态特性也不会限制变量类型。
所以Java 中的多态对JS 来说，那都不叫事。
对于 JS ，设计模式也应该更加灵活，不应该把静态语言的设计模式生搬硬套到 JS 上，而应该根据语言特性灵活应用。
关于 JS 的设计模式，强力推荐这本书：JavaScript设计模式与开发实践，来自腾讯的大牛所著。

讲解设计模式之前，我们先接触一个重要的概念 鸭子类型
什么叫鸭子类型呢？

需求：如果我们想听鸭子的 嘎嘎嘎 叫声

情况：如果有一只狗（不是鸭子），它也能发出 嘎嘎嘎 的叫声。也就是说这条狗也能达到我们的目的，那这条狗就是可以用的。

思考：我们不再管这个对象到底是不是 instanceof Duck， 而是看它有没有 嘎嘎嘎 叫的能力。就是说我们不再是面向对象，而是面向接口。管它是什么类型，什么对象，只要实现了 嘎嘎嘎 叫的这个接口，能达到我们的目的，就可以了。

举个例子：

// aDiv 不是数组，而是 HTMLCollection 对象
var aDiv = document.getElementsByTagName("div");

// 但是由于 aDiv 也有 length 属性，因此我们可以像数组一样遍历它
for (var i=0, len=aDiv.length; i
接下来一个重要的概念是 封装，把一个对象、方法或模块的内部实现隐藏起来，只暴露接口供外部使用。
JS 最常见的是用立即执行函数封装局部变量，局部函数，暴露出部分函数或变量。
// 对 ming 这个对象进行了封装，privateName 只能在立即执行函数的内部使用，外部获取不到的。
var ming = (function() {
  // 乳名，外人不知道的
  var privateName = "狗蛋";
  // 学名
  var publicName = "王小明";
  var publicAge = 24;

  return {
    age: publicAge,
    getName: function() {
      return publicName;
    }
  };
}());
JS 面向对象采用的是原型克隆方式，而不是 Java 类和对象的模式。
因此 JS 生产对象的方式更像是 细胞分裂，Object.prototype 作为第一个细胞，然后分裂出 Function.prototype 、Array.prototype 、String.prototype 等，分裂出来的细胞可以添加自己的属性和方法。而且 JS 是没有 类 这个东东的。
Java 中的类像是一个模具，对象则是用这个模具印出来的，
第一篇文先说这么多，后续再把设计模式一一过一遍。最重要的是，推荐大家看看腾讯大牛的书。

GPU云服务器云服务器初解 python与设计模式软件设计与开发网络规划与设计

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

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

前端Http协议缓存初解

摘要：而缓存就是为了解决用户请求速度与释放服务器压力而生的。浏览器缓存则是另外的如个人见解。缓存的判断规则过期机制过期机制就是浏览器根据缓存的有效期进行判断，如果在有效期内就使用缓存，否则就抛弃这个缓存。否则会进入其他缓存依据判断。 [TOC] 简介用户获取网络资源，需要通过非常长的网络去服务器上请求资源,另外服务端为了应对大量的用户请求而不断的提升硬件性能与带宽。这对用户与服务端都非常的...

AlienZHOU 2019-08-23 14:44 评论0 收藏0
正则与JS中的正则

摘要：注意本文将正则与中的正则分开讨论。正则零宽断言更多参考各种语言对于正则不同支持参考单行模式与多行模式通过设置正则表达式后的修饰符可开启对应的匹配模式单行模式和多行模式。最近这段时间帮同学处理一些文档，涉及到一些结构化文档的工作大部分都得使用正则表达式，之前对于正则的认识大多来源于语言书上那几页的介绍，自己也没有用过几次。这里将我之前感到模糊的概念作个整理。因为对JS了解多点，所...

firim 2019-08-19 17:11 评论0 收藏0
js设计模式--组合模式

摘要：文章系列设计模式单例模式设计模式策略模式设计模式代理模式设计模式迭代器模式设计模式发布订阅模式设计模式命令模式概念组合模式就是用小的子对象来构建更大的对象，而这些小的子对象本身也许是由更小的孙对象构成的。前言本系列文章主要根据《JavaScript设计模式与开发实践》整理而来，其中会加入了一些自己的思考。希望对大家有所帮助。文章系列 js设计模式--单例模式 js设计模式--策略...

blankyao 2019-08-23 14:31 评论0 收藏0
javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
JS 桥接模式

摘要：简介桥接模式将抽象部分与它的实现部分分离，使它们都可以独立地变化。同时桥接模式也有自己的缺点大量的类将导致开发成本的增加，同时在性能方面可能也会有所减少。 1. 简介桥接模式（Bridge）将抽象部分与它的实现部分分离，使它们都可以独立地变化。其实就是函数的封装，比如要对某个DOM元素添加color和backgroundColor，可以封装个changeColor函数，这样可以在多个...

chemzqm 2019-08-21 18:19 评论0 收藏0