http缓存概念http缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源（是否使用缓存还需其他策略进行验证）。 常见的http缓存只能缓存get请求响应的资源，对于其他类型的响应则无能为力，所以后续说的请求缓存都是指GET请求。 http缓存都是从第二次请求开始的。第一次请求资源时，服务器返回资源，并在respone header头中回传资源的缓存参数；第二次请求时，浏览器判断这些请...
经典1-在浏览器地址栏输入URL后回车，背后所经历的步骤
在浏览器地址栏输入URL后回车，背后所经历的步骤浏览器层面0、URL解析现在几乎所有浏览器都实现了地址栏快捷搜索的功能，所以这里需要判断用户输入的到底是关键词还是地址，然后进行不同的操作。 关键字使用浏览器内置的搜索引擎地址与关键词来拼接得到最终的URL。 URL对URL进行补全，编码转换等工作。 例如：用户在输入URL时，一般都不会携带协议与端口。当用户输入baidu.com的时候，浏览器会将其补全为： https://baidu.com:80。 chrome默认是补全https协议 其...
设计模式5-发布-订阅模式（观察者模式）
发布-订阅模式（观察者模式）定义其定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变的时候，所有依赖它的对象都会得到通知。 主要解决一个对象状态改变给其他对象通知的问题，而且要考虑到易用和低耦合，保证高度的协作。 在JavaScript中，其主要有以下两个用处： 可以广泛应用于异步编程之中，这是一种代替回调函数的方案。 发布-订阅模式可以取代对象之间的硬编码通知机制，一个对象不用再显示地调用另外一个对象的某个接口。 实现在web开发中，我们其实已经用到了发布-订阅模式，其就是...
设计模式4-迭代器模式
迭代器模式定义迭代器模式是指提供一种方法顺序访问一个集合对象中的各个元素，而不需要暴露该对象的内部表示。 遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。 主要解决不需要关心对象内部表示来遍历整个对象。 内部迭代器内部迭代器是指事先定义好迭代器的迭代规则，他完全接受整个迭代过程，外部只需要一次初始调用。 实现我们实现一个each内部迭代器，接...
设计模式3-代理模式
代理模式定义当目标对象不方便直接访问或者访问者不满足要求的时候，提供一个代理对象来控制对目标对象的访问。访问者实际上访问的是代理对象。代理对象对请求做出一些处理之后，再把请求转交给目标对象。 主要解决在直接访问对象时带来的问题，比如说：要访问的对象在远程的机器上。在面向对象系统中，有些对象由于某些原因（比如对象创建开销很大，或者某些操作需要安全控制，或者需要进程外的访问），直接访问会给使用者或者系统结构带来很多麻烦，我们可以在访问此对象时加上一个对此对象的访问层。 优缺点优点 职责清晰。 ...
设计模式2-策略模式
策略模式定义定义一系列的算法，把它们一个个封装起来，并且使他们可以相互替换。 主要解决在多种算法相似的情况下，使用 if…else 所带来的复杂和难以维护的问题。 奖金的例子很多公司的年终奖的是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为S的员工年终奖有4倍工资，绩效为A的员工年终奖有3倍工资，绩效为B的员工年终奖有2倍工资。假如需要一段代码来计算对应员工的年终奖。 最基础写法我们直观想到的就是用if...else或者switch...case的方法来写。如下 123456789...
设计模式1-单例模式
设计模式最近在写Vue插件，发现自己通过直观想法写的东西总是与别人的插件有一定的差距。我也明白别人的库中用了一种或多种设计模式，使代码结构更加恰当等等。之前就说要学习一下设计模式，被搁置到现在，现在买了《JavaScript设计模式与开发实践》，后面会陆续将自己的学习过程通过博客记录。 单例模式定义保证一个类仅有一个实例，并提供一个访问它的全局访问点。 描述单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏览器中的window对象。 实现传统单例模式JavaS...
JavaScript中的模块导入导出
模块的概念 （Modular design） 所谓的模块化设计，简单地说就是将产品的某些要素组合在一起，构成一个具有特定功能的子系统，将这个子系统作为通用性的模块与其他产品要素进行多种组合，构成新的系统，产生多种不同功能或相同功能、不同性能的系列产品。 这是在整个设计行业对模块化的定义。对于编程语言中的模块化设计，其基本思路就是将有相同功能的部分代码封装在一起，形成一个通用的，可复用的模块，使之在其它系统中可以重复利用，并不会对模块内部产生影响。所以设计模式中模块化设计的三大特征也要遵循...
Fetch方法的使用
介绍Fetch是基于Promise开发的用于访问和操纵 HTTP 管道的一个API。其提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。 以前浏览器中的网络请求只能通过XMLHttpRequest实现（虽然大多使用的是封装过后的接口）。而Fetch则结合Promise提供了一种更加简化的发送网络请求的方式（其调用方法与axiso相似）。 用法Fetch()方法Fetch接受两个参数： Promise<Response> fetch(inp...