DoKiDoKi

设计模式 设计模式概述 面向对象概述 单一职责原则 开闭原则 里氏代换原则 依赖倒置原则 组合复用原则 接口隔离原则 迪米特法则 设计模式概述模式是在特定环境下人们解决某类重复出现问题的一套成功或有效的解决方案。 设计模式是在特定环境下为解决某一通用软件设计问题提供的一套定制的解决方案，该方案描述了对象和类之间的相互作用。 设计模式是一套被反复使用、多数人知晓的、经过分类别的代码设计经验总结 目的：为了可重用代码、让代码更容易被他人理解、提高代码可靠性 设计模式的组成：模式名称、问题、解决方案、效果 分类： 根据目的分类： 创建型模式（创建对象） 结构性模式（处理类和对象的组合） 行为型模式（描述类和对象如何交互和怎么分配职责） 根据范围分类： 类模式（处理类和子类之间的关系）静态关系 对象模式（处理对象之间的关系） 关系更具动态性 面向对象概述面向对象优点：可维护、可复用、可扩展、灵活性高 面向对象编程特性：封装、继承、多态 衡量软件质量的属性： 可维护性：指软件能够被理解、改正、适应及扩展的难易程度 可复用性：指软件能够被重复使用的难易程度 目标： 实 ...

WebSocket背景分析HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。 当用户在浏览器上进行操作时，可以请求服务器上的api；但是反过来却不可能：服务器端发生了一个事件，无法将这个事件的信息实时主动地通知客户端。只有在客户端查询服务器当前状态时，所发生事件的信息才会从服务器传递到客户端。 那怎么去实时地知道服务器的状态呢？方法有两个： （1）轮询：客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，实际上对服务器、客户端双方都造成了大量的性能浪费。 （2）长连接：客户端只请求一次，但是服务器会将连接保持，不会返回结果。当服务器有了新数据时，实时地发给客户端，而一直保持挂起状态。这种做法的也造成了大量的性能浪费。 WebSocket 协议最新的 HTML5协议，制定了 WebSocket 协议标准，允许客户端和服务器端以全双工的方式进行通信。 WebSocket 的原理非常简单：利用HTTP请求产生握手，HTTP头部含有 WebSocket 协议的 ...

DNS域名解析DNS 协议是什么概念： DNS 是域名系统 (Domain Name System) 的缩写，提供的是一种主机名到 IP 地址的转换服务，就是我们常说的域名系统。它是一个由分层的 DNS 服务器组成的分布式数据库，是定义了主机如何查询这个分布式数据库的方式的应用层协议。能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。 作用： 将域名解析为IP地址，客户端向DNS服务器（DNS服务器有自己的IP地址）发送域名查询请求，DNS服务器告知客户机Web服务器的 IP 地址。 域名与IP地址IP地址记忆起来非常麻烦，通过域名我们可以更加方便的记忆，从而访问网址。 因为计算机只能识别并且用IP地址定位，所以我们就需要域名转换IP地址这个过程，也就是DNS域名解析过程 域名结构树 我们可以看到根是一个“.”,也就是说所有的域名都会最终由一个根管理。 这个根是由一群服务器组成的。 域名服务器小知识：世界上有13个根域名，由12家独立机构进行运营。已经由1467个节点了。 那么也就是说，绝大部分节点的IP地址都是一样的。我们如何与最近的一个节点取得联系呢？ ...

TCP三次握手和四次挥手TCP/IP是传输层协议，传输层在整个网络体系中都处于中间，起到一个承上启下的作用，建立端到端连接 TCP通讯流程握手之前IP地址：端口号 又叫做 套接字socket，套接字socket就是握手前的核心条件。socket 的本意是“插口或插槽”，顾名思义，可以将 socket 想象成一根网线，一头插在客户端，一头插在服务端，然后进行通信，故客户端与服务端在通信之前必须要创建一个 socket。 三次握手 首先，客户端把SYN开启，请求数据的同步。还会有一个重要的字段Seq序号。seq是随机生成。 seq是随机生成的，作为初始值来进行后续判断依据，这样就更加保证了通道的唯一性。 服务端收到后返回SYN和ACK，并把自己的确认号设为对方的序号+1 客户端收到后，给服务端返回ACK确认报文，并把自己的确认号，设为对方的序号+1，序号设为对方的确认号 握手后三次握手后，就正式建立连接了，这时的客户端就可以发送HTTP请求了，然后服务器响应内容。 四次挥手内容交流完毕后，各自可能就会发起关闭连接的要求，也就是四次挥手的过程。需要注意的是，客户端和 ...

CDN-内容分发网络前言 服务器可能距离自己很远，越远的距离就意味着可能要经过越多的节点，节点之间还可能会发生阻塞或者丢包的状况。服务器不知道用户会在什么事件什么地点来访问，那么服务器采取了一个策略，备份多个服务器到世界各地，形成了一个网络，这个网络就是CDN-内容分发网络。 在这些服务器中会有很多台边缘服务器提供服务，所谓边缘服务器就是接近用户的这些服务器。 CDN这个网络就是帮服务器近距离给用户分发网页内容的，那么网页上这么多内容，CDN要负责分发哪些内容呢？ 分发内容首先我们需要了解，网页的内容分为两种： 静态内容：长期不需要改变的内容，可以固定 动态内容：经常需要改变的，固定不了 注意：即使是静态内容也不是一直保存在CDN里面的 源服务器发送文件给CDN时，可以利用HTTP头部的cache-control设置文件的缓存形式，这样CDN就可以知道哪些资源可以保存，哪些不能，哪些需要保存多久等等。 分发内容的流程静态内容 源服务器将静态内容提前缓存到CDN 源服务器没有把静态内容提前备份给CDN，当用户访问时，CDN去源服务器索取对应的静态内容，之后再有用户请求， ...

HTTPS协议定义超文本传输安全协议（Hypertext Transfer Protocol Secure，简称：HTTPS）是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，利用SSL/TLS来加密数据包。HTTPS的主要目的是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。 HTTP协议采用明文传输信息，存在信息窃听、信息篡改和信息劫持的风险，而协议TLS/SSL具有身份验证、信息加密和完整性校验的功能，可以避免此类问题发生。 安全层的主要职责就是对发起的HTTP请求的数据进行加密操作 和 对接收到的HTTP的内容进行解密操作。 对称加密通信双方使用同样的加密和解密规则。 缺点：因为秘钥还是会通过网络传输的，如果有第三方知道加密的规则以后，会很容易被破解。 这就要用到非对称加密的方法。 非对称加密也叫公钥加密。通信双方使用两个密匙来进行加密和解密。 一个是私钥：仅仅是持有方才有的密钥，一般来说都放在服务器中，数据经过公钥加密就只能被私钥解密，数据经过私钥加密就只能被公钥解密 一个是公钥：是通信双方都拥有的密钥 应用到客 ...

虚拟DOM和diff算法前言 vdom是实现vue和React的重要基石 diff算法是vdom中最核心、最关键的部分 vdom就是创建js对象，用这个对象结构代表真实的dom结构。这个对象上通常含有标签名，标签上的属性，事件监听和子元素们，以及其他属性 例如： 用js模拟DOM结构： 为什么使用虚拟DOM，有什么好处DOM是很慢的。如果我们把一个简单的div元素的属性都打印出来，你会看到： 而这仅仅是第一层。真正的 DOM 元素非常庞大，这是因为标准就是这么设计的。而且操作它们的时候你要小心翼翼，轻微的触碰可能就会导致页面重排，这可是杀死性能的罪魁祸首。 相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来： 1234567891011var element = { tagName: 'ul', // 节点标签名 props: { // DOM的属性，用一个对象存储键值对 id: 'list&#x ...

new操作符实现原理new ：实例化一个对象，继承到构造函数的属性和方法 12345function Foo(e){ this.name = "dokidoki"; this.age = e; }console.log(new Foo(18)) 打印结果为： 前置知识：一篇文章看懂_proto_和prototype的关系及区别:https://www.jianshu.com/p/7d58f8f45557 prototype:显式原型链 每一个函数在创建之后都会自动拥有的属性，这个属性是一个指针，指向函数的原型对象；且只有函数才有 所以说 Person.prototype就是原型对象，也就是实例person1和person2的原型。 原型对象的好处是可以让所有对象实例共享它所包含的属性和方法 所以构造函数和原型之间的关系为： __proto__：隐式原型链 Foo.prototype –>{constructor: f Foo()} [[prototype]]私有属性，通过proto方法访问 实例的隐式原型指 ...

vuex实现组件全局状态（数据）管理的一种机制，方便实现组件之间的数据共享 父向子传值：v-bind 子向父传值：v-on 兄弟组件之间共享数据：EventBus $on接收数据的那个组件 $emit发送数据的那组件 好处： 集中管理共享数据，易于开发和后期维护 高效实现组件之间的数据共享，提高开发效率 vuex中的数据都是响应式的，能够实时保持数据与页面的同步 需要共享的数据，有必要存在vuex，一般情况，组件的私有数据，放入data中 核心概念State:提供唯一的公共数据源所有共享的数据都要统一放到Store的State中进行存储 第一种方法：this.$store.state.数值名称 1234567891011121314151617181920212223242526272829export default new Vuex.Store({ state: { count: 1 }, mutations: { }, actions: { }, modules: { ...