Chx.zhang-优快云博客

原创【Nuxt】05 Nuxt2项目打包优化

在nuxt.config.js配置。

2023-09-27 16:44:42 2151

原创【Nuxt】04 Nuxt2-SEO： sitemap.xml、seo优化、robots.txt

在nuxt项目的static文件夹下，配置项目的静态文件，直接在static新建robots.txt即可，nuxt运行时会自动装配到根路由。注意生成sitemap依赖于@nuxtjs/sitemap，并且需要用axios进行请求，不要使用@nuxtjs/axios，不然会报错。

2023-09-27 16:42:57 1748

原创【Nuxt】03 Nuxt2 页面缓存、组件缓存、api缓存

Nuxt缓存

2023-09-27 16:41:00 2661

原创【Nuxt】02 Nuxt2项目搭建与配置、路由使用、生命周期、国际化等

Nuxt.js 是一个基于 Vue.js 的通用应用框架。本文主要介绍Nuxt的项目搭建、项目配置、开发使用，路由管理、vuex、国际化等配置。

2023-09-27 15:39:58 8848 2

原创【Uniapp】base64图片资源转为本地图片，解决canvas不支持base64问题

因为canvas不支持base64，其次在使用小程序 canvas 的 drawImage api，需要将网络图片转为本地图>片，base64不能通过uni.downloadFile这种方式下载文件资源到本地，所以在真机上，无法正常显示海>报。通过接口获取到base64类型的二维码，把二维码放到canvas里生成海报。在微信小程序开发工具中能够正常显示海报，到真机上测试就无法显示二维码。

2023-08-17 14:07:09 2191

原创【Uniapp】三、生命周期及路由

Uniapp生命周期，页面路由及传参，项目分包

2023-01-19 17:16:31 3231

原创【Uniapp】一、 UniAPP框架基本信息

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS，Android，H5，以及各种小程序（微信/支付宝/百度/头条/ QQ /钉钉）等多个平台。

2023-01-19 16:38:17 5079

原创【JavaScript数据结构与算法】二、队列及leetcode实战

队列是遵循先进先出（FIFO，也称为先来先服务）原则的一组有序的项。队列在尾部添加新元素，并从顶部移除元素。最新添加的元素必须排在队列的末尾

2022-08-25 11:40:16 1131

原创【JavaScript数据结构与算法】一、栈及leetcode实战

栈是一种遵从后进先出（LIFO）原则的有序集合。新添加或待删除的元素都保存在栈的同一端，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底。

2022-08-24 16:13:32 1048

原创【微信小程序】腾讯位置服务地图选点服务示例

在腾讯公众平台中， “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”，搜索 “腾讯位置服务地图选点” 申请添加，通过则可在小程序内使用该插件。地图选点appId： wx76a9a06e5b4e693e。

2022-08-24 13:35:00 1912

原创【JavaScript】过了一年，懒癌患者终于整理了一下『手写Promise 语法糖』

除了 then 方法以外还有◾ 以及目前 Promise 规范的下面来实现一下。将给定的一个值转为Promise对象。"then"resolve()测试通过！！！方法返回一个带有拒绝原因的Promise对象。测试通过！！！catch()方法返回一个Promise，并且处理拒绝的情况。它的行为与调用相同。事实上, calling内部calls。(这句话的意思是，我们显式使用，内部实际调用的是)方法是或的别名，用于指定发生错误时的回调函数。就一行代码，我的天，居然这么简单！！！！！！...

2022-08-08 15:52:20 1024

原创【JavaScript】过了一年，懒癌患者终于整理了一下『手写Promise A+』

如果是异步回调，那么保存的成功失败的回调，需要用不同的值保存，因为都互不相同。红框的细节，我们都没有处理，这里要求判断 x 是否为 object 或者 function，满足则接着判断 x.then 是否存在，这里可以理解为判断 x 是否为 promise，这里都功能实际与我们手写版本中。主线程代码立即执行，setTimeout 是异步代码，then 会马上执行，这个时候判断 Promise 状态，状态是 Pending，然而之前并没有判断等待这个状态。我们先简单实现一下 Promise 的基础功能。...

2022-08-08 15:48:55 1144

原创【HTML】前端必须要知道的html中的meta标签，有哪些属性？

meta标签的自定义属性实在太多了。所以只总结了一些常用的，希望对大家有所帮助。

2022-07-18 14:58:48 5227

原创【JavaScript】JS高频手写汇总

基本上面试的时候，经常会遇到手撕XXX之类的问题，这次准备梳理总结一遍，巩固我们原生JS基础的同时，下次想复习面试手撕题的时候，找起来方便，也节省时间。事件委托这里就不阐述了，比如给li绑定点击事件看错误版，(容易过的，看**「面试官水平了」**)👇**「有个小bug，如果用户点击的是 li 里面的 span，就没法触发 fn，这显然不对」**👇这样子的场景就是不对的，那我们看看高级版本👇codepen效果地址：https://codepen.io/zhangchenxus/pen/mdXorg...

2022-07-12 16:39:13 1585

转载【Javascript运行机制】浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

【转载原文地址】见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。———-超长文+多图预警，需要花费不少时间。———-如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。———-正文开始———-最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料，

2022-07-01 11:17:48 1225 1

原创【JavaScript】try-catch-finally 执行逻辑，及是否包含 return的影响

- `catch` 异常会覆盖 `try` 的异常和 `return`- `catch` 的 `return` 覆盖 `try` 的异常和 `return`- `finally` 的异常覆盖 `try/catch` 的异常和 `return`- `finally` 的 `return` 覆盖 `try/catch` 的异常和 `return`- `try/catch/finally` 块中异常或 `return` 之后的代码不会被执行...

2022-06-16 13:50:22 1384

原创【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY

鼠标事件 MouseEvent

2022-06-15 10:59:45 1379

原创【git撤销操作】git reset详解

许多时候，在用的时候有可能提交代码后，发现这一次的内容是有错误的，那么可以用git reset进行操作撤回，且无新增commit_id 有三种工作模式，即、(默认方式) 和。要放弃目前本地的所有改变时，即去掉所有到暂存区的文件和工作区的文件，可以执行来强制恢复 git 管理的文件夹的內容及状态；抛弃目标节点后的所有（可能觉得目标节点到原节点之间的提交有问题）。原节点和节点之间的差异变更集会放入暂存区中()，所以假如我们之前工作目录没有改过任何文件，也没到暂存区，那么使用

2022-06-07 09:58:12 9538

原创【Vue3源码学习】响应式 api: watchEffect | watch 的实现原理

在 Vue2中watch 是 option 写法中一个很常用的选项，使用它可以非常方便的监听一个数据源的变化，而在 Vue3 中watch 独立成了一个响应式api。源码地址：packages\runtime-core\src\apiWatch.tswatchEffect由于 watch中的许多行为都与 watchEffect 一致，所以 watchEffect 放在首位讲解，为了根据响应式状态自动应用和重新应用副作用，我们可以使用 watchEffect 方法。它立即执行传入的一个函数，同时响应式

2022-03-04 15:47:14 2295

原创【Vue3源码学习】响应式api: computed

computed 是组件的计算属性，它的含义是依赖于其他状态而生成的状态，与响应式紧密相关。

2022-03-03 17:41:34 2607

原创【Vue3源码学习】响应式源码解析：reactive、effect、ref

源码版本 Vue3.2.24废话不多说，直接开始！！！reactive响应式源码地址：packages/reactivity/reactive.ts先看一下在 Vue3 中定义的几个用来标记目标对象 target 的类型的ReactiveFlags，下面先是枚举的属性export const enum ReactiveFlags { SKIP = '__v_skip', IS_REACTIVE = '__v_isReactive', IS_READONLY = '__v_isReado

2022-03-01 10:39:37 2249

原创【VUE2源码学习】响应式原理：从数据侦听、依赖收集到触发更新

在 new Vue 初始化的时候，在组件初始化时调用 initState() 方法 -> initProps() 方法 -> initData()方法对组件内的数据 props、data进行响应式处理，别用到了、defineReactive 、observe 方法。接下来就以此为切入口进行介绍。响应式数据观测observe() 为数据添加监测源码地址：src/core/observer/index.js - 110行如果是 vnode 的对象类型或者不是引用类型，就直接跳出否则就给

2022-02-22 15:50:14 430

原创【VUE2源码学习】nextTick 实现原理

什么是nextTick?定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM看完是不是有一堆问号？我们从中找出来产生问号的关键词下次 DOM 更新循环结束之后是什么时候?执行延迟回调?更新后的 DOM?我们从上面三个疑问大胆猜想一下vue 更新DOM是有策略的，不是同步更新nextTick 可以接收一个函数做为入参nextTick 后能拿到最新的数据那么nextTick 是怎么做到的呢？这涉及到了 js 的执行机制。JS

2022-02-21 10:04:14 1471

原创【VUE3源码学习】nextTick 实现原理

什么是nextTick?定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

2022-02-15 16:36:44 4439 1

原创 VUE源码学习

索引规划CreateApp时发生了什么？“虚拟节点”的生成响应式编译APInexttickVUE3源码整体目录结构Vue3 源码的架构：├── .circleci // CI 配置目录├── .ls-lint.yml // 文件命名规范├── .prettierrc // 代码格式化 prettier 的配置文件├── CHANGELOG.md // 更新日志├── LICENSE├── README.md├── api-extractor.json // TypeS

2022-02-09 16:49:36 635

原创【VUE3源码学习】Vue3在CreateApp时，做了什么？

CreateApp时发生了什么？写在前面每个 Vue 应用都是通过用createApp函数创建一个新的应用实例开始的，一般在Vue项目中main.js进行实例化：const app = Vue.createApp({ /* 选项 */ data() { return { count: 4 } }})app.use(store).use(router).mount('#app')传递给 createApp 的选项用于配置根组件。当我们挂载应用时，该组件被用作渲染的起点。

2022-02-09 16:48:22 1797

原创【JavaScript】Set、Map、WeakSet、WeakMap

Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构那什么是集合？什么又是字典呢？集合集合，是由一堆无序的、相关联的，且不重复的内存结构【数学中称为元素】组成的组合字典字典（dictionary）是一些元素的集合。每个元素有一个称作key 的域，不同元素的key 各不相同那么集合和字典又有什么区别呢？共同点：集合、字典都可以存储不重复的值不同点：集合是以[值，值]的形式存储元素，字典是以[键，值]的形式存储Set、Map、WeakSet、WeakMap对比

2022-02-08 16:08:21 131

原创【浏览器】浏览器缓存

一浏览器缓存机制浏览器在每次发生请求时，先在在浏览器缓存中查找该请求的结果和缓存标识，并且每次收到请求结果均会把请求结果和缓存标识保存在浏览器缓存中。浏览器缓存策略分类缓存策略的分类：强缓存：不会向服务器发送请求，直接从缓存中读取资源。协商缓存：强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程缓存策略通过设置HTTP Header来实现的。-获取资源形式状态码发送请求到服务器相关设置字段强缓存从缓存取200（f

2022-01-29 15:38:52 2131

原创【微信小程序】下拉刷新、上拉加载实现记录

一、下拉刷新1、下拉刷新：由于小程序数据是实时渲染的。我们把data{}内的数据清空重新加载即可实现下拉刷新2、页面配置：允许页面进行下拉刷新动作： { "enablePullDownRefresh": true }3、使用的page属性：onPullDownRefresh: Function(){} 页面相关事件处理函数–监听用户下拉动作4、实现示例： //刷新 onRefresh(){ //在当前页面显示导航条加载动画

2022-01-19 14:46:57 3897

原创【Nodejs】基于Koa2写一个后端Api服务

koa是express的原班人马开发的，在一些方面优于express，已经从koa到koa2的升级，应该说是比较成熟的了。根据现在的技术实现方案，现在大部分的web服务基本都是前后端分离模式的，所以koa2的让web应用开发和api的使用更加简便优势，更值得我们去学习。本文只简单介绍将环境搭建起来，可以让初次学习koa或者web应用的同学能够更快的看到学习成果，增加学习的自信心，其中涉及到的很多的知识和技术点，我们后续补充，不在本文做过多的阐述本文的目的就是做知识的普及，文中可能会有些代码是从网络中复

2022-01-14 13:38:45 1942 1

小程序echarts折线图示例

浏览器缓存机制 mindMaster脑图与visio流程图

koaApi源码示例项目

HaiKangWeb监控.vue

空空如也