- 博客(65)
- 收藏
- 关注
RSS订阅原创 @nuxtjs/auth ssr用户鉴权，请求自动携带token信息
1、服务端请求自带auth，用户鉴权，解决接口未登录问题2、替代路由卫士3、cookie / vuex 持久化操作（存储用户登录信息）4、登入登出重定向1、安装@nuxtjs/auth模块，在nuxt.config.js中配置模块
2022-06-15 11:03:33
1143
2
原创 移动端repeat-y不生效（背景纵向平铺）
问题及应用背景：1、【问题】：background-repeat: repeat-y在pc端查看背景是纵向平铺拉伸的，在移动端背景不展示2、【背景】：对于非固定高度的页面，需要添加背景，此时背景需要是可以自动拉伸的，因此需要使用background-repeat: repeat-y实现纵向平铺原因经过多方面排查，有以下两个原因1、background-size 有两个值，若只设置一个，会导致背景不展示（代码如下）backgruond-image: url('@/xxx/xxx.png');ba
2022-05-30 16:24:48
508
原创 依赖下载问题：The unauthenticated git protocol on port 9418 is no longer supported
项目依赖下载问题1、The unauthenticated git protocol on port 9418 is no longer supported.解决不再支持端口 9418 上未经身份验证的 git 协议错误解决方案：将 git://github.com 或者 [email protected] 替换为https://github.comgit config --global url."https://github.com/".insteadof [email protected] c
2022-05-07 17:39:02
390
原创 生成随机密码（包含字母、数字、特殊字符）
/** [generatePassword] 随机生成密码* [length] 密码长度* [lower] 是否含有小写字母* [upper] 是否含有大写字母* [number] 是否含有数字* [symbol] 是否含有特殊字符*/export function generatePassword(length, lower, upper, number, symbol) { let generatedPassword = '' const typesCount = lower +
2022-04-29 11:08:47
1832
原创 性能检测与优化
可以使用Google chrome的Lighthouse来检测性能性能名词1、Lighthouse 性能检测工具2、performance 性能3、accessbility 无障碍4、best practices 最佳做法5、SEO性能指标1、首次内容绘制 first contentful paint2、可交互时间 time to interactive3、速度指标 speed index4、总阻塞时间 total blocking time5、最大内容绘制 largest cont
2022-04-29 10:59:50
539
原创 开发vue组件并发布到npm包管理器
为什么要封装组件？在项目进行过程中，会多次用到类似的功能组件，多个项目也会用到一样的组件，如果修改样式则需要每个项目改一遍，所以将组件放到npm中统一管理，只要修改这个公共组件就可以轻松修改多个项目啦怎样开发组件？1、创建vue项目// 创建vue项目vue create my-component// 选择vue2默认配置2、修改目录结构将src目录修改为examples用于测试组件新建packages目录用于开发组件新建vue.config.js配置打包信息等新建.npmigno
2021-10-20 11:47:07
224
原创 vite build
vite在开发阶段采用的是按需加载的方式，不会将所有文件打包。但是生产环境的部署是需要进行打包的，这里它使用的是rollup打包方式。对于代码切割的需求，使用原生动态导入，因此打包后支持新浏览器，对IE的兼容性不是很好，但是可以用对应的polyfill解决。使用esbuild来处理需要pre-undle的在cli.ts的build命令中引入build.ts调用doBuild方法，在这个方法中配置打包参数（input output plugin等）调用buildHtmlPlugin解析文件入口in
2021-10-19 17:44:14
4301
原创 vite devServer
简介viteDevServer是整个vite运行的核心，下面我们来简单熟悉一下它的运行机制。首先分析一下组成：它是由5大模块和15大中间件组成的5大模块httpServerfsWatcherpluginContainerwebSocketServermoduleGraph15大中间件（按顺序执行）timeMiddlewarecorsMiddlewareproxyMiddlewarebaseMiddlewarelaunchEditorMiddlewareviteHMRPing
2021-10-19 17:43:29
2549
原创 vite 按需编译
vite不同于webpack，不会将文件打包，而是按需实时加载我们在index.html中设置，这样浏览器就会向服务器发送get请求来加载main.js，如果main中含有import，则会再次发送请求获取文件。vite的作用就是劫持浏览器的这些请求，在后台进行处理，将文件进行简单的分解整合，再返回给浏览器。// 创建server时，先配置文件路径解析方式const config = await resolveConfig(inlineConfig, 'serve', 'development')
2021-10-19 14:28:03
1006
原创 Vite HMR
传统webpack的hmr是使用webpack的HotModuleReplacementPlugin，而vite则是采用native ES Module的devServer。初始化本地服务器加载并运行对应的plugin最重要的一件事就是运行plugin，目前vite支持的plugin大体如下图所示...
2021-10-13 10:32:20
1018
原创 vite简介
概念vite是面向现代浏览器的web应用开发工具（它主要服务于vue3项目）由于浏览器开始原生支持ES模块，越来越多的javascript工具使用编译型语言编写，而vite的出现就是为了解决webpack在开发阶段使用webpack-dev-server启动时冷却时间过长以及在热更新时使用webpack-hmr反应较慢问题vite项目的依赖：@vue/compiler-sfc（用于编译.vue文件）Vite（命令行）基础使用vite server1、启动时使用vite serve，此
2021-10-11 11:17:53
909
原创 对象的新增方法
ES新增对象方法1、Object.is()2、Object.assign()3、Object.getOwnPropertyDescriptors()4、proto Object.setPrototypeOf() Object.getPrototypeOf()5、Object.keys() Object.values() Object.entries()Object.is() 判断是否同值相等 值相等就是相等的，类似于===Object.is(11, 11) // trueObject.is(
2021-09-01 15:49:29
115
原创 Generator——与Iterator关系
Generator与Iterator任意一个对象的Symbol.iterator方法都等于该对象的遍历器生成函数，而调用这个函数就会生成遍历器对象。由于Generator就是一个遍历器生成函数，所以将Generator函数赋值给对象的Symbol.iterator，就可以使对象支持Iterator了。let iterable = {}iterable[Symbol.iterator] = function* () { yield 1 yield 2}[...iterable]generat
2021-09-01 15:42:07
184
原创 Generator——简介
概念Generator是ES6提供的一种异步编程解决方案，它的执行方式与其他函数完全不一样。1、我们可以理解为它是一个状态机，里面封装了多个内部状态。2、执行Generator函数会返回一个遍历器对象，所以也可以称为是遍历器生成器函数，返回的遍历器对象可以依次遍历这个Generator函数的成员和状态。3、写法上：与普通函数不同的是，会在声明关键字后面加星号 function*；在函数内部可以使用yield表达式。这里的星号可以与function有空格，没有明确规定位置例如：function*
2021-09-01 15:23:24
925
原创 Nodejs 模块——事件
事件模块用于处理各种类型的事件，提供了EventEmitter类来处理这些事件emitter.addListener()emitter.emit()emitter.eventNames()emitter.getMaxListeners()emitter.listenerCount()emitter.listeners()emitter.off()emitter.on()emitter.once()emitter.prependListener()emitter.prependOnceL
2021-08-02 18:30:21
393
原创 Nodejs 模块——操作系统
这个模块的函数可以从操作系统或者运行程序所在的计算机上获取一些信息并且与之交互os.arch()os.cpus()os.endianness()os.freemem()os.homedir()os.hostname()os.loadavg()os.networkInterfaces()os.platform()os.release()os.tmpdir()os.totalmem()os.type()os.uptime()os.userInfo()// 操作系统模块cons
2021-08-02 18:08:10
204
原创 Nodejs 模块——路径
路径模块即path，提供了很多函数与文件系统进行交互path.basename()path.dirname()path.extname()path.isAbsolute()path.join()path.normalize()path.parse()path.relative()path.resolve()// 路径模块引入const path = require('path')// 获取文件名const name = path.basename('./test-dir/dem
2021-08-02 17:44:55
164
原创 Nodejs 模块——文件系统
文件系统模块（fs）无需安装，可以直接引用；默认异步操作，可以加Sync（如accessSync）更换为同步操作；const fs = require('fs') - fs.access() //判断文件或文件夹是否存在 - fs.appendFile() //追加内容到文件尾部 - fs.chmod() - fs.chown() - fs.close() - fs.copyFile() //复制出新的文件 - fs.createReadStream() - fs.createWrit
2021-08-02 17:25:10
124
原创 箭头函数与普通函数的区别
1、箭头函数没有自己的this，它的this是定义时上下文的this2、箭头函数没有arguments对象3、箭头函数没有构造函数，不能使用new4、箭头函数使用call apply时对this没有影响，只是传入了参数5、箭头函数没有原型...
2021-06-04 20:58:38
54
原创 关于时间复杂度的简单理解
概念时间复杂度就是算法执行时消耗的时间表示方法我们通常使用O表示法，T(n) = O(fn())fn表示每行代码执行的次数之和，O表示的是正比例关系因此我们也可以称其为算法的渐进时间复杂度常见时间复杂度O(1)O(logN)O(n)O(nlogN)O(n^2)O(n^3)O(n^k)O(2^n)从上到下时间复杂度依次提升计算方法1、O(1)不论代码执行了多少行，只要没有循环等复杂结构，都是O(1)int i = 1;int j = 2;++i;j++;int
2021-06-04 10:02:15
363
原创 javascript继承的实现方法
1、原型链继承核心：子类的原型指向父类的一个实例function Person(name, age){ this.name = name; this.age = age;}Person.prototype.sayHi = function(){ console.log('Hi!');}function Student(sex){ this.sex = sex}Student.prototype = new Person()var s1 = new S
2021-06-03 14:57:07
84
1
原创 前端加密方式
1、base64加密加密过程：（1）首先拿到一串字符，将字符用ASC||码表示（2）将ASC||替换为二进制 3个字节 8位（3）将8位的表示方式替换为6位；所以生成的密文比原来大3分之1（4）由于计算机的字节都是用8位来表示，所以高位自动补0（5）再将补0之后的字节计算为10进制数字（6）根据base64的对照表，找出对应的字符，合并起来就是密文base64的对照表包含26个英文字符的大小写字母，10个数字0-9，还有+ / =，并且=最多两个，在最后出现。使用方式window.at
2021-05-28 16:28:32
565
原创 前端页面渲染过程
当浏览器拿到一个html文件，它会怎样渲染出整个页面呢？我们将这个渲染过程分为3个步骤：1、构建DOM树与CSSOM树2、构建渲染树（Render tree）3、进行重排（reflow）与重绘（repaint）浏览器页面渲染过程下面我们来逐一介绍：1、构建DOM树与CSSOM树这两者是比较相似的，所以我们放在一起来说。html与css都是拥有层级关系的结构，所以我们将其解析为树结构。（1）拿到html文件后，首先会将字节转换为字符，确认tokens标签，然后转换为节点，通过节点构建DOM树。
2021-05-28 14:53:25
2904
1
原创 前端性能优化
1、减少HTTP请求（一个完整的http请求需要经过DNS查找，TCP握手，浏览器发出请求，服务端处理并响应请求，浏览器接收响应请求等过程）2、使用HTTP23、使用服务端渲染4、静态资源使用CDN5、将CSS放在头部，Javascript放在底部或者延迟加载（设置defer或者async）6、使用字体图标代替图片图标7、善用缓存，不重复加载相同资源8、压缩文件（我们可以使用webpack进行文件压缩）Javascript：UglifyPluginCSS：MinCssExtractPlug
2021-05-28 10:27:36
54
原创 async/await浅析
async的作用async声明的函数表示函数是异步的，并且，被async声明的函数，会返回一个Promise对象，所以如果在函数中直接返回一个直接量，这个直接量会被Promise.resolve()封装成一个promise对象。例如：async function testAsync() { return "hello async";}const result = testAsync();console.log(result);// 这里会打印出一个Promise，此时如果我们不用aw
2021-05-20 15:13:57
112
原创 React环境安装
一、检查node与npm是否已安装 node --version npm -v 下载地址：https://nodejs.org/en/download/二、安装淘宝cnpm，设置淘宝源 便于快速下载npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm config set registry https://registry.npm.taobao.org三、安装create-react-app c
2021-05-20 11:02:41
435
原创 Promise应用浅析
Promise首先我们要明白，为什么要使用promise，promise旨在于解决异步编程问题，同步任务与异步任务最大的区别在于，异步任务中我们不知道什么时间会结束，等待任务结束后再开启另一个任务，这时就会出现回调地狱，我们写的代码具有非常不好的可读性。例如：listen('click', function handler(evt){ setTimeout(function request(){ ajax({ url: "http://d.falkg.com", success: f
2021-05-20 10:57:43
211
原创 JavaScript 设计模式~工厂模式
工厂模式与构造器模式类似，工厂模式是另外一种关注对象创建概念的创建模式。同其它模式的不同之处在于它并没有明确要求我们使用一个构造器来创建对象。取而代之，一个工厂提供一个创建对象的公共接口，我们可以指定我们希望被创建的工厂对象的类型。示例：function Car(options){ this.doors = options.doors || 4 this.state = options.state || "brand new"; this.color = options.color || "
2021-05-19 18:53:50
57
原创 JavaScript 设计模式~构造器模式
构造器构造器是对象初始化并开辟存储空间后，用来初始化对象的一个特殊函数。对象构造器是被用来创建特殊类型对象的，首先准备使用的对象，其次在对象创建时，接收传入的参数，构造器对成员的属性和方法进行赋值。对象创建与赋值对象创建var obj1 = {}var obj2 = Object.create(null)var obj3 = new Object()最后这个例子调用构造器创建了一个针对特殊值的对象包装，不过这里没有传递参数，所以是一个空对象。对象赋值var obj4 = new Obj
2021-05-19 15:57:40
115
原创 变量提升
当js执行一段可执行代码时，会生成执行上下文，每个执行上下文都有3个重要属性：1、变量对象2、作用域链3、this变量对象变量对象是执行上下文的数据作用域，它存储了上下文中定义的变量和函数声明。不同的执行上下文，变量对象是不同的，可以分为全局变量对象与函数变量对象。全局上下文先了解一下全局对象全局对象是一个预定义对象，是js全局函数和属性的占位符。通过全局对象可以访问任何其他预定义的对象、函数和属性。在顶层js中，可以使用this来引用全局对象，因为全局对象是作用域的头部，因此任何非限定
2021-05-18 17:21:06
82
原创 像素单位（px pt rem em rpx）
pxpx是css像素，是一个虚拟像素，是一个相对单位例如在两个不同的设备上，1px对应的物理、设备像素是不一样的ptpt是物理像素，它是一个绝对单位，设备出厂就固定的，不会改变通常我们说的显示器分辨率，并不是真正的物理分辨率，而是桌面设置的显示分辨率px与ptcss像素px是相对的，而物理像素pt是设备的分辨率，我们以iphone6来举例iphone6的实际设备像素是750x1334，而它的逻辑像素，也就是视觉像素是375x667，所以这就出现了一个比例，设备像素比（Device Pixel
2021-04-30 11:35:21
4953
原创 H5音视频自动播放 退出页面暂停播放
音视频设置autoplay后，并不能自动播放，而是需要用户与页面发生交互解决方案：1、在页面进入后，监听touchstart事件，用户触摸页面的任意位置后，调用audio.play()来播放音视频//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放document.addEventListener('touchstart', function () { function playAudio() { let audio = document.
2021-04-27 09:56:30
1790
原创 浏览器缓存（强缓存与协商缓存）
浏览器在第一次发送请求后，服务端会返回一个last-modified，并且由客户端记录这个修改时间。服务端会生成一个Etag发送给客户端。浏览器再次请求时，会首先获取缓存的header信息，根据header中的cache-control与expires来判断是否过期，如果过期就重新向服务端发送请求。这就是强缓存。如果显示已经过期，则向浏览器发送请求，并通过if-none-match将之前的Etag发送给服务器，如果与服务端相同，则设置为false，并返回缓存页面；若不同，则设置为true，返回200，请
2021-03-29 18:14:27
145
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人