- 博客(27)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 vue3中h函数的使用
需要注意的是，我们这里的 comp 是一个 vnodes ，而 setup 函数并不是响应式的环境，所以当我们在 setup 函数中调用 h 函数来获取 vnodes 时，h函数是用于创建一个 vnodes ，它既可以用于创建原生元素，也可以创建组件，其渲染后的效果等同于使用模版语言来进行创建。我们可以看到 slots 其实是一个对象，键是插槽的名字，值其实就是一个 渲染函数 h()，这里使用的是一个批量注册的方式导入 HelloWorld 组件，Comp 是一个全局组件。
2024-06-22 11:59:18
2565
1
转载 不要再写满屏import导入啦！
密密麻麻的import语句不仅仅是一种视觉上的冲击，更是对代码组织结构的一种考验。我们是如何做到让import“占领满屏“的了，又该如何优雅地管理这些import语句呢？本文将从产生大量import语句的原因、可能带来的问题以及如何优化和管理import语句几个角度来进行探讨。
2024-05-11 00:32:01
128
原创 适合前端开发学习的 7个 UI 设计实用技巧
如果你设计的东西需要用到一些大图标（比如着陆页的 “功能 ”部分），你可能会本能地抓取一个免费图标集，比如 Font Awesome 或 Zondicons，然后将大小调大，直到符合你的需求。大多数页面只有一个真正的主要操作，几个不太重要的次要操作，以及几个很少使用的三级操作。有一个简单的小窍门可以带来很大的不同，那就是在界面的某些部分添加色彩鲜艳的重点边框，否则这些部分就会显得有些平淡无奇。虽然边框是区分两个元素的好方法，但它并不是唯一的方法，而且使用过多的边框会让你的设计感觉忙碌而杂乱。
2024-05-05 17:53:13
1875
原创 Uniapp开发App离线资源查看实现（兼容安卓、ios）
查看具体某个文件时，需要检查当前是 IOS 还是安卓，IOS 使用 html5Plus 进行解压，安卓系统需要使用 zip4j（需要到插件市场安装） 进行解压,获取到解压后路径直接打开即可。调用 uni.downloadFile 获取文件临时存放路径，再用 uni.saveFile 保存文件到本地，拿到文件存放的本地路径。业务场景：对于多种资源类型（图片、视频、scrom、office等）需要在离线状态下，通过移动端缓存可查看资源。3、查看资源时通过缓存找到相应的本地路径，通过解压获取到相对应的资源。
2024-04-21 15:42:24
643
1
原创 Next.js（五）中间件
使用 Middleware 的时候还要注意一点，那就是目前 Middleware 只支持 Edge runtime，并不支持 Node.js runtime。/about/:path* 匹配 /about、/about/xxx、/about/xxx/xxx。/about/:path+ 匹配 /about/xxx、/about/xxx/xxx。/(about|settings) 匹配 /about 和 /settings。匹配 /about、/about/xxx。
2024-04-20 21:02:50
884
原创 webpack3项目启动优化
项目太大了，启动速度很慢，可以配置 HardSourceWebpackPlugin ，通过缓存第一次启动的内容，接下来的速度大幅提升。
2024-04-13 01:12:52
264
原创 Next.js（四）定义路由程序
这里有个知识点，不用revalidate/next.revalidate，在开发模式下使用 fetch，也会被缓存，因为 next.js 拓展了原生的 fetch 方法。该文件需要放在 app 文件夹下，但不能与 page.js 统计，因为请求接口也是用文件路径，不用加上route.js，会与 page.js 起冲突。10s 后，比如 12s 刷新，不会马上更新树枝，而是触发更新，然后，比如 13s 再请求，才会更新数据。Next.js 中的路由程序，实际上就是 API 接口。
2024-04-11 00:30:31
711
原创 一道大厂面试题讲透JS事件循环输出
4）接下来执行了async()，可以看到这里用到的async/await，await之前的“async1 start”正常输出，但由于await引起的阻塞，会转入async2()执行，输出“async2”，await后的输出全部推进微任务的队列里；8）微任务队列清空后，接着执行宏任务队列，输出“setTImeout0”，执行完一个宏任务后，找到之前的“setImmediate”输出，接着执行下一个宏任务“setTimeout3”事件循环输出的题目是笔试常考了，掌握几种情况下的推导思路，其实不算困难。
2024-04-07 23:24:39
312
原创 Next.js（三）导航与路由
拦截路由的意义，简单的来说，就是希望用户继续停留在重要的页面上。与[...folderName]不同的是，不带参数的路由也会被匹配到，及可以匹配/dashboard，前提是没有映射的文件路径/dashboard/page.js，如果存在此路径，使用[[...folderName]]就会报错。拦截路由感觉上就是页面上的交互都是用“假的”路由下的页面的内容，即 app/(.)photo/[id]/page.js ，只有复制地址到地址栏打开才是真正的页面，即 app/photo/[id]/page.js。
2024-04-06 22:49:00
2331
1
原创 Next.js（二）App Router的使用
原理：loading 用 <Suspense> 把 page 和 promise 包裹住，当Suspense 捕获到 promise（可以用aysnc 和 use函数获取（React的use函数，用于读取promise或者context的值）） 返回的数据时，关闭 fallback。（2）App架构新增了布局（layout）、模版（template）、加载状态（loading）、错误处理（error）、404（not-found）等文件，为项目开发提供了一套规范。根布局：app文件夹下的布局。
2024-04-06 08:37:58
1858
原创 Next.js（一）创建一个Next.js项目
Next.js 的项目架构有两种方式：App Router 和 Pages Router。这里我们采用 App Router 来搭建项目，首先创建 app 文件夹，再在文件夹下创建 layout.js 文件和 page.js 文件。使用 npm next build --profile 可以开启 React 的生产性能分析，然后输入 npm run start ，就可以在 Profiler 中监测性能。（Next.js 同样支持 .ts、.tsx、.jsx）一、创建 Next.js 项目。
2024-04-06 04:53:16
1311
原创 小程序多文件上传
解决方案：通过获取到临时上传文件路径通过循环forEach调用uploadFile，因为uploadFile的path只能是String类型的。
2024-04-02 09:44:21
206
原创 懒加载下el-cascader级联选择器实现回显
ElementUI中级联选择器如果是懒加载模式下，单纯赋值级联的数组是没办法回显的，因为无法获取下一级的数据。记录一下遇到此场景的一种解决方案。
2024-03-15 00:10:33
2283
原创 实现Watcher类
实现方式主要是通过建立Dep类和Watcher类，通过实例化Dep类对象分别对每个监听的变量的回调方法进行收集，从而在setter方法（即改变值时调用Dep实例对象），调用各自watcher的回调函数。因为是在实例化对象时就定义好的，说明实例化时就已经完成了watch的收集，需要在Vue类中直接定义并调用initWatch。Watcher类其实就是观察者，如果某个变量被定义了监听方法时，就会去new一个Watcher。显然，$watch方法是挂载在Vue的实例对象vm上的，所以需要在Vue类中进行定义。
2023-04-09 23:19:25
145
原创 Object.defineProperty的使用和介绍
configurable：是否可以删除目标属性或者是否可以再次修改属性的特性（writable，configurable，enumerable）。设置为 false 不能被删除或不可以重新设置特性。设置为false，不能被枚举。writable：是否可以被重写，true可以重写，false不可以重写，默认为false。getter：当访问该属性时，该方法就会被执行。setter：当属性值修改时，该方法就会被执行。: 被定义的属性的值，默认为undefined。prop: 必需，需定义或者修改的属性的名字。
2023-04-05 23:05:16
172
1
原创 JQuery实现放大镜
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Docume...
2020-02-13 15:32:05
577
1
原创 9.11课堂遗留问题
问：当子类继承父类后，子类中的方法，在父类中进行重载，那么在运行时是调用子类中的该方法还是父类中的该方法？例子：public class LessonProblem { void test(int x) { System.out.println("01 " +x); } public static void main(String...
2018-09-11 15:35:31
210
原创 Linux环境下curl未安装和升级
现象：无法使用curl传输命令，显示“Command not found”puTTY下：Finalshell下：原因：新下载的puTTY和Finalshell都没有安装curl解决方法：输入指令：apt-get install curl -y && yum install curl –y 和...
2018-08-15 04:38:39
3059
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人