自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

lee前端技术站

读万卷书,行万里路,代码运行了那么久,却总觉得不是最优秀。。。

原创 前端开发之如何理解前端工程化思想

谈到前端工程化问题,总觉得这是一个很大到问题,同时也是一个当前比较热聊到一个前端所面临的问题。其实从前后端分离,前端独立出来,到现在的前端迅速发展,经历的时间并不长,尽管当前有像vue,angular,react这样的框架供开发者使用,也大大提高了效率,但似乎离前端刀耕火种的年代并没有多远。所以前端工程化也就应运而生。什么是前端工程化?前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化,其主要目的为了提高效率和降低成本,即提高开发过程中的开发效率,减少不必要的

2020-08-11 13:56:46 17

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

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

2020-07-21 18:34:47 24

原创 webpack打包之webpack打包流程到底是什么

webpack的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:首先会从配置文件和Shell语句中读取与合并参数,并初始化需要使用的插件和配置插件等执行环境所需要的参数;初始化完成后会调用Compiler的run来真正启动webpack编译构建过程,webpack的构建流程包括compile、make、build、seal、emit阶段,执行完这些阶段就完成了构建过程。

2020-08-13 15:19:13 3

原创 JavaScript基础之EventLoop事件循环机制

每每遇到异步问题的时候,总是能让我们抓耳挠腮,无所适从。那么我们就来讲讲异步问题——EventLoop事件循环机制。首先来了解一个概念,进程和线程:进程:进程是 CPU 资源分配的最小单位;线程:线程是 CPU 调度的最小单位。如何理解这句话呢?计算机是多进程执行的,打开自己的电脑的任务管理器,可以看到所有的执行的进程,而每一个执行的进程又是有多个线程组成的。线程是一个进程中代码的不同执行路线。一个进程的内存空间是共享的,每个线程都可用这些共享内存。而每个进程是独立的。所以这里就会出现另一个

2020-08-11 18:07:58 20

原创 JavaScript基础之缓存机制:HTML5离线缓存

浏览器的缓存机制,多种多样,离线缓存是其中之一,这也是为了更好的用户体验,性能优化的重要一步。我们来讲讲这个离线缓存。什么是HTML5离线缓存?离线缓存(Application Cache)就是web应用缓存方式的一种,可以使得用户在离线状态下,依然能够很完美的浏览网站。HTML5离线缓存的优势?离线浏览 - 用户可在应用离线时使用它们。 速度 - 已缓存资源加载得更快。 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。HTML5离线缓存应用场景?h5游戏及一些页面

2020-08-10 19:00:17 31

原创 JavaScript基础之缓存机制:浏览器缓存机制

缓存可以说是网站性能优化非常有用的一种方式。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负荷。对于一个数据请求来说,可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求,或者发起了请求但后端存储的数据和前端一致,那么就没有必要再将数据回传回来,这样就减少了响应数据。一、缓存的位置从缓存的位置来说,主要是分为四种,如果这四种都没有命中,才回去发起网络请求

2020-08-10 14:24:03 19

原创 JavaScript基础之缓存机制:HTTP缓存机制

说到前端的缓存机制,无非就是俩中,一种是浏览器缓存机制,一种就是我们今天要说的HTTP缓存机制。那么接下来就说说这HTTP缓存机制。什么是HTTP缓存?HTTP缓存指的是,当客户端向服务器请求资源时,会先抵达浏览器缓存,如果浏览器有“要请求资源”的副本,就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。常见的http缓存只能缓存get请求响应的资源,对于其他类型的响应则无能为力,所以后续说的请求缓存都是指GET请求。http缓存都是从第二次请求开始的。第一次请求资源时,服务器返回

2020-08-10 10:53:29 28

原创 React解密:React Hooks函数之useRef和useImperativeHandle

看到了useRef,我们就会很自然的和dom关联起来。先来看用法:const refContainer = useRef(initialValue);useRef返回一个可变的 ref 对象,其.current属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonC...

2020-08-06 18:47:03 41

原创 React解密:React Hooks函数之useCallback和useMemo

之所以将useCallback和useMemo放到一起,从某种意义上说,他们都是性能优化的始作俑者,他们也有很多的共性。我们先来回顾一下class组件性能优化的点:调用setState,就会触发组件的重新渲染,无论前后state是否相同 父组件更新,子组件也会自动更新介于这俩点,我们一般使用immutable进行比较,在不相等的时候调用setState, 在shouldComponentUpdate中判断前后的props和state,如果没有变化,则返回false来阻止更新...

2020-08-06 17:37:35 36

原创 JavaScript基础之HTTP状态码总结

前端与后端交互,说得直接一点,也就是体现在network中,而状态码是我们比较关注的一个点,那么我们来总结一下http状态码,都表示什么意思?http状态码分为五种类型:1**,2**,3**,4**,5**。分类 分类描述 1** 信息,服务器收到请求,需要请求者继续执行操作 2** 成功,操作被成功接收并处理 3** 重定向,需要进一步的操作以完成请求 4** 客户端错误,请求包含语法错误或无法完成请求 5** 服务器错误,服务器在处理请求的过

2020-08-05 17:48:55 35

原创 React解密:React Hooks函数之useReducer

看到Reducer这个单词是不是非常的熟悉,非常的请求,没错,hooks函数,useReducer函数与redux中reducer函数如出一辙。在hooks函数中就是useState函数的替代方案。它接收一个形如(state, action) => newState的 reducer,并返回当前的 state 以及与其配套的dispatch方法。const [state, dispatch] = useReducer(reducer, initialArg, init);在某些场景下...

2020-08-05 17:18:14 38

原创 React解密:React Hooks函数之useContext

useContext函数是React Hooks三大基础hooks函数之一。话不多说,我们先来看用法:const value = useContext(MyContext);接收一个 context 对象(React.createContext的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的<MyContext.Provider>的valueprop 决定。当组件上层最近的<MyContext.Provider&...

2020-08-05 16:33:47 58

原创 React解密:React Hooks函数之useEffect和useLayoutEffect

useEffect是react hooks的又一个重要的hooks函数。Effect hooks允许你在组件中执行副作用操作。数据获取,设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作,或是“副作用”这个名字,应该都在组件中使用过它们。所有,useEffect这个hooks函数就相当于是componentDidMount,componentDidUpdate和componentWillUnmount这三个函数的组合。

2020-08-04 10:55:52 97

原创 React解密:React Hooks函数之useState

React16.8+版本的发布,hooks函数是新增的一大功能,其实useState函数是让函数组件有了状态,那么我们就来详细了解一下useState这个函数。用法:const [state, setState] = useState(initialState);因为react是函数式编程,所以上面的代码就很好理解了,useState函数接收一个初始化参数initialState,其返回值用数组解构俩个参数,state是初始化的state,以及更新state的函数setState.在初始渲染.

2020-08-03 15:17:59 119

原创 CSS基础之BFC布局

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

2020-07-27 15:35:22 38

原创 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 33 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 41

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

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

2020-07-21 15:36:34 64

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

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

2020-07-20 17:15:42 29

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

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

2020-07-19 19:00:59 41

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

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

2020-07-18 23:18:45 15

原创 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 41

原创 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 59

原创 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 29

原创 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 94

原创 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 31

原创 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 57

原创 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 41

原创 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 57

原创 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 313

原创 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 98

原创 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 52

原创 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 84

原创 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 132

原创 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 36

原创 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 66

原创 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 100

原创 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 28

原创 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 45

原创 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 399

提示
确定要删除当前文章?
取消 删除