- 博客(53)
- 收藏
- 关注
RSS订阅原创 ES新特性总结
ECMAScript的了解ECMAScript也是一门脚本语言，一般缩写es，通常我们把它看做Js的标准化规范，但实际上js是ECMAScript的扩展语言，ECMAScript中只是提供了最基本的语法，只是停在了语言层面，实现不了实际应用当中的功能开发。JS实现了ECMAScript语言的标准，在ECMAScript的基础上进行了扩展，使得我们在浏览器环境可以操作DOM、BOM，node环境可以读写文件。总得来说：浏览器下的JS包括：ECMAScript + Web APIs(DOM、B
2021-11-23 21:04:08
3142
原创 函数柯里化
什么是函数柯里化？函数有多个参数，调用函数时先传递部分参数，并返回一个新的函数接收剩余的参数，返回相应的结果// 硬编码function checkAge(age) { let mini = 18; return age >= mini;}// 普通的纯函数function checkAge(mini, age) { return age >= mini;}// 柯里化实现function checkAge(mini) { return
2021-11-23 11:08:04
456
原创 Generator简单解析
Generator的理解1. 跟普通函数一样，就是在声明function前面多了一个 *2. 是一个生成器函数：调用一个生成器函数不会立即执行，返回一个生成器对象调用它的next()方法来返回值，可以随时yield关键词，向外返回值，通过next()方法来拿到这个值 返回值有一个done属性，用来表示当前的生成器函数是否执行完毕yield暂停生成器函数的执行，直到调用next()方法才会继续向下执行 next()方法中传一个值，将作为yield的返回值调用生成器函数的throw方法，会
2021-11-23 11:01:27
396
原创 Promise类核心逻辑实现解析
Promise是一个类，在执行这个类的时候需要传递一个执行器进去，执行器会立即执行1、Promise中有三个状态：pending fulfilled rejected。状态只能由 pending --> fulfilled、pending --> rejected。一旦状态确定，就不可更改。2、 resolve函数和reject函数是用来更改状态的, resolve 对应 fulfilled状态 reject 对应 rejected状态。3、then方法内部做的事情就是判断状态，如.
2021-11-23 10:56:34
738
原创 五分钟了解防抖和节流
防抖场景当实现滚动监听的时候，发现每滚动一次滚动条，这个监听时间执行了十来次，如果这样子实现太过于浪费性能，所以就出现了防抖。那么这个问题怎么优化呢？当我们滚动监听第一次触发的时候不是立即执行函数，而是给它一个delay延迟时间，比如200ms当在200ms内如果没有触发该事件，则执行函数 在200ms再次或者多次触发，都清空定时器，重新设置定时器知道过了delay时间后才执行函数。大概思路是这样，那么应该怎么用代码来实现呢，用setTimeout来实现定时器的功能fun
2021-06-23 11:21:49
184
原创 nextTick的理解
nextTick: 在下次DOM更新循环结束之后执行延迟回调,当修改完数据后立即执行这个方法，获取更新后的DOM。Vue中的DOM更新并不是实时的，当数据改变后，vue会把渲染watcher添加到异步队列，异步执行，同步代码执行完成后再统一修改DOM。源码实现： 先来了解一下 MutationObserver / setImmediate MutationObserver: 接口提供了监视DOM树所做更改的能力。 MutationObserver()构造函数是MutationOb......
2021-06-01 15:36:19
437
原创 vue3较于vue2使用上的差别
1. 获取url参数的方式不同vue2this.$router.query.nameVue3// 先引入useRouteimport {useRoute} from ‘vue-router’// 然后使用const route = useRoute();Const {name} = route.query;2. vuex的使用上的不同vue2// store/user/actions.tsImport * as types from ‘./mutations-ty
2021-04-12 11:02:05
273
原创 导入less文件遇到的问题以及解决办法
问题在vue文件中引入less文件，终端报错@import url(‘assets/style/variable.less’)那么怎么解决呢？我百度了一下说是在assets前面加一个~就正常运行了，这样子：@import url(‘~assets/styles/base.less’)为什么会报这样的错呢，~ 有什么意思？百度了一下找到了：~ 符号表示后面的值为alias，然后就会去build/webpack.base.conf.js配置中找相应的值，然后拼接成最
2021-04-12 10:45:34
3243
原创 tailWindCSS
TailWindCSS是什么？是一个功能类优先的CSS框架，能直接在便签中组合使用，构建页面需要的样式。那么有什么用呢？不需要离开html即可快速构建想现代网络 生产环境体积非常小：在构建过程中会自动删除无用的css 可以构建想要的各种样式，不用写一堆样式代码，加快开发速度 是响应式的 支持hover和focus状态在vue项目中使用 TailwindCSS1. 首先创建项目，这里我们创建一个Vite项目npx create-vite-app vite-appcd vi
2021-03-25 18:45:31
1498
原创 首屏渲染优化之critical css
场景假如我们有一个网站，样式多样，所以样式文件也会很大。出现问题浏览器的渲染顺序是等head中的css资源解析加载完成后浏览器才会渲染页面。这个时候如果css文件太大，那么在首次渲染的时候会出现一段白屏，用户体验极不好。这个时候我们就要考虑怎么样更快的实现首屏渲染，使得用户体验好点呢？解决大概思路如果我们把样式分为两份，一份为首屏渲染的样式，一份为剩余页面的样式。使得首屏的样式内联在head里面，当输入url，浏览器解析到html文件就尽快的渲染页面，解决白屏的问题。对于其他页
2021-03-23 15:53:34
720
原创 浏览器的缓存策略
目录缓存位置缓存过程分析缓存机制实际场景应用缓存策略用户行为对浏览器缓存的影响缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。缓存位置service worker是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。传输协..
2021-03-10 18:31:17
394
原创 AMD/CMD/ConmonJs
Amd与cmd是用在浏览器端的，都是异步加载模块RequireJs 遵循AMD规范(用define定义规范模块，用require引用模块)， SeaJs 遵循CMD规范CommonJs是用在服务器端的，同步加载模块NodeJs 和 WebPack 是CommonJs规范的实现 用 module.exports 定义模块，用 require 引用模块 根据CommonJS规范，一个单独的文件就是一个模块。加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports
2021-03-09 18:51:01
131
原创 js闭包的理解
\1. 什么叫闭包？闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成 " 定义在一个函数内部的函数" 。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。2.闭包的产生条件？作用域嵌套在父级作用域里生成了一个变量 var i=0 在子作用域里使用这个变量，这样声明的那个变量 i 就是自由变量，这种作用域嵌套环境叫做闭包环境。在内存中存在和回收站相似的机制，叫做垃圾回收机制。...
2021-03-08 18:19:17
6551
1
原创 Promise、async/await的理解以及区别
promise、async、await有什么用呢，怎么理解？都是为了解决异步回调产生的。Promise好比容器，里面存放着一些未来才会执行完毕的事件的结果，而这些结果一旦生成是无法改变的。async和await遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。promise与async、await的区别?promise的出现解决了传统callback函数导致的地狱回调问题，但是他的语法导致它纵向发展
2021-03-04 18:19:11
3872
3
原创 webpack优化系列(11)-dll
dll是什么？类似于externals，指使哪些库是不需要打包的。和externals区别在于 dll 会单独的对某些库进行单独打包，将多个库打包成一个chunk。那么它有什么意义呢？正产情况下一个项目下 node_modules 里面的包会打包成一个chunk，但是第三方库很大，打包成一个chunk文件体积过大。所以通过 dll 将所有库进行单独打包成不同的chunk，更加有利于我们的性能优化，提高构建速度。使用dll技术对某些库(第三方库：jquery，react，vue...)进
2021-03-02 19:12:24
397
原创 webpack优化系列(10)-externals
externals作用防止将某一些包打包到我们最终的bundle里面导致包体积变大。场景jquery我们希望通过csdn链接引入使用，不希望打包到最后的bundle里面，为了避免打包的时候将jquery最终也给打包了，可以配置externals，禁止将jquery打包。配置拒绝jQuery打包进到最终的bundle里面, 但是一定要把jquery通过csdn链接引入到html里面。否则打包完后的页面中不能使用jquery// webpack.config.jse
2021-03-02 17:14:57
269
原创 webpack优化系列(9)-多进程打包
thread-loader开启多进程打包 进程启动大概600ms，进程通信也有开销，只有工作消耗时间比较长，才需要多进程打包。一般用在babel-loader后面webpack配置如下：module: { rules: [ { test: /\.js$/, use: [{ loader: 'thread-loader', options: { ..
2021-03-01 15:47:27
409
原创 webpack优化系列(8)-PWA
PWA是什么？(Progress web apps) 渐进式网络开发应用程序(离线可访问，比如淘宝)。那么webpack中怎么配置实现PWA功能呢？一般使用workbox来实现（谷歌开源的项目）==> workbox --> workbox-webpack-plugin一般设置eslint后构建后会有问题：eslint不认识window、navigator全局变量解决办法：eslintConfig: { env: { browser: true.
2021-03-01 15:43:57
432
原创 webpack优化系列(7)-懒加载和预加载
1. 懒加载 // index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack性能优化</title>
2021-03-01 15:36:48
591
原创 webpack优化系列(6)-code split
代码分割将我们打包输出的一个文件分割为多个文件。（并行加载，速度更快 、按需加载）主要针对于js代码。方式一：通过修改entry配置多入口，有几个入口输出有几个bundleentry: { index: './src/js/index.js', test: './src/js/test.js'}缺点：修改不太灵活,要改配置。方式二：optimization 1. 单入口应用中可以将node_modules中代码单独打包成一个chun...
2021-03-01 15:26:04
224
原创 webpack优化系列(5)-tree-shaking
什么是tree-shaking呢?可以理解为：通过工具"摇"我们的JS文件，将其中用不到的代码"摇"掉，是一个性能优化的范畴。具体的来说，在 前端项目中，webpack配置文件中有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。作用去除无用代码，减少代码体积使用tree-shaking的前提必须使用es6模块
2021-03-01 15:19:36
283
原创 webpack优化系列(4)-babel缓存 & hash缓存
场景：当有100个js文件，当修改了其中某一个js文件的时候，不可能再把所有的js文件再编译一遍，会影响构建速度，所以这个时候只要实现修改一个js文件只构建那一个文件，其他的99个文件不动。那么这个时候可能会想到用热模块替换（HMR），但是HMR是基于dev-server的，生产环境是不需要dev-server。那么这个时候可以用缓存实现。怎么配置呢？ 1、针对js兼容性进行缓存：(babel缓存)babel-loader的options设置中增加cacheDirectory属性..
2021-03-01 15:12:23
1077
3
原创 webpack优化系列(3)-oneOf
正常来讲，一个文件只能被一个loader处理。当一个文件要被多个loader处理，那么一定指定loader执行的先后顺序：比如js文件先执行 eslint 再执行 babel问题：一个文件被所有设置的loader过一遍，当然了，有的loader处理不了，有的loader就命中，这样不太好，那么现在呢就可以用 oneOf 将所有的rules设置包裹进去，表示loader只会匹配一个注意：不能有两个配置处理同一种类型文件。比如：eslint-loader和babel-loader都处理同一种文件类型.
2021-03-01 14:50:36
743
原创 五分钟了解事件循环机制
事件循环的理解js是单线程的，意思是一个时间只能做一件事情。在js中我们把任务分为同步和异步两种。同步和异步会进入到不同的执行环境。同步会进入到主线程(主执行栈)，异步会进入到Event Queue。主线程中的任务执行完毕为空，会去Event Queue中读取对应的任务，并推到主线程中执行，上述过程的不断重复，我们称作Event loop（事件循环）。下面先来看一个例子：console.log('start');setTimeout(() => { console.log
2021-02-24 16:34:18
643
原创 前端常用设计模式
目录工厂模式单例模式适配器模式代理模式发布订阅模式策略模式迭代器模式工厂模式像流水线作业，产出一样的产品。传参进去，操作的具体逻辑封装在一个方法里，最终返回一个对象。将new操作单独封装,遇到new时，就要考虑是否用工厂模式这个Creator就是一个工厂，里面有create函数，工厂通过create函数创建product。这样通过create已经把真正的构造函数封装起来，外部只需要知道create能生成一个实例就行。class Product {
2021-02-22 14:44:05
195
原创 webpack优化系列(2)-sourceMap
如果构建后代码出错了，要想根据构建后的代码找到源代码哪个地方出错了进行修改，应该怎么实现呢？这个时候就出现了source-map。 source-map：一种提供源代码到构建后代码的映射技术（如果构建后代码出错了，会通过映射关系可以追踪到源代码的错误）那么怎么实现呢？在webpack.config.js中增加配置属性devtooldevtool: 'source-map'那么构建完成后输出目录下会生成一个sourceMap文件（源代码到构建后代码的映射文件）比如：buil...
2020-12-24 17:51:47
558
3
原创 webpack优化系列(1)-HMR
webpack优化要做哪些方面呢？开发环境性能优化优化打包构建速度 优化代码调试生产环境性能优化优化打包构建速度 优化代码运行性能（提高用户体验）那么怎么实现优化呢？以下是我的学习，仅供参考~场景一当我们修改样式文件，实际上js文件也被重新打包了。假如项目体积很大，我们修改某一个css文件，那所有的模块都要被重新编译，会导致构建很慢，这个时候我就就要实现改哪个模块的只更新编译对应的模块即可，那么怎么实现呢？这个时候可以用到HMR，下面我们先来了解一下什么是HMR，有什么作用.
2020-12-23 19:11:30
385
原创 vue-混入mixins
简单介绍分发Vue组件中的可复用功能。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。(简单的来说就是两个组件合并为一个组件，A混入B形成了全新的组件C)单纯组件引用：父组件+子组件 => 父组件 + 子组件 混入mixins：父组件+子组件 => new 父组件（data、methods等方法合并，相当于扩充了父组件的各种属性） 注意：在使用mixins时，父子组件同时拥有子组件的各种属性方法，但是他们不会...
2020-12-23 14:28:51
316
原创 webpak基本配置
webpack是什么？webpack是一个模块打包机，它做的事情是分析你的项目结构，找到js模块以及其它的一些浏览器不能直接运行语言（Scss、less、ts），并将其打包为合适的格式以供浏览器使用。webpack解决什么问题？进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less编译成css，ES6 语法 转成 ES5等等。减少io请求。通常我们在请求后，会返回一个html到浏览器。这时，我们如果打开控制台，就会发现在html页面通过script,link
2020-12-22 17:28:42
240
原创 typescript类型介绍
1. 最近有时间学习了一下typescript，那么typescript跟js有什么区别呢？？js： js易学易用，用来开发项目开发速度还是很快的，但是后期不易维护； 声明变量为动态类型，假如代码某一块因为数据类型报错不易调试找出bug; js定义一个函数，传的参数也没有类型和个数的限制。typescript是什么？ 以javascript为基础构建的语言，是javascript的超集。 ts完全支持js，在js的基础上，引入了类型的定义。 ...
2020-12-16 17:45:16
620
原创 时间复杂度/空间复杂度
时间复杂度、空间复杂度我之前从来没有了解过，他们是什么，有什么作用呢？？ 最近偶然的机会看算法遇到了这两个东西，所以就简单的来了解一下，以下纯属个人理解，有问题欢迎指出~~那么什么是时间复杂度，什么是空间复杂度呢？？时间复杂度：一个算法的执行时间根据数据规模增加的一个趋势。 空间复杂度：占用内存的趋势。T(n) = O(f(n))S(n) = O(f(n))这个叫做大O表示法，表示随着输入的值变化，程序运行所需要的时间与输入值的变化关系。T表示算法需要执行的总时间S表示算法需要
2020-12-11 11:23:57
323
原创 前端常见的排序算法
常见的算法排序有：冒泡排序，选择排序，快速排序，插入排序，这几个我可能比较了解，但是我查看资料的时候还有一个归并排序，就顺便看了一下，然后总结一下。快速排序寻找数组中心的那个数字，然后遍历数组，对其左右的序列递归进行排序，直到左右都完成排序。function quickSort(arr) { if (!arr.length) { return arr; } var middleIndex = Math.floor(arr.length / 2); .
2020-11-20 15:25:41
316
原创 vue3-可复用&组合
组合api的出现主要替换的是之前的混入（mixin），以实现代码复用.1. 一个组件中声明一个变量，之前是在data里面，现在可以写在setup里面export default { name: "Composition", setup() { // 每一个模块的数据可以写在一块，但是数据多的话看setup可能不清爽，可以把每一个模块的数据抽离成一个函数返回data // counter相关 const data = reactive({
2020-11-10 18:45:51
2251
原创 Vue-提供/注入
一般我们父子组件传值是通过props传值，但是如果层级特别深的话，假如仅仅只有最里面一层的子组件需要最外层父组件中的某一个值的话，props传值的话就要一层一层的往外传，子组件修改还要一层一层的往外通知，特别繁琐，也挺烦人的，就一个值传递了整个组件链，如果遇到这种情况我们就可以使用provide和inject。父组件作为其所有子组件的依赖项提供数据，不用管组件层级有多深。父组件有一个provide选项提供数据，子组件有一个inject选项来使用数据。在父组件中提供数据：const ap
2020-11-04 18:25:25
739
原创 Vue插槽
最近详细的看了vue插槽的文档，系统学习下来感觉vue3对于插槽的使用变化不是很大，以下为学习过程：插槽注意点：v-slot只能添加在<templete>标签上面，如果只有一个默认插槽，组件的标签才可以被当做插槽的模板来使用。 父级模板里的所有内容都是在父级作用域中编译的，子模板里的所有内容都是在子作用域中编译的。 为插槽设置后备内容（也就是在没有提供插槽内容的时候默认显示后备内容），实现如下：MyButton.vue<button> <slot&g
2020-11-04 16:42:28
226
原创 vue3相对于vue2路由使用的变化
vue3的重大改进，带来了vue-router的一系列改进，在用法以及语法上面都有了很大的改变。1. 构建选项 mode// vue2const router = new Router({ mode: history, ...});// vue3import {createRouter, createWebHistory} from 'vue-next-router';const router = createRouter({ history: createWe
2020-10-27 15:50:39
1137
1
原创 数组对象的多种实现方法
最近在开发中遇到一个问题，对于对象数组去重，在我之前可能想到的办法就是for循环，利用对象访问属性，判断key是否存在，但是这个实现过程未免有些繁琐，es6里面可以用更加简便的方法来实现，以下是几种对于数组对象去重的具体实现方法，对比一下，会发现第一种方法简直是不要太简便：1. es6中filter，includes 实现let testArr = [ { name: 'baidu', value: 11 }, { na.
2020-07-16 18:38:37
382
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人