joken-前端工程师

  :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::

2024年7月2日

摘要: 常见配置参考 { "editor.fontSize": 20, // 编辑器字体大小 "terminal.integrated.fontSize": 18, // terminal 框的字体大小 "editor.tabSize": 2, // Tab 的大小 2个空格 "editor.formatO 阅读全文
posted @ 2024-07-02 22:45 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 设置里面搜索typescript:validate 既可打开或者关闭ts语法错误提示 阅读全文
posted @ 2024-07-02 22:39 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: tsconfig.json "compilerOptions": { "incremental": true, // TS编译器在第一次编译之后会生成一个存储编译信息的文件,第二次编译会在第一次的基础上进行增量编译,可以提高编译的速度 "tsBuildInfoFile": "./buildFile" 阅读全文
posted @ 2024-07-02 22:37 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

2024年7月1日

摘要: 代码示例 可以通过ref变量实现绑定$ref,或者getCurrentInstance来获取$refs /** * $ref 使用方式,变量名和组件的属性ref值一致 */ const hChildRef = ref() console.log(hChildRef, "hChildRef") con 阅读全文
posted @ 2024-07-01 22:32 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

2024年6月30日

摘要: debounce 防抖使用示例 代码 import {debounce,DebouncedFunc} from "lodash" const myDebounce:DebouncedFunc<(a:string)=>{}>=debounce((a)=>{ console.log(a,"debounc 阅读全文
posted @ 2024-06-30 23:44 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 概论 代码测试 // 普通数组 let uuy:Array<number>; uuy=[23,23423,23423423] let uud:[] // let uua:array; //报错,不能这样声明数组 //从右往左是越子级内容 let uuv:number[][] //二维数组 uuv=[ 阅读全文
posted @ 2024-06-30 23:29 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 概论 Symbol 是a56爆大奖在线娱乐用于创建唯一标识符的原始数据类型。 Symbol 通常用作对象属性的键,以避免属性名冲突。 Symbol.for() 可以在全局 Symbol 注册表中创建或查找 Symbol。 内置 Symbol 用于定义语言级别的行为和协议。 Symbol 属性与普通属性的区别 Sym 阅读全文
posted @ 2024-06-30 23:21 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 概论 在TypeScript中,object类型是一个非原始类型的标志,a56爆大奖在线娱乐任何不是number、string、boolean、symbol、null或undefined的值。因此,object类型本身不允许null或undefined的赋值。 Object 和 {} 类型等同,object 是ts 阅读全文
posted @ 2024-06-30 22:32 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

2024年6月25日

摘要: 安装 yarn add unplugin-auto-import vite配置 // vite.config.js export default defineConfig({ plugins: [ vue(), AutoImport({ // 自动导入 Vue 相关函数,如:ref, reactiv 阅读全文
posted @ 2024-06-25 23:00 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

摘要: 报错内容 error An unexpected error occurred: "EPERM: operation not permitted, unlink 'C:\\Users\\zhouc\\Desktop\\临时工作区\\vue3-ts\\vue3-init\\node_modules\\ 阅读全文
posted @ 2024-06-25 22:40 joken1310 阅读(18) 评论(0) 推荐(0) 编辑

2024年6月24日

摘要: 代码 联合类型、交叉类型 //联合类型 type abcNewType = string | number; type abcNewType2 = "a" | "b" | "c"; interface a1 { a: string } interface a2 { b: string } //交叉类 阅读全文
posted @ 2024-06-24 22:12 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

摘要: 代码 interface 方式 interface myFn7 { (a: string, b: string): string; } let myFn7Demo: myFn7 = function (a: string, b: string): string { return a + b; } c 阅读全文
posted @ 2024-06-24 20:51 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 概论 declare是声明全局类型的a56爆大奖在线娱乐方式 declare 关键字用来告诉编译器,某个类型是存在的,可以在当前文件中使用。 测试代码 测试了type 和 function 声明代码 declare type myGlobalNumber=number; //注意这里的function 是个值,不是 阅读全文
posted @ 2024-06-24 20:36 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

2024年6月23日

摘要: 概论 provide 就是父类用来提供数据给子类或者孙子类 inject 就是子类或者孙子类用来获取父类或者祖先提供的provide数据 代码 app.vue 祖先层 <template> <header> <img alt="Vue logo" class="logo" src="@/assets 阅读全文
posted @ 2024-06-23 22:41 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

2024年6月17日

摘要: uni代码实现 export function startAndroidActivity() { const { activety, pakeage } = externalApp;//pakeage 就是唤起app包名,activety 就是唤起的页面 let Intent = plus.andr 阅读全文
posted @ 2024-06-17 19:41 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 唤起微信支付核心代码 async weixinPayApp() { const self = this; let postApi = ''; if (this.checkWexin) { postApi = 'getOpenWeixinSignOrderInfo'; } else if (this. 阅读全文
posted @ 2024-06-17 19:27 joken1310 阅读(8) 评论(0) 推荐(0) 编辑

摘要: 安装 安装上面这个插件后,会提示登录,可以使用github在线地址登录。 代码提示 代码指令使用 侧边栏功能 总结 tabnine vscode插件就是一款代码ai自动补全的插件,侧边栏还可以进行代码解释、修正等功能。 阅读全文
posted @ 2024-06-17 16:23 joken1310 阅读(9) 评论(0) 推荐(0) 编辑

2024年6月12日

摘要: 概论 主要是有一个微前端的主权项目,实现对微服务的调用,类似iframe显示,父应用和子应用可以通过一些数据通信方式实现数据通信。 代码 微前端注册 import Vue from 'vue' import App from './App.vue' import { registerMicroApp 阅读全文
posted @ 2024-06-12 20:47 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

摘要: 示例代码 interface mybasic { one: string, two: string, three: number, four: string } console.log("myts-demo") // 排除参数属性 interface my1 extends Omit<mybasic 阅读全文
posted @ 2024-06-12 17:24 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

摘要: 下面分别是ref普通基本数据,下面是ref对象数据 _rowValue 是原始数据,_value 是操作数据也就是代理数据 阅读全文
posted @ 2024-06-12 13:39 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 示例代码 App.vue <template> <header> <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" /> <div class="wrapper"> <HelloWorl 阅读全文
posted @ 2024-06-12 13:19 joken1310 阅读(6) 评论(0) 推荐(0) 编辑

2024年6月7日

摘要: 顺序 执行顺序:父组件先创建,然后子组件创建;子组件先挂载,然后父组件挂载,即“父beforeCreate-> 父create -> 子beforeCreate-> 子created -> 子mounted -> 父mounted”。 在单一组件中,钩子的执行顺序是beforeCreate-> cr 阅读全文
posted @ 2024-06-07 16:41 joken1310 阅读(25) 评论(0) 推荐(0) 编辑

2024年6月5日

摘要: 接口数据查看,业务方式查看 给角色分配路由权限,然后路由信息上meta就会有哪些角色可以访问的数组。就是说一个路径,哪些角色可以访问,都在meta下的roles里面保存着 接着用户角色分配 前端代码实现 核心代码 通过用户信息上用户的角色数组和路由meta上的角色数组是否包含用户角色,来过滤用户是否 阅读全文
posted @ 2024-06-05 21:55 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

摘要: 概述 总体这个项目前端使用vue2,后端使用spring boot git地址 https://github.com/elunez/eladmin-mp 预览地址 https://eladmin.vip/demo/#/sys-tools/generator 数据表配置 低代码下载 生成后的前端代码示 阅读全文
posted @ 2024-06-05 18:33 joken1310 阅读(5) 评论(0) 推荐(0) 编辑

摘要: 参考文章 /fadeache/p/17777581.html https://blog.csdn.net/Ed7zgeE9X/article/details/118662575 先安装GoGoCode npm install gogocode-cli - 阅读全文
posted @ 2024-06-05 18:15 joken1310 阅读(8) 评论(0) 推荐(0) 编辑

2024年6月4日

摘要: 概论 主要是通过一个唯一标识name或者id来过滤判断用户所处的角色是否有路由的权限或者按钮的权限 一般路由都有一个一个name可以作为唯一标识 一般按钮的话,可以自定义一个name作为标识 业务逻辑 后台通过选中路由或者按钮给角色,代表这个角色有数组中name[]的权限,用户或者部门再绑定角色,实 阅读全文
posted @ 2024-06-04 22:03 joken1310 阅读(4) 评论(0) 推荐(0) 编辑

2024年6月3日

摘要: 概述 requestAnimationFrame 是根据帧数来执行回调函数的,就是屏幕一帧,那 requestAnimationFrame就会执行一次。一般屏幕是60帧,也就是一秒执行60次回调函数. 性能相对定时器settimeout好,因为定时器执行权限在同步任务 微任务之后,会受到其他任务影响 阅读全文
posted @ 2024-06-03 21:27 joken1310 阅读(4) 评论(0) 推荐(0) 编辑

摘要: 需要使用谷歌浏览器的无痕模式 要不然其他浏览器插件的脚本会影响页面的性能判断 使用截图 操作界面 点击分析按钮开始分析 生成分析 建议部分:红色是有必要解决的性能提升建议 红色建议分析: 静态资源大小分析图 点击下面按钮 看到如下静态资源页面 lighthouse文档 文档地址: https://d 阅读全文
posted @ 2024-06-03 20:53 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 截图 黄色指的是js执行 紫色指的浏览器渲染 一般只需要看 js 和 render 这2个就行,其他不用看,并从这2个中看出哪里的代码导致阻塞线程比较久。 main线程推测 main线程就是浏览器的主线程,主要负责浏览器的渲染和js代码执行,由此可见,浏览器用于渲染和js执行是一个线程,也就是主线程 阅读全文
posted @ 2024-06-03 16:47 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

摘要: 概述 重绘指的是元素重新绘制,一般性能消耗很小,不用在意,一般修改颜色或者虚拟隐藏都是重绘 回流指的是修改元素宽高或者位置或者获取元素宽高位置等都是回流,性能消耗较大。 重绘(repaint):元素样式改变不影响布局 回流(reflow):也叫重排,当元素的尺寸、结构变化或触发某些属性时,浏览器会重 阅读全文
posted @ 2024-06-03 15:51 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 总论 1、js一个tab就是一个进程,这个tab下会有多个线程,主要是主线程、渲染线程、js线程、网络线程资源池; 2、js引擎线程通过dom 之类的api和渲染线程沟通和控制渲染线程的一些页面显示; 3、实际上权威的说法是js引擎和渲染都是在一个线程上执行的,通过dom api之类的沟通,都是在主 阅读全文
posted @ 2024-06-03 00:30 joken1310 阅读(8) 评论(0) 推荐(0) 编辑

摘要: 示意图 理解 事件执行队列执行的顺序首先是同步任务队列,其次是微任务队列、再其次是宏任务队列 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt 阅读全文
posted @ 2024-06-03 00:14 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

2024年6月2日

摘要: 安装依赖 npm install element-plus --save 引入依赖 import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App fr 阅读全文
posted @ 2024-06-02 22:01 joken1310 阅读(7) 评论(0) 推荐(0) 编辑

摘要: <script setup> import Mock from "mockjs" let { data } = Mock.mock({ 'data|10-20': [{ 'employeeNo|245-543': 1, name: '@cname', 'password|+1': 123456 }] 阅读全文
posted @ 2024-06-02 21:53 joken1310 阅读(3) 评论(0) 推荐(0) 编辑

摘要: 使用命令初始化 npm init vue@latest 初始化成功后项目截图 具备了store router,还有ts的功能等 阅读全文
posted @ 2024-06-02 21:02 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

摘要: // 生成多少个yield 就能被for of 遍历多少次 function* mytest() { for (let i = 0; i < 5; i++) { yield Math.random(10) * 1000 } } // for of 会迭代生成器里面所有的yield ,有多少个yiel 阅读全文
posted @ 2024-06-02 18:13 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: const params = new URLSearchParams();//实现js参数转urlcode编码,直接可以传到url去请求 params.append('param1', 'value1'); params.append('param2', 'value2'); console.log 阅读全文
posted @ 2024-06-02 18:03 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: // 生成多少个yield 就能被for of 遍历多少次 function* mytest() { for (let i = 0; i < 5; i++) { yield Math.random(10) * 1000 } } // for of 会迭代生成器里面所有的yield ,有多少个yiel 阅读全文
posted @ 2024-06-02 17:28 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

摘要: 实现代码 Object.prototype[Symbol.iterator] = function () { let keys = Object.keys(this); let index = 0; return { next: () => { return { value: this[keys[i 阅读全文
posted @ 2024-06-02 16:26 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

2024年6月1日

摘要: vite配置 上面jsx插件搞好就能在vue项目中使用jsx写法了 代码尝试 ChildWorld.vue <script lang="tsx"> import { defineComponent, defineProps } from "vue" const childAbc = () => { 阅读全文
posted @ 2024-06-01 23:49 joken1310 阅读(7) 评论(0) 推荐(0) 编辑