this揭秘

2021-01-28
阅读 7 分钟
1.7k
搞清楚this这种玄学的东西的机制,作用一自然是应付面试官,作用二就是可以维护别人的烂代码啦~1 前置知识1.1 对this的一个大误解很多人对this有一个潜意识里的误解——认为this的值取决于其所在函数是在哪里声明的 {代码...} 很多人在遇到上面这个面试题时,看到函数是在对象内部声明,都会误认为this指向obj1.2 函数名即...

ES6指北【7】——从回调地狱到Promise和async/await

2021-01-25
阅读 14 分钟
4k
1 同步和异步1.1 js同一时刻只能做一件事首先,我们需要理解js是个单线程语言,同一时刻只能做一件事。我们可以通过js执行和DOM渲染共用一个线程来理解这个原理:js修改dom的时候,浏览器不会对dom进行渲染,即dom渲染被阻塞而上面这种被阻塞的行为,我们称之为具有同步性1.2 同步与异步的概念同步英文:Synchronization...

移动端入门(响应式)

2020-10-14
阅读 2 分钟
1.5k
1.媒体查询1.1什么是媒体这个概念非常重要纸张,电脑,iPad,手机都是媒体,我们通过媒体查询可以获知用户在什么设备,从而写出针对性的css1.2具体用法基础用法 {代码...} 常见用法 —— 与link结合 {代码...} 请注意:样式文件依然会下载2.viewport2.1 980px的历史把一个pc端页面在手机端展示,如果宽度 <= 980,那么...

详解Vue的ref特性

2020-01-23
阅读 2 分钟
5.8k
一、ref:获取DOM结点ref的使用 {代码...} 如果在普通的 DOM 元素上使用,引用指向的就是DOM 元素如果用在子组件上,引用就指向组件实例深入理解$refs某组件的$refs含有该组件的所有ref,看下面的例子 {代码...} 从上图中我们很容易发现vm.$refs返回了一个对象,这个对象内有两个成员,包含了vm实例的所有refvm.$refs.p...

详解Vue的set方法

2020-01-21
阅读 3 分钟
12.3k
一、起源:若直接对data内的数组、对象进行修改,不会触发视图更新 Vue文档关于这一点解释的很明白,笔者不再赘述,各位一定要看完文档再来 数组更新监测对象更新监测 二、如何正确修改数组、对象以触发视图更新 2.1 数组 2.1.1 使用vue提供的变异方法 2.1.2 直接将data中的数组整个替换 如下例中,是要实现vm.items[1] ...

ES6指北【6】——详谈解构赋值【附赠练习题】

2018-08-28
阅读 3 分钟
4.2k
一、何谓解构赋值? 1. 基本概念 首先我们看一下MDN给的定义 解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组或属性从对象提取到不同的变量中 从定义中,我们可以发现:解构赋值的作用是对变量进行赋值主要通过两个方面实现这个作用 数组【将数组中的值赋给变量】 {代码...} 对象【将对象中属性的值赋给变...

ES6指北【5】——展开语法(spread syntax)

2018-08-20
阅读 3 分钟
4.3k
展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。(译者注: 字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)

ES6指北【4】——ES6的函数参数处理,超乎你想象

2018-08-14
阅读 3 分钟
5.1k
但这样做有个非常明显的缺陷如果x的值为null/+0或-0/NaN/''/false中的一个,x都会被设置为默认值,但我们的本意是在不传值的时候才设置为默认值

ES6指北【3】——5000字长文带你彻底搞懂ES6模块

2018-08-09
阅读 6 分钟
3.4k
如果把M4步枪看成是一个页面的话,那么我们可以做如下类比枪身 -> <main></main>消音器 -> <header></header>倍镜 -> <nav></nav>握把 -> <aside></aside>枪托 -> <footer></footer>

还在用锚点做页面内滚动?scrollIntoView让你一步到位!

2018-07-04
阅读 1 分钟
13.6k
前言 在处理页面内平滑滚动我们使用的方案无外乎以下几种 使用a标签的href属性 使用location.href 使用第三方库 关于1、2点,楼主写了一个例子[链接] 缺陷 如果我们使用a标签的href属性的话:其一是受限——只能在a标签上使用这一功能其二是a链接改变了url,这可能会给我们造成一些不必要的麻烦其三是没有动画效果(这点产...

使用vuex进行兄弟组件通信

2018-05-13
阅读 3 分钟
8k
使用vuex进行兄弟组件通信的核心思路就是将vuex作为一个store(vuex被设计的原因之一),将每个子组件的数据都存放进去,每个子组件都从vuex里获取数据,其实就是一句话——把vuex作为一个桥

浅析vue中的组件通信

2018-05-09
阅读 4 分钟
3.6k
为了方便展示,所有的组件都是以单文件组件的方式编写的1. 父组件对子组件通信在父组件内,在子组件上使用v-bind动态绑定attribute,在子组件内使用props传递attribute如下是父组件 {代码...} 如下是子组件 {代码...} 2.子组件对父组件通信子组件对父组件通信我们只能通过自定义事件去进行触发,而无法像父对子通信那样...

浅析Vue中computed与method的区别

2018-04-19
阅读 2 分钟
71.8k
其实官方文档对这个已经说的很清楚了,笔者不过是在其基础上进行归纳总结,各位看官还是先去读一下官方文档吧1.computed区别于method的两个核心在官方文档中,强调了computed区别于method最重要的两点computed是属性访问,而methods是函数调用computed带有缓存功能,而methods不是OK,下面我们看一个具体的例子 {代码......

前端工程师必须掌握的设计模式

2018-04-17
阅读 3 分钟
3.9k
构造函数模式 —— Constructor 构造函数相信大家都不会陌生在JS里,我们对构造函数使用new来新增实例 核心 1.将属性绑定到this上2.将方法绑定到prototype上3.使用new来新增实例【创建不同的引用类型】 案例 {代码...} 工厂模式 —— Factory 顾名思义,工厂模式就是像是工厂一样流水线般生产处一个个对象 核心 1.return一个...

备战面试/笔试 —— 前端程序员不可不知的HTTP知识

2018-03-29
阅读 5 分钟
3.7k
龚先生穿越到了异界,发现这个异界很奇怪,只能用飞鸽传信而且还有几个规定【协议】首先,有一个内容规定,规定每封信只能有四行字【这就是HTTP,至于具体哪四行,待会儿我们说】,但具体信是怎么传输过去的,HTTP不管所以又定一个传输规定,必须要用鸽子来送信,而且还必须要把信绑到鸽子的脚上【这个传输规定就是TCP】...

备战面试/笔试 —— String常见API总结

2018-03-23
阅读 3 分钟
2.3k
声明:1.较为复杂的API我会写一些代码示例,其余具体用法请自行查阅MDN2.字符串API一般不会改变原字符串3.注意有些API返回的是String,有些返回的是Boolean,有些返回的是Number,有些返回的是Array

从八道面试题看JavaScript DOM事件机制

2018-03-21
阅读 3 分钟
6.6k
As we all know,事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题 题目一到七,统一设置css {代码...} 题目一 {代码...} 请问:点击div.test1后,数字1和2,谁先被打印出来? 题目二 {代码...} 请问:点击div.test1后,数字1和2,谁先被打印出来? 题目三 {代码......

ES6指北【2】—— 箭头函数

2018-02-28
阅读 3 分钟
1.9k
划重点:把箭头函数里的this当做普通变量看待!!!!划重点:把箭头函数里的this当做普通变量看待!!!!划重点:把箭头函数里的this当做普通变量看待!!!!

深入浅出面向对象和原型【概念篇3】—— 原型链和继承

2018-02-26
阅读 5 分钟
2k
既然arr1是Array对象的实例,那么arr1自然可以通过其__proto__属性访问到其类Array的属性只要Array的prototype里有concat()这个方法,那么arr1自然能用

ES6指北【1】——let、const

2018-02-19
阅读 3 分钟
2.2k
1.如何学习ES61.1 js的学习顺序ES5 -> ES6 -> ES7 -> ES8 以此类推ES5没学好就别想学好ES61.2 边学边用学了就要用2.变量声明的方式 {代码...} 2.0 块级作用域 {}看mdn块级作用域更类似于一个局部作用域2.1 a = 1 会声明一个全局变量 吗? {代码...} 显然 当var声明了全局变量后,a = 1 是无法再声明全局变量的...

深入浅出面向对象和原型【番外篇——重新认识new】

2018-02-13
阅读 4 分钟
1.8k
我们在深入浅出面向对象和原型【概念篇2】在这篇文章中了解到了如何使用new Function解决重复创建浪费内存的问题,其中的关键就是new,那么这篇文章让我们来重新了解new的前世今生

深入浅出面向对象和原型【概念篇2】

2018-02-12
阅读 3 分钟
1.7k
墙裂建议您在看这篇文章之前阅读一遍我之前写的文章深入浅出面向对象和原型【概念篇1】,因为此篇文章涉及到不少相关概念都在上篇文章里啦 1.1 简单复习对象 对象是老生常谈的概念了,在这里我们来简单复习一下 {代码...} 对象是一个储存一系列无序 key: value【键值对】 的集合的容器 注意:核心是要将对象作为一个容器...

深入浅出面向对象和原型【概念篇1】

2018-02-11
阅读 2 分钟
1.6k
面向对象是一种思维方式[与语言无关],教你如何思考代码Object Oriented Programmingorient 的英文意思 是 使朝向那么,面向对象不如说成是以对象为目标的一种编程思维方式