格子熊

前端性能优化一直是前端工作中必不可少的一部分，但是我们如何知道哪些部分的性能有优化的空间呢？此时，Chrome 性能监测就派上用场了。 正所谓：知己知彼，百战百胜，只有确定了性能瓶颈，才能有条不紊地进行前端性能优化工作。 ### Performance Performance 是 Chrome 开发者工具中的一个功能，用于记录网页从初始化到运行时的所有性能指标。 使用 Performance 之前，我们需要先打开 Chrome 的无痕模式，因为，身为开发者，Chrome 上一般都有着大量的 Chrome 插件，而 Chrome 插件会显著影响页面的性能。所以，我们需要进入无痕模式来规避 Chrome 插件对页面性能的影响。 进入无痕模式后，我们打开需要进行性能监测的网站，开启 Chrome 开发者工具，点击 Performance 选项卡，进入面板。此时的面板什么都没有，只有几个操作提示。 接下来，我们点击左上角的 Record（小圆点）按钮，Performance 进入 Record...

## 前言 如果统计一番前端最常用的方法，那么 console.log 一定位列其中。无论你写的是原生 JS 亦或者是 JQuery、Vue等等，调试之时，都离不开 console.log 方法。但是，console 对象中的方法不仅仅只有 log 方法。强大的 console 对象提供了大量控制台调试的相关方法，掌握这些方法可以大大方便你的调试，甚至做出一些炫酷的控制台字符画。 ## 基本输出 console 对象最基础的方法毫无疑问是 log，该方法会直接在控制台上输出参数，如果输入多个参数，那么输出在控制台上的参数用空格分隔，如下所示： ```js console.log('Hello World'); console.log('Hello', 'World'); ``` 打开控制台，运行结果如下图所示：  console.log 还含有类似于...

> 原文地址：https://medium.com/javascript-scene/rethinking-unit-test-assertions-55f59358253f > > 作者：[Eric Elliott](https://medium.com/@_ericelliott?source=post_header_lockup) > 「断言」是编程术语，表示为一些布尔表达式，程序员相信在程序中的某个特定点该表达式值为真，可以在任何时候启用和禁用断言验证，因此可以在测试时启用断言而在部署时禁用断言。同样，程序投入运行后，最终用户在遇到问题时可以重新启用断言。 每当测试失败的时候，靠谱的自动化测试总能生成一份优秀的错误报告（bug report），但是很少有开发者花时间去思考一个好的错误报告需要哪些信息。 在此之前，我已经详细地叙述过 [每个单元测试必须回答的 5 个问题](https://medium.com/javascript-scene/what-every-unit-test-needs-f6cd34d9836d) ，所以这次我们将它们一笔带过。 1. **被测单元是什么（模块，函数，类，等等）？** 2. 它将做什么？ 3. 实际输出是什么？ 4. 期望的输出是什么？ 5. 如何将失败重现？ 许多测试框架允许你忽略这些问题中的一个或者多个，这会导致错误报告并不实用。 让我们看一下使用一个虚拟测试框架的示例，该框架提供常用的 `pass()` 以及 `fail()`...

## class 的前世今生 在 es6 之前，虽然 JS 和 Java 同样都是 OOP （面向对象）语言，但是在 JS 中，只有对象而没有类的概念。 在 JS 中，生成实例对象的传统方法是通过构造函数，如下所示： ```js function A (x) { this.x = x } // 在原型链上挂载原型方法 A.prototype.showX =...

### 力有不逮的对象 众所周知，在 `Vue` 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变。 这是什么原因？ 原因在于： `Vue` 的响应式系统是基于`Object.defineProperty`这个方法的，该方法可以监听对象中某个元素的获取或修改，经过了该方法处理的数据，我们称其为响应式数据。但是，该方法有一个很大的缺点，新增属性或者删除属性不会触发监听，举个栗子： ```js var vm = new Vue({ data () { return { obj: { a: 1 } } } }) // `vm.obj.a`...

### 前言 nextTick是Vue的一个核心功能，在Vue内部实现中也经常用到nextTick。但是，很多新手不理解nextTick的原理，甚至不清楚nextTick的作用。 那么，我们就先来看看nextTick是什么。 ### nextTick功能 看看官方文档的描述： 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 再看看官方示例： // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.nextTick(function () { // DOM 更新了 }) // 作为一个 Promise...

### 简介 History对象最初设计用来表示窗口的浏览历史，但是，出于隐私方面的原因，History对象不再允许脚本访问已经访问过的实际URL。虽然，我们不清楚历史URL，但是，我们可以通过History对象的内置属性方法进行跳转。 ### 对象属性 #### length 该属性代表着浏览器历史列表中的URL数量。初始值为1，如果当前窗口先后访问了两个网址，那该属性的值变为2。 ```js history.length // 1 // 访问了一个新的URL history.length // 2 ``` #### state HTML5新增属性，返回一个表示历史堆栈顶部的状态的值，这是一种可以不必等待`popstate` 事件而查看状态的方式。 #### scrollRestoration 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。 ### 对象方法 #### go方法 `go`方法是History对象三个方法中的核心方法，通过`go`方法可以完美替代其他的两个方法。该方法接收一个可选参数，这个参数可以是`number`也可以是`URL`。...

# 浅谈小程序中的请求封装 近两个月学习了小程序的开发，并且撸了一个不大不小的demo，算是正式入门了小程序，在此想分享下小程序的开发经验。 ### 前言 在小程序的开发中，或者说在整个前端开发中，请求都是绕不过去的一道坎。在Vue开发中，我们可以采用 [axios](https://www.npmjs.com/package/axios) 这个成熟的插件来进行HTTP请求。但是，遗憾的是，到目前为止，小程序没有一个比较好用的插件来进行HTTP请求。此时，我们需要对小程序的HTTP请求进行封装，以方便我们后续开发。 ### 浅析wx.request 众所周知，在小程序中，我们通过 `wx.request` 方法来进行HTTP请求（或者说是HTTPS请求）。 通过 [官方文档](https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html) 我们可以知道， `wx.request` 方法接收一个对象，对象可以有9个属性：`url`，`data`，`header`，`method`，`dataType`，`responseType`，`success`，`fail`，`complete`。除了`url`是必填的以外，其余都是可选项。在这些属性里面，最常用的是 `method`，`data`，`header`，`success`以及`fail`这几个属性。毕竟我们总要设置请求方法、请求数据、请求头以及请求成功或失败的处理方法是不是？ 所以接下来我们的目标我们已经明确，就是对这些常用属性进行封装。 ### 封装HTTP类 对于HTTP请求的封装，有很多种方法，比如：axios 采用的是通过IIFE作为工厂函数处理并返回一个Axios的实例。在这里，我推荐使用类，因为类的封装形式，正是axios 的封装形式的加强版。 为了一致性，我也采用request作为请求的方法名，并且接受相同的对象作为参数。此时，我们已经可以实现出以下代码： ```js class HTTP {...

## 浅谈CORS CORS全称“跨站资源共享”（Cross-Origin Resource Sharing），它允许浏览器克服浏览器同源策略向跨域服务器发出请求。 ### 同源策略 #### 概念 说到CORS，那么就不得不提浏览器同源策略，所谓“同源”，是指服务器URL的三个相同： 1.协议相同 2.域名相同 3.端口相同 举个栗子：比如一个URL是`http://www.example.com:80/a.html`，那么： ```js http://www.example.com:80/b.html // 同源 https://www.example.com:80/a.html // 非同源(协议不同) http://www.example1.com:80/a.html // 非同源(域名不同) http://www.example.com:81/a.html // 非同源(端口不同) ``` #### 限制...

### 何为scoped？ 在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。 ### scoped的实现原理 vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码： ```vue .example { color: red; } hi ``` 转译后： ```vue .example[data-v-5558831a] { color: red; } hi ``` 即：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。 ### 为什么需要穿透scoped？ scoped看起来很美，但是，在很多项目中，会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。 ```vue 外层 >>>...