joken1310 - 博客园

vue2 升级vue3 方式，通过GoGoCode cli编译为vue3代码

摘要：参考文章 https://www.cnblogs.com/fadeache/p/17777581.html https://blog.csdn.net/Ed7zgeE9X/article/details/118662575 先安装GoGoCode npm install gogocode-cli - 阅读全文

posted @ 2024-06-05 18:15 joken1310 阅读(195) 评论(0) 推荐(0)

vue后台用户路由权限和按钮权限实现原理

摘要：概论主要是通过一个唯一标识name或者id来过滤判断用户所处的角色是否有路由的权限或者按钮的权限一般路由都有一个一个name可以作为唯一标识一般按钮的话，可以自定义一个name作为标识业务逻辑后台通过选中路由或者按钮给角色，代表这个角色有数组中name[]的权限，用户或者部门再绑定角色，实阅读全文

posted @ 2024-06-04 22:03 joken1310 阅读(480) 评论(0) 推荐(0)

requestAnimationFrame使用介绍

摘要：概述 requestAnimationFrame 是根据帧数来执行回调函数的，就是屏幕一帧，那 requestAnimationFrame就会执行一次。一般屏幕是60帧，也就是一秒执行60次回调函数. 性能相对定时器settimeout好，因为定时器执行权限在同步任务微任务之后，会受到其他任务影响阅读全文

posted @ 2024-06-03 21:27 joken1310 阅读(1524) 评论(0) 推荐(0)

谷歌浏览器Lighthouse网页性能分析工具使用

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

posted @ 2024-06-03 20:53 joken1310 阅读(184) 评论(0) 推荐(0)

浏览器 performance 测试页面性能，查看阻塞代码

摘要：截图黄色指的是js执行紫色指的浏览器渲染一般只需要看 js 和 render 这2个就行，其他不用看，并从这2个中看出哪里的代码导致阻塞线程比较久。 main线程推测 main线程就是浏览器的主线程，主要负责浏览器的渲染和js代码执行，由此可见，浏览器用于渲染和js执行是一个线程，也就是主线程阅读全文

posted @ 2024-06-03 16:47 joken1310 阅读(168) 评论(0) 推荐(0)

浏览器重绘和回流重排，浏览器渲染（render）和绘制（painting）过程

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

posted @ 2024-06-03 15:51 joken1310 阅读(125) 评论(0) 推荐(0)

浏览器渲染引擎线程和js执行引擎线程的关系

摘要：总论 1、js一个tab就是一个进程，这个tab下会有多个线程，主要是主线程、渲染线程、js线程、网络线程资源池； 2、js引擎线程通过dom 之类的api和渲染线程沟通和控制渲染线程的一些页面显示； 3、实际上权威的说法是js引擎和渲染都是在一个线程上执行的，通过dom api之类的沟通，都是在主阅读全文

posted @ 2024-06-03 00:30 joken1310 阅读(392) 评论(0) 推荐(1)

浏览器事件循环 event loop，同步任务微任务宏任务

摘要：示意图理解事件执行队列执行的顺序首先是同步任务队列，其次是微任务队列、再其次是宏任务队列测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt 阅读全文

posted @ 2024-06-03 00:14 joken1310 阅读(60) 评论(0) 推荐(0)

vue3 使用element plus 方式

摘要：安装依赖 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 阅读(223) 评论(0) 推荐(0)

vue3 项目初始化npm init vue@latest

摘要：使用命令初始化 npm init vue@latest 初始化成功后项目截图具备了store router，还有ts的功能等阅读全文

posted @ 2024-06-02 21:02 joken1310 阅读(218) 评论(0) 推荐(0)

js 一些常见新语法实践测试

摘要： es6新语法解构赋值和剩余参数优化 // 对象解构赋值和剩余参数 let abcvdf = { a: 'sdfsdf', b: "sdlfjslfdsf", c: "sdfksjlfdsd" }; // 使用解构赋值获取对象的属性 const { a, b, c } = abcvdf; conso 阅读全文

posted @ 2024-06-02 18:13 joken1310 阅读(52) 评论(0) 推荐(0)

URLSearchParams使用实践，URLSearchParams实现url参数字符转js对象，获取属性等功能

摘要： const params = new URLSearchParams();//实现js参数转urlcode编码，直接可以传到url去请求 params.append('param1', 'value1'); params.append('param2', 'value2'); console.log 阅读全文

posted @ 2024-06-02 18:03 joken1310 阅读(145) 评论(0) 推荐(0)

js生成器使用测试，生成器使用测试

摘要： // 生成多少个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 阅读(38) 评论(0) 推荐(0)

Object 对象实现for of 迭代遍历

摘要：实现代码 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 阅读(43) 评论(0) 推荐(0)

vue3 vite 项目tsx写法尝试，vue vite 如何实现tsx语法的使用，tsx父子事件和数据传递

摘要： vite配置上面jsx插件搞好就能在vue项目中使用jsx写法了代码尝试 ChildWorld.vue <script lang="tsx"> import { defineComponent, defineProps } from "vue" const childAbc = () => { 阅读全文

posted @ 2024-06-01 23:49 joken1310 阅读(361) 评论(0) 推荐(0)

ts 装饰器测试，ts 4种装饰器的使用，ts 装饰器的使用

摘要： interface mycbdInterface { alert(name: string): void, one?: string } //函数装饰器 const myconsole: MethodDecorator = (...rest) => { console.log(rest, "rest 阅读全文

posted @ 2024-06-01 20:33 joken1310 阅读(72) 评论(0) 推荐(0)

vue3 状态管理库pinia使用测试，pinia数据状态库的基本用法

摘要： Home.vue 组件中使用测试 <template> <div class="home"> <div> fone:{{ fone }} </div> <div> ftwo:{{ ftwo }} </div> <div> ffour:{{ ffour }} </div> <div> ffive:{{ 阅读全文

posted @ 2024-06-01 16:08 joken1310 阅读(115) 评论(0) 推荐(0)

vue3 语法测试，vue3中的常用api hooks等使用

摘要： Home.vue <template> <div class="home"> <div> {{ fone }} </div> <div> {{ ftwo }} </div> <div> {{ ffour }} </div> <div> {{ ffive }} </div> <HelloWorld @ 阅读全文

posted @ 2024-05-31 21:15 joken1310 阅读(93) 评论(0) 推荐(0)

js 原型继承法

摘要：主要是通过子类的prototype直接拷贝一份父类的原型实现继承的方式,这样的优点是简单直接，缺点是多拷贝了一份内存，子类多创建了一份独立内存用于继承父类的原型 function abc(){ this.name="sdlfjslfdjs" } abc.prototype.xx="sdlfsjlfd 阅读全文

posted @ 2024-05-30 18:41 joken1310 阅读(49) 评论(0) 推荐(0)

ts 语法测试，typescript常用语法的使用

摘要： //interface 定义对象结构测试 interface abc { a: string, //基本数据类型声明都是小写开头 b: number, c?: [string] //定义字符类型的数组 cc?: Array<string>, //Array 是泛型类，用于创建数组对象 f?: Obj 阅读全文

posted @ 2024-05-29 16:04 joken1310 阅读(88) 评论(0) 推荐(0)

js原型链测试探索

摘要： function mychild(){ this.x=2342342 } mychild.prototype.y=342342; console.log(mychild.prototype.constructor,"构造函数") console.log(mychild.prototype.const 阅读全文

posted @ 2024-05-28 00:31 joken1310 阅读(52) 评论(0) 推荐(0)

js 函数对象成分分析

摘要： 1、js函数对象有3个主要成分 1、就是js原型，也就是prototype，可以被实例继承过去 2、就是原型链，也就是原型链这个栈指针，指向示例对象本身的父类原型 3、就是私有属性，通过this声明，或者直接附加子属性，实例可以独自开辟一份对象继承这些属性 2、实例new 函数对象是什么 1、实例就阅读全文

posted @ 2024-05-26 00:57 joken1310 阅读(53) 评论(0) 推荐(0)

JavaScript 继承方式：通过原型对象的原型链继承父类原型，也叫寄生组合法继承

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文

posted @ 2024-05-26 00:23 joken1310 阅读(47) 评论(0) 推荐(0)

js 前端设计模式：观察者模式和发布-订阅者模式

摘要：观察者模式代码观察者模式就是一对多事件，当事件发生的时候通知到多个观察者，所有观察者进行对应的更新操作update执行事件操作。 // 观察者列表 function ObserverList() { this.observerList = []; } ObserverList.prototype. 阅读全文

posted @ 2020-07-01 22:05 joken1310 阅读(507) 评论(0) 推荐(0)

js 节流防抖代码实现和原理

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文

posted @ 2020-05-30 19:36 joken1310 阅读(2199) 评论(0) 推荐(0)

vue 双向数据流实现原理参考demo

摘要： https://github.com/DMQ/mvvm 阅读全文

posted @ 2020-05-30 18:41 joken1310 阅读(253) 评论(0) 推荐(0)

vue或react多语言自动化实现扫描代码的多语言-i18next-scanner

摘要：实现思路 i18next-scanner 自动扫描代码中的中文中文作为多语言的key，通过crc32转为语音包的key i18next-scanner 使用 package.json写入script自动运行脚本 npm run scan "scripts": { "dev": "node buil 阅读全文

posted @ 2020-04-16 23:28 joken1310 阅读(2759) 评论(1) 推荐(0)

js object 对象数据转formdata格式实现

摘要：目的是为了方便异步提交form表单的数据，尤其是在单页应用中方便实现表单数据的提交。代码如下：本代码可以实现的功能是对js数据对象转formdata数据格式，可以做到对数组的数据处理，可以对filelist文件对象的处理。具体使用，个人可以依据自己的项目情况进行更改或改进。注意：不兼容ie9 阅读全文

posted @ 2019-06-25 20:50 joken1310 阅读(13282) 评论(0) 推荐(0)

ie9 placeholder兼容代码方法

摘要： function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); retu... 阅读全文

posted @ 2018-07-23 14:21 joken1310 阅读(244) 评论(0) 推荐(0)

ipset hash is full 原因

摘要：如上面会导致提示 ipset hash is full 这是因为hash:ip 只能存储固定ip，这样如果你录入的大量的ip段，那么ipset解析的时固定的一堆大量的ip，无法存储很多的大量固定ip，所以会报ipset hash is full 解决方法是改成hash:net ，这样才能存储ip段阅读全文

posted @ 2018-07-12 21:26 joken1310 阅读(1118) 评论(0) 推荐(0)

国内ip地址生成和ipset 导入

摘要：导入ipset 这里需要用hash：net才能存储ip段，如果时hash：ip则只能存储固定ip，不能存储大量的ip。用net才能存储ip段，才能有效实现录入大量的ip。阅读全文

posted @ 2018-07-12 21:23 joken1310 阅读(1558) 评论(0) 推荐(0)

ipset 教程

摘要： ipset介绍 ipset是iptables的扩展,它允许你创建匹配整个地址集合的规则。而不像普通的iptables链只能单IP匹配, ip集合存储在带索引的数据结构中,这种结构即时集合比较大也可以进行高效的查找，除了一些常用的情况,比如阻止一些危险主机访问本机，从而减少系统资源占用或网络拥塞,I 阅读全文

posted @ 2018-07-12 21:18 joken1310 阅读(2880) 评论(0) 推荐(0)

树莓派centos 扩展存储卡

摘要： rootfs-expand 阅读全文

posted @ 2018-07-03 20:39 joken1310 阅读(190) 评论(0) 推荐(0)

centos7 添加开机启动程序案例

摘要：开机自启以下使用Systemd来实现***开机自启。在里面填写如下内容：把/home/xx/Software/***/***.json修改为你的***.json路径，如：/etc/***.json 配置阅读全文

posted @ 2018-07-03 01:15 joken1310 阅读(215) 评论(0) 推荐(0)

raw.xz 镜像写入sd卡方式

摘要： xzcat Fedora-Workstation-28-1.1.aarch64.raw.xz | sudo dd status=progress bs=4M of=/dev/sdb 阅读全文

posted @ 2018-07-02 22:05 joken1310 阅读(688) 评论(0) 推荐(0)

javascript websocket 心跳检测机制介绍

摘要：测试代码： ==index.html ==websocket.js 心跳检测的目的时什么呢？一个是为了定时发送消息，使连接不超时自动断线，可能后端设了超时时间就会自动断线，所以需要定时发送消息给后端，让后端服务器知道连接还在通消息不能断。二来是为了检测在正常还连接着的情况下，判断后端是否正常，如阅读全文

posted @ 2018-06-27 23:05 joken1310 阅读(10223) 评论(0) 推荐(1)

linux 删除U盘分区和格式化

摘要：查看有哪些挂载盘：最后一个一般就是U盘或SD卡了操作SD卡U盘进入了操作u盘的功能的命令菜单输入d代表删除分区操作输入n代表创建新分区操作如果要删除所有分区要重复操作d直到删除了u盘所有分区然后在创建u盘分区，输入n创建分区输入l可以查看有哪些分区最后输入w保存修改最后还要格式化阅读全文

posted @ 2018-06-23 10:01 joken1310 阅读(3748) 评论(0) 推荐(0)

linux 全局变量添加方法

摘要： 1. 在最后一行添加启动命令，比如：这里主要是通过冒号隔开或者多个也可以这样： 2.通过bashrc 添加添加方法如上。阅读全文

posted @ 2018-06-07 21:42 joken1310 阅读(516) 评论(0) 推荐(0)

gogs git添加开机启动方法

摘要：首先到gogs文件的scripts里面找到启动文件 ==然后拷贝到/etc/init.d 上面的gogs是启动文件。内容如下: 修改gogs启动文件里gogs的安装地址: 提交执行权限最后添加到开机启动阅读全文

posted @ 2018-06-07 21:37 joken1310 阅读(1937) 评论(0) 推荐(0)

js图片预览代码案例

摘要： /*@file {dom} 目标文件输入框*/ /*@tar {dom} 预览图片目标*/ /* previewImage(this,'#preview'); //预览图片的功能*/ function previewImage(file,tar) { var MAXWIDTH = 120; // 最大图片宽度 var MAXHEIGHT = 120; // 最大图片高度 ... 阅读全文

posted @ 2018-06-07 18:16 joken1310 阅读(199) 评论(0) 推荐(0)

joken-前端工程师