- 博客(29)
- 收藏
- 关注
RSS订阅原创 vant文件上传Uploader图片压缩
随着科技的发展，手机像素越来越好。图片越清晰，体积也就越大。当移动端上传大图时就会发生卡顿，请求超时的情况。当图片过大时，图片预览也会非常慢，所以需要在图片上传时对图片进行压缩。...
2021-06-18 16:37:10
2259
原创 vue-pdf插件使用报错To install them, you can run: npm install --save core-js/modules/es
一、如何使用如何使用vue-pdf 可参照pdf预览 vue-pdf插件使用二、报错原因项目中引入vue-pdf之后启动项目会报错，提示缺少依赖：To install them, you can run: npm install --save core-js/modules/es.object.to-string.js core-js/modules/es.string.iterator.js core-js/modules/web.dom-collections.iterator.js pd.
2021-06-15 16:28:52
8579
转载 说说提高webpack的构建速度的手段有哪些？
一、背景随着我们的项目涉及到页面越来越多，功能和业务代码也会随着越多，相应的webpack的构建时间也会越来越久构建时间与我们日常开发效率密切相关，当我们本地开发启动devServer或者build的时候，如果时间过长，会大大降低我们的工作效率所以，优化webpack构建速度是十分重要的环节二、如何优化常见的提升构建速度的手段有如下： 优化 loader 配置 合理使用 resolve.extensions 优化 resolve.modules...
2021-06-08 13:22:41
558
转载 说说你是如何利用Webpack来优化前端性能的？
一、背景随着前端的项目逐渐扩大，必然会带来的一个问题就是性能尤其在大型复杂的项目中，前端业务可能因为一个小小的数据依赖，导致整个页面卡顿甚至奔溃一般项目在完成后，会通过webpack进行打包，利用webpack对前端项目性能优化是一个十分重要的环节二、如何优化通过webpack优化前端的手段有： JS代码压缩 CSS代码压缩 Html文件代码压缩 文件大小压缩 图片压缩 Tree Shaking 代码分离 内..
2021-06-08 13:11:08
352
转载 说说Webpack Proxy工作原理？为什么能解决跨域?
一、是什么webpack proxy，即webpack提供的代理服务基本行为就是接收客户端发送的请求后转发给其他服务器其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制）想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-serverwebpack-dev-serverwebpack-dev-server是webpack官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起目的是...
2021-06-08 10:40:35
330
原创 说一下 GET 和 POST 的区别？
一、是什么GET和POST，两者是HTTP协议中发送请求的方法GETGET方法请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据POSTPOST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或「副作用」本质上都是TCP链接，并无差别但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中会体现出一些区别二、区别从w3schools得到的标准答案的区别如下： GET在浏览器回退时是无害的，而POST会再次提交请求。 ..
2021-06-08 10:28:32
140
转载 说说Webpack的热更新是如何做到的？原理是什么？
一、是什么HMR全称Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用例如，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会丢失如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，不必完全刷新整个应用在webpack中配置开启热模块也非常的简单，如下代码：constwebpack=require('webpack')module...
2021-05-21 15:52:53
541
转载 说说Webpack中Loader和Plugin的区别？编写Loader，Plugin的思路？
一、区别Loader与Plugin对应的概念 loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中 plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事 从整个运行时机上来看，如下图所示：可以看到，两者在运行时机上的区别： loader 运行在打包文件之前 plugins 在整个编译周期都起作用 在Webp..
2021-05-21 15:42:57
1898
原创 pdf预览 vue-pdf插件使用
1. 前言vue-pdf是对pdf.js的封装使用起来更加简单2.安装npm install --save vue-pdf3.一个简单的示例<template> <pdf src="./static/relativity.pdf"></pdf></template> <script>import pdf from 'vue-pdf' export default { components: { p
2021-05-21 15:15:40
474
2
原创 说说webpack中常见的Plugin？解决了什么问题？
一、是什么Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据webpack中的plugin也是如此，plugin赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在webpack的不同阶段（钩子 / 生命周期），贯穿了webpack整个编译周期目的在于解决loader无法实现的其他事配置方式...
2021-05-18 16:04:21
201
原创 说说Webpack中常见的Loader？解决了什么问题？
一、是什么loader用于对模块的源代码进行转换，在import或"加载"模块时预处理文件webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。如下图所示：在webpack内部中，任何文件都是模块，不仅仅只是js文件默认情况下，在遇到import或者load加载模块的时候，webpack只支持对js文件打包像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容...
2021-05-18 14:04:36
338
原创 说说webpack的构建流程?
一、运行流程webpack的运行流程是一个串行的过程，它的工作流程就是将各个插件串联起来在运行过程中会广播事件，插件只需要监听它所关心的事件，就能加入到这条webpack机制中，去改变webpack的运作，使得整个系统扩展性良好从启动到结束会依次执行以下三大步骤： 初始化流程：从配置文件和Shell语句中读取与合并参数，并初始化需要使用的插件和配置插件等执行环境所需要的参数 编译构建流程：从 Entry 发出，针对每个 Module 串行调用对应的 Loader 去翻译...
2021-05-08 13:22:28
509
原创 说说em/px/rem/vh/vw的区别?
一、介绍传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等二、单位在css单位中，可以分为长度单位、绝对单位，如下表所指示CSS单位 相对长度单位 em、ex、ch、rem、vw、vh、vmin、vmax、% ...
2021-05-08 13:18:01
432
原创 git使用暂存修复hotbug以及远程操作冲突的解决
git暂存误操作1. git stash 将未提交的工作暂存2. git stash drop 将未提交的暂存应用直接drop导致暂存工作丢失找回暂存1. git fsck查询所有被删除的暂存2. git stash apply commitHash将暂存重新应用到工作区版本回退的方式1. git reset --hard commitHash重置HEAD,暂存区，工作目录到指定版本2. git branch 分支名 commitHash时光机： 创建一个指
2021-05-08 13:14:32
159
原创 CSS选择器有哪些？优先级？哪些属性可以继承？
一、选择器CSS选择器是CSS规则的第一部分它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式选择器所选择的元素，叫做“选择器的对象”我们从一个Html结构开始<divid="box"><divclass="one"><pclass="one_1"></p><pclass="one_1">&...
2021-05-08 10:58:21
290
转载 W3C 标准盒子模型与IE 怪异盒子模型的区别
一、是什么当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）一个盒子由四个部分组成：content、padding、border、margincontent，即实际内容，显示文本和图像boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受..
2021-05-08 10:15:56
290
原创 说说你对Webpack的理解？解决了什么问题？
一、背景Webpack最初的目标是实现前端项目的模块化，旨在更高效地管理和维护项目中的每一个资源模块化最早的时候，我们会通过文件划分的形式实现模块化，也就是将每个功能及其相关状态数据各自单独放到不同的JS文件中约定每个文件是一个独立的模块，然后再将这些js文件引入到页面，一个script标签对应一个模块，然后调用模块化的成员<scriptsrc="module-a.js"></script><scriptsrc="module-b.js"&g...
2021-05-07 17:07:23
430
原创 手写Promise（九）实现 resolve 与 reject 的静态调用
Promise函数对象可以直接调用resolve和reject方法来看一段代码Promise.resolve().then(() => { console.log(0); return Promise.resolve(4);}).then((res) => { console.log(res)})// 输出// 0// 4试一下我们的Promise能否实现// testMyPromise.resolve().then(() => {
2021-04-30 13:56:38
431
原创 手写Promise（八）then中的参数变为可选
上面我们处理 then 方法的时候都是默认传入 onFulfilled、onRejected 两个回调函数，但是实际上原生 Promise 是可以选择参数的单传或者不传，都不会影响执行。例如下面这种 ????// test.jsconst promise = new Promise((resolve, reject) => { resolve(100)})promise .then() .then() .then() .then(value => conso
2021-04-28 14:25:24
168
原创 手写Promise（七）then的链式调用-异步
手写Promise（四）then的链式调用只能支持同步代码，参考 fulfilled 状态下的处理方式，对rejected 和 pending 状态进行改造，改造之后让then方法可以支持异步代码。改造内容包括：增加异步状态下的链式调用 增加回调函数执行结果的判断 增加识别 Promise 是否返回自己 增加错误捕获对代码进行修改then(onFulfilled, onRejected) { // 为了链式调用这里直接创建一个 MyPromise，并在后面 return 出去
2021-04-08 16:05:16
411
原创 手写Promise（六）错误捕获
目前还缺少重要的一个环节，就是我们的错误捕获还没有处理1. 捕获执行器错误捕获执行器中的代码，如果执行器中有代码错误，那么 Promise 的状态要变为失败对执行器进行修改constructor(executor){ // ==== 新增 ==== // executor 是一个执行器，进入会立即执行 // 并传入resolve和reject方法 try { executor(this.resolve, this.reject) } catch (error
2021-04-08 14:47:36
289
原创 手写Promise（五）then返回自身的问题
如果 then 方法返回的是自己的 Promise 对象，则会发生循环调用，这个时候程序会报错看一下原生Promise代码的执行结果const promise = new Promise((resolve, reject) => { resolve(100)})const p1 = promise.then(value => { console.log(value) return p1})// 100// Uncaught (in promise) TypeErr
2021-04-08 14:16:48
726
1
原创 手写Promise（四）then的链式调用
手写Promise（三）then的多次调用中遇到的问题先看一个????const promise = new MyPromise((resolve, reject) => { // 目前这里只处理同步的问题 resolve('success')})function other () { return new MyPromise((resolve, reject) =>{ resolve('other') })}promise.then(value =&
2021-04-07 17:56:59
571
原创 手写Promise（三）then的多次调用
手写Promise（二）异步任务中遇到的问题看一个????const promise = new MyPromise((resolve, reject) => { setTimeout(() => { resolve('success') }, 2000); })promise.then(value => { console.log(1) console.log('resolve', value)}) promise.then(value =&
2021-04-07 17:16:03
1065
1
原创 手写Promise（二）异步任务
很多手写版本都是使用 setTimeout 去做异步处理，但是 setTimeout 属于宏任务，这与 Promise 是个微任务相矛盾，所以我打算选择一种创建微任务的方式去实现我们的手写代码。这里我们有几种选择，一种就是 Promise A+ 规范中提到的，process.nextTick（ Node 端 ） 与MutationObserver（ 浏览器端 ），考虑到利用这两种方式需要做环境判断，所以在这里我们就推荐另外一种创建微任务的方式 queueMicrotask。什么是 Promise A
2021-04-06 17:16:53
146
原创 手写Promise（一）同步任务
Promise 核心逻辑实现我们先简单实现一下 Promise 的基础功能。先看原生 Promise 实现的 ????，第一步我们要完成相同的功能。原生???? ????const promise = new Promise((resolve, reject) => { resolve('success') reject('err')})promise.then(value => { console.log('resolve', value)}, reaso
2021-04-06 16:16:19
206
原创 什么是 EventLoop ？
Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。事件循环的进程模型选择当前要执行的任务队列，选择任务队列中最先进入的任务，如果任务队列为空即null，则执行跳转到微任务（MicroTask）的执行步骤。 将事件循环中的任务设置为已选择任务。 执行任务。 将事件循环中当前运行任务设置为null。 将已经运行完成的任务从任务队列中删除。 microtasks步骤：进入microtask检查点。.
2021-04-06 11:16:00
23507
1
原创 什么是宏任务与微任务？
我们都知道 Js 是单线程的，但是一些高耗时操作带来了进程阻塞的问题。为了解决这个问题，Js 有两种任务的执行模式：同步模式（Synchronous）和异步模式（Asynchronous）在异步模式下，创建异步任务主要分为宏任务与微任务两种。ES6 规范中，宏任务（Macrotask） 称为 Task， 微任务（Microtask） 称为 Jobs。宏任务是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。宏任务与微任务的几种创建方式宏任务（Macrotask） 微任务（Mic
2021-04-06 10:04:40
7590
原创 git别名修改 git命令多很难记？来教你一招搞定！
git命令多很难记？来教你一招搞定！Git别名修改git config --global alias.别名 “原名”列举常用别名作者的常用别名仅供参考// 高级日志查看git config --global alias.lol "log --oneline --decorate --graph --all"// 为了方便起的别名st = statusco = checkoutbc = branch...好了，你也动手配置属于自己的别名吧~...
2021-04-02 10:50:52
85
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人