2020年07月_leelxp

原创函数式编程：初识函数式编程

我们在经历了面向对象编程、面向过程编程之后，函数式编程又进入了我们的视线。其实，函数式编程并不是一个什么新鲜的东西。它早在上世纪50年代，随着 Lisp 语言的创建，就已经诞生。而近些年，随着react hooks的发布，函数式编程以其优雅，简单的特点再次出现在大众的视线中。函数式编程这种古老的编程范式并没有随着岁月而褪去其光彩，反而愈加生机勃勃。什么是函数式编程？关于函数式编程，维基百科是这样说的：函数式编程是一种编程范畴。他将电脑运算视为数学上的函数计算，并且避免使用程序状态以及易变对象。函数编

2020-07-21 18:34:47 194

原创 CSS基础之BFC布局

CSS布局中BFC是面试中常被问到的问题，那么我们就来总结一下的相关知识点。BFC的全名叫block formatting context,是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。没看懂什么意思。应该是这样：BFC的布局是一个独立的布局，和BFC之外的布局是互不印象的； BFC布局是可以通过一些条件触发的，从而实现布局上的需求或解决一些问题； BFC其实就是一个工具，理解功能和特性就OK。BFC触发的条件？根元素（<h.

2020-07-27 15:35:22 3847

原创 React解密：React Fiber如何让用户体验更流畅

随着react 16.8+版本的发布，react fiber也搭这react的顺风车一起发布。react fiber虽然说并不是革命性的一次更新，但是也确实比之前提升了不少，所以接下来，我们就了解一下react fiber是什么。官方说：React Fiber是对核心算法的一次重新实现。fiber是什么？讲react fiber之前，还是要先讲讲fiber是什么。react fiber和fiber其实是不一样的，fiber是另有出处。我们对计算机的进程和线程其实并不陌生。那么这个fiber又叫纤程(

2020-07-27 14:08:13 380 4

原创 React解密：React Hooks详情初次探索

随着React 16.8+ 版本的发布，react也迎来了重大的变革，其中react hooks更是react新版本的一大革命性的变化，也是被众多开发者所青睐。那么react hooks 到底是何方神圣，我们来揭开react hooks的神秘面纱。react hooks是什么？在react中,凡是use-开头的react api都是hooks函数。当前比较火热的函数式编程就是react的推崇的，react提倡写函数式组件。但是函数式组件不能使用生命周期函数，没有属于自己的state,这又不得不使得开

2020-07-23 18:09:33 327

原创前端主流技术栈：vue和react、angular的区别是什么

前端技术发展很快，近几年出现了很多前端技术栈，但是主流技术栈，还是以react、vue、angular为主。各有各自的优势，又有自己的不同，我们就来对比一下这三大技术栈。 react vue angular 历史由facebook团队发布并且维护当前已经更新到16.8或者更新版本，与之前版本有来较大的区别，增加了新的功能，但是开发者无感知。react被描述为是一个构建用户界面的javascript库。被一些大公司所青睐，例如：arbin等由尤雨溪团队维护。当前vu.

2020-07-21 15:36:34 1825

原创 vue源码解析：vue自定义指令的来龙去脉

我们之前说过，vue除了其内置的一些指令外，还允许自定义一些指令，自定义指令调用Vue.directive方法即可。并且被保存在vue.options中或者是组件的vm.$options中。无论是那种定义方式，都会被保存在特定的地方。那么这些自定义指令是如何生效的呢？这将是我们的重点。何时生效我们知道指令是被作为标签的属性写在模版HTML中的。所以，指令的生效必然是会在模版编译的阶段。其实，在虚拟dom渲染更新的时候，他在执行相关操作的同时，还会在每个阶段触发相应的钩子函数。下面就是虚拟dom在渲染

2020-07-20 17:15:42 509

原创 vue源码解析：vue内置组件keep-alive的实现原理

我们知道，keep-alive是vue中抽象的内置的组件，它自身不会渲染一个DOM元素，也不会出现在父组件链中。当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。也就是说把一些不常变动的组件或者需要缓存的组件用<keep-alive>包裹起来，这样<keep-alive>就会帮我们把组件保存在内存中，而不是直接的销毁，这样做可以保留组件的状态或避免多次重新渲染，以提高页面性能。举个例子来说，当我们在切换一个页签的时候，希望切换的内容不会发生变化，这也就是意味着组件并..

2020-07-19 19:00:59 1093

原创 vue源码解析：vue过滤器的点点滴滴

vue的过滤器我们并不陌生，是vue开发中最为常见的工具之一。它经常会被用来格式化模板中的文本。过滤器可以单个使用，也可以多个串联一起使用，还可以传参数使用。现在我们来谈谈vue过滤器的实现原理。用法：在双花括号插值中和在 v-bind 表达式中(后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“|”符号指示。{{ message | capitalize }}<!-- 在 `v-bind` 中.

2020-07-18 23:18:45 283

原创 vue源码解析：vue全局方法之Vue.directive、Vue.filter、Vue.component实现原理

之所以将directive、filter、component三个方法放到一起，是因为这三个方法实现的原理是一模一样的，在vue的源码中，也是一起实现的。Vue.directive( id, [definition] )Vue.component( id, [definition] )Vue.filter( id, [definition] )参数：{string} id {Function} [definition]作用：注册或者获取全局的指令、组件、过滤器。原理：src.

2020-07-17 20:04:34 660

原创 vue源码解析：vue全局方法之Vue.use实现原理

讲到vue的use方法这是我们再熟悉不过的了，当我们安装一些插件的时候，我们总要在vue的mine.js文件中使用Vue.use()方法。这就是use的常规操作。那么Vue.use()方法的实现原理是什么呢？Vue.use( plugin )参数：{Object | Function} plugin作用：该方法是用来安装vue插件，该方法内部会调用插件提供的install方法，并将vue实例传install方法。但是我们知道，同一个插件只会在项目中安装一次，所以，其内部还有的作用就是..

2020-07-17 17:44:58 1414

原创 vue源码解析：vue全局方法之Vue.mixin实现原理

提到vue全局方法mixin，可能我们比较陌生，因为在平时的开发中也不建议我们去使用他。但是我们还是有必要了解一下其实现的原理。Vue.mixin( mixin )参数：{Object} mixin作用：全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。原理：src/core/global-api/mixin.jsVue.mixin = function (mixin: Object) {

2020-07-17 17:09:00 665

原创 vue源码解析：vue全局方法之Vue.extend实现原理

学习vue不得不学习vue实例上得方法，extend是一个组件继承vue实例得函数，我们就来看看Vue.extend函数得实现原理是什么？用法：Vue.extend( options )参数：{Object} options作用：使用基础Vue构造器，创建一个“子类”。参数是一个包含组件选项的对象。data选项是特例，需要注意 - 在Vue.extend()中它必须是函数。<div id="mount-point"></div>// ...

2020-07-17 16:12:01 2132 1

原创 vue源码解析：vue全局方法之Vue.version实现原理

Vue.version看到这几个子就能明白，这个方法是干什么用的，对，你想的没有错，他就是让你获取当前使用的vue版本号，在平时的开放中我们几乎不会用到这个方法。那么vue为什么还要设计这个方法呢？那就是因为，在我们去npm等寻找安装的一些依赖包的时候，需要知道支持的vue版本是什么，所以这个时候就会用到version的方法，其原理就是读取package.json中的version字段。用法：var version = Number(Vue.version.split('.')[0])if (

2020-07-17 11:07:31 1130

原创 vue源码解析：vue实例方法watch方法的实现原理

vue实例方法用来监听vue实例变化的方法，我们自然会想到使用watch方法，那么watch方法如何实现呢？vm.$watch( expOrFn, callback, [options] )参数：{string | Function} expOrFn {Function | Object} callback {Object} [options] {boolean} deep {boolean} immediate 返回值：{Function} unwatch用法：观察V.

2020-07-16 15:16:35 600

原创 vue源码解析：vue实例方法delete方法的实现原理

vue的响应式中，Object.defineProperty()并不能观测到对象属性的删除，所以，作者在vue的实例上添加了一个delete方法。那么就来讲讲delete方法的实现原理：vm.$delete( target, propertyName/index )参数：{Object | Array} target {string | number} propertyName/index用法：删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开Vue不..

2020-07-15 20:30:31 1385

原创 vue源码解析：vue实例方法之set方法的实现原理

还记得，我们在将vue响应式原理的时候说过，Object.defineProperty()这个方法对对象的属性方法的添加或者删除不能做到实时的监听，数组通过索引去修改数组都是不能被检测？所以vue实现了set方法，那么实现的set方法的原理是什么呢？vm.$set( target, propertyName/index, value )参数：{Object | Array} target {string | number} propertyName/index {any} value用

2020-07-15 19:02:19 4028

原创 Vue3.0源码解析：Vue3.0的重大变革

从vue.js到vue2.x最大的变革是就是引入了虚拟dom的概念，一路走来vue也算是在艰难中前行，vue3.0正向前端开发者阔步走来。那么vue3.0又将带来哪些重大变革呢？源码优化1. 更好的代码管理方式：monorepo首先，源码的优化体现在代码管理方式上。Vue.js 2.x 的源码托管在 src 目录，然后依据功能拆分出了 compiler（模板编译的相关代码）、core（与平台无关的通用运行时代码）、platforms（平台专有代码）、server（服务端渲染的相关代码）、sf

2020-07-13 18:04:22 1906 1

原创 vue源码解析：vue事件方法之$once方法的实现原理

vue中事件方法一共就四个，挂载在vue实例上的$once用来监听某个自定义事件，通常会用到，那么$once的内部实现原理是什么呢？下面我们来详细说下$once:参数：{string} event {Function} callback作用：监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。原理：Vue.prototype.$once = function (event, fn) { const vm: Component = this funct

2020-07-13 11:11:13 3251 1

原创 vue源码解析：vue事件方法之$off方法的实现原理

vue中事件方法一共就四个，挂载在vue实例上的$off移除事件中心里面某个事件的回调函数，通常会用到，那么$off的内部实现原理是什么呢？下面我们来详细说下$off:vm.$off( [event, callback] )参数：{string | Array<string>} event(只在 2.2.2+ 支持数组) {Function} [callback]作用：移除自定义事件监听器。如果没有提供参数，则移除所有的事件监听器；如果只提供了事件，则移除该事件..

2020-07-12 23:41:02 4095

原创 vue源码解析：vue事件方法之$on方法的实现原理

vue中事件方法一共就四个，挂载在vue实例上的$on用来监听自定义事件时，通常会用到，那么$on的内部实现原理是什么呢？下面我们来详细说下$on:vm.$on( event, callback )参数：{string | Array<string>} event(数组只在 2.2.0+ 中支持) {Function} callback作用：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。事例：vm.$o.

2020-07-12 23:28:51 6903 1

原创 vue源码解析：vue事件方法之$emit方法的实现原理

vue中事件方法一共就四个，挂载在vue实例上的$emit在我们做子组件向父组件传值时，通常会用到，那么$emit的内部实现原理是什么呢？下面我们来详细说下$emit:vm.$emit( eventName, […args] )参数： {string} eventName 触发的事件名 [...args] 传递给事件的参数作用：触发当前实例上的事件。附加参数都会传给监听器回调。内部原理：$emit也是采用了发布订阅者设计模式。Vue.prototype.$emit .

2020-07-12 23:01:55 7897 1

原创 vue源码解析：vue生命周期方法$mount方法的实现原理

在vue的内部封装了大量的api和方法供开发者调用，nextTick方法是其中之一：用法：vm.$mount( [elementOrSelector] )参数：{Element | string} [elementOrSelector] {boolean} [hydrating]作用：如果Vue实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用vm.$mount()手动地挂载一个未挂载的实例。如果没有提供elementO...

2020-07-12 15:52:34 595

原创 vue源码解析：vue生命周期方法$forceUpdate方法的实现原理

在vue的内部封装了大量的api和方法供开发者调用，$forceUpdate方法是其中之一：用法：vm.$forceUpdate()作用：迫使Vue实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。内部原理：Vue.prototype.$forceUpdate = function () { const vm: Component = this if (vm._watcher) { vm._watcher.upda..

2020-07-12 15:07:53 2216

原创 vue源码解析：vue生命周期方法$destory方法的实现原理

我们知道vue生命周期的最后一个阶段是销毁阶段，那么vue会调用自己的destory函数，那么$destory函数的实现原理是什么？且往下看。用法：vm.$destroy()作用：完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。触发beforeDestroy和destroyed的钩子。源码：Vue.prototype.$destroy = function () { const vm: Component = this if (vm._is...

2020-07-12 00:24:31 7996

原创 javascript基础之bind、call、apply方法的区别以及如何手动实现

改变this的指向可以用bind，call，apply方法，那这三个方法有什么区别呢？又如何手动实现这三个方法呢？且往下看：1、bind、call、apply的区别是什么？bind被称为是绑定函数，其函数内部的this指向创建它时传入bind的第一个参数，而传入bind的第二个以及后面的参数则作为原来函数的参数调用原函数，另外bind不会立即执行，而是返回了一个新的函数。call和apply都是为了改变函数内部的运行上下文，apply和call的调用返回函数执行结果。调用call或apply方法

2020-07-10 18:16:38 122

原创 vue源码解析：vue生命周期方法$nextTick方法的实现原理

在vue的内部封装了大量的api和方法供开发者调用，nextTick方法是其中之一：用法：vm.$nextTick( [callback] )参数：{Function} [callback]作用：将回掉延迟到下一次dom更新循环之后执行，在修改数据之后立即使用它，然后等待 DOM 更新。如何理解这句话呢？先看个例子：<template> <div id="example">{{message}}</div></template.

2020-07-10 15:39:35 584

原创 JavaScript基础之箭头函数与普通function函数的区别

声明函数方式有多种，但是当前比较关心的是ES5和ES6的俩种类型，也就是function类型的函数和箭头函数：// ES5的函数function fun () {}// ES6() => {}函数的定义就是这俩中方式，今天我们不讲别的，只讲讲他们的区别是什么？（1）箭头函数不能作为构造函数,不能使用new关键字（2）this的指向不同ES5函数的this取决于谁调用，那么this就指向谁；ES6箭头函数本身没有this，箭头函数的内部this，指向了其外

2020-07-08 16:29:32 1165

原创 Vue源码解析：Vue生命周期之从生到死（五）

讲过了生命周期的初始化阶段（出生阶段）,现在也是该走向成长了，也就是vue该进入到下一个阶段——模版编译阶段，也就是这个时候要调用vm.$mount()函数了，这个函数的调用标志着初始化的结束，下一个阶段的开始。所以，我们来讲讲vue的模版编译，其实，vue存在俩个版本，完整版和运行时版本，其区别就是有没有模版编译这一部分内容，完整版本是包含了模版编译这一部分。完整版本：vue完整版本包含了编译器，会根据template模版编译生成渲染函数的代码,源码中就是render函数。运行时版本.

2020-07-08 14:41:08 166

原创 Vue源码解析：Vue生命周期之从生到死（四）

之前讲到实例的事件初始化，inject等的初始化，那么接下来，我们就说说，state的初始化，也就是我们平时的state,props，methods等等的初始化。接下来就讲讲initState这个函数。// src/core/instance/state.jsexport function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(

2020-07-06 20:07:01 1238

原创 Vue源码解析：Vue生命周期之从生到死（三）

上俩片文章我们讲到了initLifecycle和initEvents函数，本篇是时候讲讲initInjections初始化函数了。该函数就是用来去实例化inject选项。说到inject,那就必然离不开provide,这俩是成对出现的，它们的作用是：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。provide：是一个对象，或者是一个返回对象的函数。inject:是一个字符串数组，或者是一个多层对象。这俩个东西，在组件中用的比较多。总结来说

2020-07-06 11:17:55 1866

原创 JavaScript基础之this到底指向哪里

this的指向问题一直以来都是前端开发者找工作面试的重点，现在就聊聊这个this到底是何方神圣？ECMAScript中这样写到：this关键字执行为当前执行环境的thisBinding.MDN这样写到：绝大多数中，函数的调用决定了this的指向。简单来说，this的指向是由于调用时候决定的，this具有运行期绑定的特性。全局执行上下文：在全局执行上下文中，this的指向为windowconsole.log(this === window) // true在浏览器里面

2020-07-04 22:17:26 3566

原创 JavaScript基础之浏览器地址栏输入URL会发生什么

当我们在浏览器的地址栏输入一个地址后，接下来到底会发生什么呢？当你在浏览器中输入一个地址的时候，浏览器会从浏览历史记录，或者书签等地方模糊匹配出你想要的地址，提示补全url，对于Chrome来说，可以做到你想搜索的网页已经呈现出来。这个时候，其实还没有按下回车或者是搜索按钮。那么当一旦按下回车或者是搜索键后会发生什么呢？首先，浏览器会将输入的地址解析成对应的IP因为浏览器一般都会有2-30分钟左右的dns缓存，所以首先回去缓存中去查找对应的IP,如果有，则返回IP; dns中没有查找到IP,那

2020-07-04 15:18:42 5420

原创 JavaScript基础之事件冒泡、事件捕获、事件委托(事件代理)、事件绑定

JavaScript基础之事件冒泡、事件捕获、事件委托、事件绑定可以说是JavaScript基础中最为重要的知识点。下面就来介绍一下相关知识。我们知道，在dom模型中，html是多层次的，当一个html元素上产生事件时，该事件会在dom树元素节点之间按照特定的顺序去传播。传播路径的每一个节点，都会收到这个事件，这就是dom事件流。当事件发生后，就会从内向外逐级传播，因为事件流本身没有处理事件的能力，所以，处理事件的函数并不会绑定在该事件源上。例如我们点击了一个按钮，产生了一个click事件，click事

2020-07-04 14:13:57 4641 2

前端最全复习内容.xmind

前端内容.xmind

空空如也