Blog
Blog copied to clipboard
ljianshu
关注基础知识，打造优质前端博客，公众号[前端工匠]的作者
Bumps [http-proxy](https://github.com/http-party/node-http-proxy) from 1.18.0 to 1.18.1. Changelog Sourced from http-proxy's changelog. v1.18.1 - 2020-05-17 Merged Skip sending the proxyReq event when the expect header is present [#1447](https://github.com/http-party/node-http-proxy/issues/1447) Remove node6 support,...
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot] avatar"){kind=avatar}
## 前言 前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。 本文完整的源代码请猛戳[github博客](https://github.com/ljianshu/Blog) ## 一、什么是跨域？ ### 1.什么是同源策略及其限制内容？ 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。  **同源策略限制内容有：** - Cookie、LocalStorage、IndexedDB 等存储性内容 - DOM 节点 - AJAX 请求发送后，结果被浏览器拦截了 但是有三个标签是允许跨域加载资源： - `` - `` - `` ### 2.常见跨域场景 **当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域**。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示：...
 ## 一、JavaScript有几种类型的值？ Javascript有两种数据类型，分别是基本数据类型和引用数据类型。其中基本数据类型包括Undefined、Null、Boolean、Number、String、Symbol (ES6新增，表示独一无二的值)，而引用数据类型统称为Object对象，主要包括对象、数组和函数。接下来我们分别看下两者的特点。 ## 二、基本数据类型 ### 1.值是不可变的 ``` var name = 'java'; name.toUpperCase(); // 输出 'JAVA' console.log(name); // 输出 'java' ``` 由此可得，基本数据类型的值是不可改变的 ### 2.存放在栈区 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。 ### 3.值的比较 ```...
## 前言 HTTP/2 相比于 HTTP/1.1，可以说是大幅度提高了网页的性能，只需要升级到该协议就可以减少很多之前需要做的性能优化工作，当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。 虽然 HTTP/2 提高了网页的性能，但是并不代表它已经是完美的了，HTTP/3 就是为了解决 HTTP/2 所存在的一些问题而被推出来的。 ## 一、HTTP/1.1发明以来发生了哪些变化？ 如果仔细观察打开那些最流行的网站首页所需要下载的资源的话，会发现一个非常明显的趋势。 近年来加载网站首页需要的下载的数据量在逐渐增加，并已经超过了2100K。但在这里我们更应该关心的是：平均每个页面为了完成显示与渲染所需要下载的资源数已经超过了100个。 正如下图所示，从2011年以来,传输数据大小与平均请求资源数量不断持续增长，并没有减缓的迹象。该图表中绿色直线展示了传输数据大小的增长，红色直线展示了平均请求资源数量的增长。  HTTP/1.1自从1997年发布以来，我们已经使用HTTP/1.x 相当长一段时间了，但是随着近十年互联网的爆炸式发展，从当初网页内容以文本为主,到现在以富媒体（如图片、声音、视频）为主,而且对页面内容实时性高要求的应用越来越多(比如聊天、视频直播),于是当时协议规定的某些特性，已经无法满足现代网络的需求了。 ## 二、HTTP/1.1的缺陷 ### 1.高延迟--带来页面加载速度的降低 虽然近几年来网络带宽增长非常快，然而我们却并没有看到网络延迟有对应程度的降低。**网络延迟问题主要由于队头阻塞(Head-Of-Line Blocking),导致带宽无法被充分利用**。  队头阻塞是指当顺序发送的请求序列中的一个请求因为某种原因被阻塞时，在后面排队的所有请求也一并被阻塞，会导致客户端迟迟收不到数据。针对队头阻塞,人们尝试过以下办法来解决: - 将同一页面的资源分散到不同域名下，提升连接上限。 **Chrome有个机制，对于同一个域名，默认允许同时建立...
## 前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：  如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、`$emit`/`$on`、vuex、`$parent` / `$children`、`$attrs`/`$listeners`和provide/inject，以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。 本文的代码请猛戳[github博客](https://github.com/ljianshu/Blog/tree/master/vue2.0%E5%AD%A6%E4%B9%A0)，纸上得来终觉浅，大家动手多敲敲代码！ ## 方法一、`props`/`$emit` 父组件A通过props的方式向子组件B传递，B to A 通过在 B...
## 一、前言 响应式 Web 设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。 ## 二、视口 **移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下**。手机端与 PC 端视口存在差异，电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android 基本都将这个视口分辨率设置为 980px。 #### 1.为什么手机端视口要设为 980px? 当年乔布斯设想：苹果手机如果在市场上火爆了，但是各个网站还没有来得及制作手机端网页，那么用户不得不用手机访问电脑版的网页，**如何用小屏幕访问大屏幕的页面也同样可读呢**？乔帮主就想着为手机固定一个视口宽度，让手机的视口宽度等于世界上绝大多数 PC 网页的版心宽度，就是 980px。这样，用手机访问电脑版网页的时候，旁边刚好没有留白。不过页面缩放后文字会变得非常小，用户需要手动放大缩小才能看清楚，体验非常差。  #### 2.约束视口 为了解决前面的问题，可以在网页的中添加下面这行代码： ``` ``` ``` width=device-width ...
原型与原型链详解
## 前言 与大部分面向对象语言不同，ES6之前并没有引入类（class）的概念，JavaScript并非通过类而是直接通过构造函数来创建实例。在介绍原型和原型链之前，我们有必要先复习一下构造函数的知识。 ## 一、构造函数 **构造函数模式的目的就是为了创建一个自定义类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别。** 构造函数就是一个普通的函数，创建方式和普通函数没有区别，**不同的是构造函数习惯上首字母大写**。另外就是调用方式的不同，普通函数是直接调用，**而构造函数需要使用new关键字来调用**。 ``` function Person(name, age, gender) { this.name = name this.age = age this.gender = gender this.sayName = function () { alert(this.name); } }...
## 一、前言 this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。对于那些没有投入时间学习this机制的JavaScript开发者来说，this的绑定一直是一件非常令人困惑的事。  ## 二、了解this **学习this的第一步是明白this既不指向函数自身也不指向函数的词法作用域**，你也许被这样的解释误导过，但其实它们都是错误的。随着函数使用场合的不同，this的值会发生变化。但总有一条原则就是**JS中的this代表的是当前行为执行的主体**，在JS中主要研究的都是函数中的this，但并不是说只有在函数里才有this，**this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用**。如何的区分this呢？ ## 三、this到底是谁 这要分情况讨论，常见有五种情况： ### 1、函数执行时首先看函数名前面是否有"."，有的话，"."前面是谁,this就是谁；没有的话this就是window ``` function fn(){ console.log(this); } var obj={fn:fn}; fn();//this->window obj.fn();//this->obj function sum(){ fn();//this->window } sum(); var oo={ sum:function(){ console.log(this);//this->oo...
## 一、引子 闭包（closure）是 Javascript 语言的一个难点，面试时常被问及，也是它的特色，很多高级应用都要依靠闭包实现。本文尽可能用简单易懂的话，讲清楚闭包的概念、形成条件及其常见的面试题。  我们先来看一个例子： ``` var n = 999; function f1() { console.log(n); } f1() // 999 ``` 上面代码中，函数f1可以读取全局变量n。但是，函数外部无法读取函数内部声明的变量。 ``` function f1() { var n = 999;...
## 前言 如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是JavaScript难点之一。 理解执行上下文和执行栈同样有助于理解其他的 JavaScript 概念如提升机制、作用域和闭包等。本文尽可能用通俗易懂的方式来介绍这些概念。 ## 一、执行上下文（Execution Context） ### 1.什么是执行上下文 简而言之，执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念， JavaScript 中运行任何的代码都是在执行上下文中运行 ### 2.执行上下文的类型 执行上下文总共有三种类型： - 全局执行上下文： 这是默认的、最基础的执行上下文。不在任何函数中的代码都位于全局执行上下文中。它做了两件事：1. 创建一个全局对象，在浏览器中这个全局对象就是 window...