JS
文章平均质量分 78
寻ing
我又回来了~
展开
-
nuxt3 env配置 打包路径设置 预渲染
Nuxt使用nitro,而nitro自身就支持env配置,在根目录设置.env文件就可以支持,# 预渲染打开预渲染后,Nuxt会将开启预渲染的页面渲染完毕后打包成`.html`文件,并放到静态资源目录下,当客户端请求该页面时,直接返回html文件。利用`routeRules`配置可以实现部分页面的预渲染原创 2024-01-15 09:33:37 · 1699 阅读 · 0 评论 -
nuxt3 SEO相关优化
1. TDK(标题、描述、关键词)设置,推荐使用Nuxt的钩子useSeoMeta设置tdk。2. sitemap.xml 通过nuxt-simple-sitemap实现 3.robots.txt 通过nuxt-simple-robots实现 4.特殊配置-路由规则 Nuxt支持一个项目中不同的页面使用不同的渲染模式,比如一个SEO项目中,可能某些页面不需要SSR(如注册页、admin页等),可以通过配置路由规则,以混合渲染的方式实现整个项目原创 2024-01-11 09:19:08 · 940 阅读 · 0 评论 -
stale-while-revalidate / swr 一看就懂,一用就会
swr可以理解为:当该接口缓存过期后的60秒(60秒为例子中的60)内,再次请求该接口,仍然会立刻返回已经过期的信息,同时也会调用接口向服务器获取最新的数据,并重新保存在缓存中。为方便理解,swr可以总结为有三个特性 swr发生在缓存失效后(max-age后)swr会在缓存失效后的一定时间内(swr期间)的第一次请求,仍然会返回老数据swr。整体流程如下图原创 2024-01-10 09:53:00 · 1179 阅读 · 0 评论 -
nuxt3 nuxtjs/i18n 配置
国际化页面配置成静态渲染(预渲染)页面,该选项会在打包时将页面预渲染成默认语言的html文件,访问该页面时服务端会直接返回当前html(因为与渲染会将函数执行,导致服务端返回的一直是默认语言的页面),最终导致页面语言和排版混乱。:cookie中没有设置值的话,默认使用此致(并不是默认。对应的值的效果,他会偶尔抽风,错误的去设置默认。总是重定向到存储在cookie中的值,:支持的语言列表,可以是数组或对象。:(必填)-区域设置的唯一标识符。需求允许的情况下,修改后调用。在需要切换国际化时,通过原创 2024-01-09 10:34:58 · 1723 阅读 · 2 评论 -
nuxt3 路由相关
Nuxt 3提供了钩子,允许完全更改Nuxt自动生成的路由,我们可以通过该钩子实现vue-router路由方案(适合老项目迁移,并不是很推荐这样用)首先创建文件path: "",meta: {},...创建钩子函数hooks: {// 清空Nuxt.js自动生成的路由// // 重新将自定义路由配置设置进去},},})原创 2024-01-08 15:16:22 · 1079 阅读 · 0 评论 -
nuxt3 请求相关问题
#配置跨域 本地的反向代理我们可以通过Nitro引擎来配置服务器请求没有跨域,也就不需要配置代理转发。#接口封装 nuxt3中虽然也可以使用axios,但nuxt本身对fetch做了封装,并提供了几个函数 #推荐用法 更推荐使用useFetch直接在业务中请求数据,将返回的数据直接当做ref使用原创 2024-01-05 09:45:01 · 664 阅读 · 0 评论 -
nuxt3 服务端请求其他接口犯的问题与解决
useAsyncData/useFetch返回的代理数据,是类似`useState`生成的**SSR 友好组合**代理,会根据内部的`key`来校验是否需要重复请求的,删掉了就很容易出现重复请求的结果原创 2024-01-04 10:15:48 · 1880 阅读 · 0 评论 -
nuxt3 env文件、全局变量处理
通过配置nuxt.config.ts + Nuxt提供的钩子函数,实现全局变量的获取文件往放入内容通过env文件配置来获取服务端全局变量,客户端通过vite.define实现。原创 2024-01-03 13:40:42 · 1959 阅读 · 0 评论 -
js文件上传 分片上传/断点续传/极速秒传
(极速秒传)利用md5判断上传的文件是否存在 优点 服务器中不会出现重复文件 **思路是**在文件上传到服务器前,将文件进行MD5转换,然后将转换完后的MD5码传给服务器,服务器判断当前MD5码是否存在,如果存在就代表着服务器上已经有了跟该文件相同的文件,不再需要上传文件 分片上传分片上传就是把一个大文件,按照一定的大小,分割成多个小文件分别进行上传,文件上传结束后,服务器对所有的文件进行合并(前端负责拆分、后端负责整合)原创 2024-01-02 15:26:11 · 1230 阅读 · 0 评论 -
vue3响应式核心 reactivity 源码逻辑分析
当创建reactive后,会对传入对象进行proxy代理,在被订阅者使用(get)时,触发track函数 收集依赖,记录下“订阅者在这里用到当前reactive啦!”,在对象被修改(set)时,触发trigger函数 触发依赖,“要去更新所有用到当前reactive的订阅者!”......原创 2023-03-13 14:49:39 · 303 阅读 · 1 评论 -
vue 组件通信 事件处理
本文主要是通过源码了解,vue是怎样把事件传递给子组件并能够给正常调用的。首先看一个超级简单的demodemo中有一个组件,父级向里边传入了一个函数,个组件中通过调用了它,这是一个最简单的事件通信方法跳过不相干的步骤,我们从创建组件的虚拟节点处的源码开始说起想了解他的实现原理,可以拆开的整体流程,从方法下手,来看看子组件中函数调用时都做了什么(函数就是一个通过调用并抛出错误的通用函数,文章最底下会简略说明该函数)可以看到,方法实际就是找到并调用该素组中的所有方法,那我们现在的目标就是找到中的数据怎么存原创 2022-07-08 14:53:21 · 959 阅读 · 0 评论 -
vue 组件通信 props
了解props源码主要是解决两个疑问答:父组件怎么将值传递给子组件的?父组件的值更新后,子组件如何更新?我们写的节点模板会被解析并生成`render`函数,函数执行时会从父组件中获取到传参,子组件获取到传参后,会对其外层进行响应式绑定,并代理到vm上详细的说,可以从两个部分来解释,分别是父组件怎么传给子组件子组件怎么处理传过来的参数1. 父组件怎么传给子组件我们写的节点模板会被解析并生成render函数、然后通过render函数最终生成一个vnode虚拟节点,render函数大概.........原创 2022-06-10 16:54:42 · 560 阅读 · 1 评论 -
vue diff算法
vue diff算法 在vue中的实现原理,patch函数、patchVnode、updateChildren、sameVnode函数的介绍原创 2022-04-28 16:00:32 · 3672 阅读 · 0 评论 -
Vue组件的渲染流程
Vue的组件渲染、extend方法、Ctor、组件的注册流程详解原创 2022-04-24 17:30:13 · 1953 阅读 · 0 评论 -
watch与计算属性 (源码浅析)
watch与计算属性源码浅析原创 2022-03-17 13:34:19 · 1531 阅读 · 1 评论 -
Vue的响应式原理-数组处理
数组和对象处理的区别是在`class Observer{}`中开始区分的,对象的话是调用了`walk`方法进行处理,数组的话是首先执行`protoAugment`/`copyAugment`方法来“劫持”数组七种方法,然后调用`observeArray(value)`将数组中的属性循环执行`observe(item)`原创 2022-03-08 11:15:39 · 739 阅读 · 0 评论 -
Vue的响应式原理-两个创建Dep的位置
在`Vue`响应式的`class Observer`部分,我们发现会有两个部分都创建了`Dep`实例。分别为1:defineReactive创建的dep 2:Observer创建的dep,那么这两个dep到底都是干什么用的呢?原创 2022-03-03 13:32:56 · 587 阅读 · 0 评论 -
Vue的响应式原理
Vue的响应式实现主要有三块重点内容,分别为Observer、Dep、watcher。我们常说的`Object.defineProperty`就是通过`observe函数`、`Observer类`、`defineReactive函数`的递归执行实现,`defineProperty`写在`defineReactive`函数中;而数据与视图的相互绑定(数据改变页面也跟着改变),是通过`Dep类`(发布者)和`watcher类`(观察者)实现的原创 2022-03-01 10:27:14 · 958 阅读 · 0 评论 -
iframe跨域通信
iframe通信在跨域情况下,可以使用 postMessage 配合监听 onmessage 调用原创 2022-01-25 13:42:26 · 2588 阅读 · 0 评论 -
yarn add 安装指定版本
yarn add xxx 安装默认版本yarn add xxx@1.1.1 安装指定版本yarn add xxx@tag 安装特定版本在安装vue-router@4.x.x,webpack@4.x.x,webpack@3.x.x等这种需要安装特定大版本时,有两种方法,下边用安装 vue-router@4.x.x举例1. yarn add webpack@^4可以使用yarn add webpack@^4,安装package.json中显示的是"vue-router": "^4",实际安装的版本原创 2021-10-08 17:25:49 · 15288 阅读 · 0 评论 -
微信小程序获取地区code
微信小程序获取地区code (接腾讯地图)微信小程序官方文档中,有一个 wx.getLocation(点击跳转API) 接口,可以获取当前的地理位置、速度。如没有code/省市区等相关信息,我们可以对接一个腾讯地图,来获取相关信息// wx.getLocation接口示例wx.getLocation({ type: 'wgs84', // wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 success (res) { const latitud原创 2021-05-11 14:00:47 · 2567 阅读 · 1 评论 -
前端 vue 直传 华为云OBS(BrowserJS 断点续传方法)
需求:可多个文件同时上传,需要显示文件名、上传进度、上传速度,可以暂停、继续开始1、搭建OBS服务环境相关请参考官网教程 点击跳转2、下载OBS BrowserJS SDK开发包 点击跳转,引入esdk-obs-browserjs-without-polyfill-3.19.5.min.js文件import ObsClient from "../util/esdk-obs-browserjs-without-polyfill-3.19.5.min.js";3、创建OBS实例<scri原创 2021-02-23 22:53:23 · 6241 阅读 · 32 评论 -
vue 3.0 prototype 替代用法
在vue2.x中,我们想设置全局变量,可以在main文件中用prototype绑定vue实列,在vue3.0中,可以用app.config.globalProperties来代替prototype,具体用法如下// main.jsimport { createApp } from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'a原创 2020-12-14 10:15:03 · 22289 阅读 · 8 评论 -
公众号h5授权与实际中遇到的问题 - 前端
首先放上官方文档获取公众号授权可以获取到用户的openId,可以通过openId获取到用户的昵称、性别、所在地等信息获取授权的流程:首先需要用户打开或者跳转到授权页,用户点击统一后跳转到我们设置的回调页面(比如项目首页)授权后跳转回来的页面,url上会有code,我们把code传到后端,换取openId完成…1、首先是配置网页授权域名在微信公众平台中左侧菜单拉到底,选择公众号设置,然后下边有个网页授权域名,输入需要授权的域名后,不要忘了把设置页面中的文件扔给后端2、跳转授权页配置好域名原创 2020-11-11 17:35:10 · 1608 阅读 · 0 评论 -
微信公众号 h5 中 获取 微信JS-SDK
首先放上官方文档微信JS-SDK是用于调用微信提供的一些方法,比如拍照、上传图片、分享、等功能(微信虽然提供了自己的一套功能,但比如原生的上传图片、分享等功能再微信浏览器中仍然使用(实际使用体验欠佳),所以如果遇到无法兼容的问题,可以直接使用原生的方法)1、首先是绑定js安全域名,在微信公众平台中左侧菜单拉到底,选择公众号设置输入js接口安全域名,需要注意三点安全域名是要“掐头去尾”的,比如添加百度(https://www.baidu.com)要写成(www.baidu.com)不要忘记把js原创 2020-11-10 14:55:23 · 1053 阅读 · 0 评论 -
js正则 断言
创建正则字面量和实列两种创建方法var reg = /正则表达式/修饰符var reg = new RegExp(正则表达式, 修饰符)var reg = /123123123aaa.*/g// 或var val = '匹配'var reg = new RegExp('123123123aaa.*','g');修饰符i 忽略大小写匹配m 多行匹配g 全局匹配修饰符可以写多个,如/1234aaaa/img常用元字符. 匹配除\n以外的任何字符\w 匹配数原创 2020-09-18 11:11:09 · 2194 阅读 · 0 评论 -
require.context批量导入
require.context如果想引入一个文件夹中的所有(或部分)文件,可以使用require.context方法来引入使用方法require.context(“文件路径”,“是否搜素子路径Boolean”,“匹配文件的正则表达式”)返回require.context() 返回的是一个functionconst requireApi = require.context("./api",false,/\.js$/);console.log(requireApi)想要获取到require回原创 2020-09-02 21:19:13 · 620 阅读 · 0 评论 -
canvas基础
初学canvas,把基础知识整理一下创建canvas画布进来的都知道的HTML标签 <canvas></canvas>canvas画布默认有300*150的大小,建议使用canvas属性(width,height)修改canvas的大小,如果用style可能会因为比例问题导致画布被拉伸变形。渲染var canvas = document.querySelect('canvas');var context = canvas.getContext('2d');.原创 2020-09-05 13:23:12 · 349 阅读 · 0 评论 -
JS运行机制、宏任务与微任务
JS是单线程的avaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞原创 2020-08-26 22:44:12 · 210 阅读 · 0 评论 -
对象与数组遍历部分方法整理
数组for、forEach、map、filter…for of 便利出来的是value而不是keyforEach的第二个参数Array.forEach(function(item){...},ArrayThis)传入forEach的第二个参数会让function的this指向改变为第二个参数(第一个function如果为箭头函数的话则不会生效)var a = [1,2]a.forEach(function(item){console.log('this为--', this)},a)// th原创 2020-08-26 22:39:20 · 242 阅读 · 0 评论 -
浏览器问题个人记录
------------------------ 仅作为个人整理 ------------------------重绘和回流网页主要由三部分组成:结构(Structure)(HTML)、表现(Presentation)(CSS)和行为(Behavior)(JS)。浏览器渲染DOM树: 浏览器把获取到的html代码解析成1个Dom树,html中的每个节点(tag)都是Dom树中的1个节点,根节点是document对象 。dom树里面包含了所有的html标签,包括display:none隐藏,还有用JS原创 2020-08-26 22:38:27 · 185 阅读 · 0 评论 -
Promise、Generator、async/await用法
Promise、Generator、async/await都是用来解决异步编程的Promise new Promise((resolve,reject) => { if (...) { resolve() } else { reject() } }).then(res => { ... }).catch(err => { ...原创 2020-08-26 22:35:58 · 187 阅读 · 0 评论 -
JS代理-Proxy
Proxy 代理 ,在我们访问对象前添加了一层拦截,可以过滤很多操作let a = new Proxy(target, handler);target: 需要包装的对象,可以是数组、函数、class类、Proxy等handler: 传入一个对象,对target进行的具体操作以Proxy的get示例getlet obj = { val: 'aaa'}let proxyO...原创 2019-12-31 17:24:27 · 2252 阅读 · 0 评论 -
typescript文档整理
安装安装npm install -g typescript转换cmd --> tsc xxx.ts //转换为js基础操作原始数据类型let xxx: boolean = falselet xxx: number = 11let xxx: string = 'xxx'let xxx: undefined = undefinedlet xxx: null = n...原创 2019-12-31 17:21:52 · 538 阅读 · 0 评论 -
获取数组/对象的父级数组/对象
复习原生JS时做的小插件,通过递归的方法找到父级对象function getParent(parent, value, addNum) { // 在这个数组中查找, 需要找的数组/对象/字符串等, 导出该数组的第几个父级(默认第一个) function getParent1(parent, value, addNum) { num = addNum ? addNum : ...原创 2019-07-05 17:50:17 · 1776 阅读 · 0 评论 -
原生JS制作复制按钮
原生JS制作复制按钮document.querySelector('button').onclick = function() { var copyContent = document.createElement('textarea'); // copyContent.setAttribute('readonly', 'readonly'); copyContent.in...转载 2019-07-10 16:40:11 · 171 阅读 · 0 评论