- 博客(85)
- 收藏
- 关注
RSS订阅
原创 JavaScript 的显式转换和隐式转换（超详）
1、js数据类型最新的ECMAScript 标准定义了8 种数据类型。7种基本类型（也就是原始值）：Undefined、Null、Boolean、Number、String、Symbol（es6）、BigInt（es10）（这里不讨论 Symbol、BigInt 两种类型。）Undefined、Null的特殊情况以及Boolean的转换都比较好记忆。剩下的只需要关注好 String、Number 这两种类型。1种对象类型:Object2、类型转换数据类型间的转换可分为：原始值间的转换
2020-12-24 16:02:39
4670
原创 Vue3 父事件覆盖子事件，Vue2 的 v-on=“$listeners“ 的替代方案
子组件代码，需要特别注意的是事件名为 on 开头，例如 onBack。不确定的可以通过给父组件传递 事件或属性，再打印子组件的 attrs = useAttrs()，来确定传值。在 Vue3 中，$listeners 被删除。
2024-01-11 17:12:26
684
原创 如何跑AI模型—ultralytics
这里以跑 ultralytics 为示例，记录了如何从 0-1 跑个简单的模型，包括环境搭建。我的是 Window 系统，其他系统也类似。主要流程是环境搭建，找个官网的 demo，收集好所需素材（模型，图片等），跑脚本。
2023-12-08 15:00:17
309
原创 hosts 配置本地映射不生效
关闭所有科学上网工具！！刷新 DNS 解析缓存：ipconfig /flushdns关闭所有浏览器访问映射地址时，带上端口号
2023-11-21 23:10:26
834
原创 sass mixin 结合伪元素 + vertical-align: middle 实现垂直居中的优雅写法
外面一层标签，附上伪元素。里面放入想垂直居中的元素。优化：封装为 mixin 在全局需要的地方直接引入（借鉴来自 ElementUI 源码）
2023-01-04 15:39:24
165
原创 Vue JSX 快速上手指南【语法篇】
在 Javascript 里写 XML，同时拥有 Javascript 的灵活性和 HTML 的语义化。
2022-12-30 14:51:09
2177
原创 函数式编程之 compose 实现
原打算研究下 compose 实现就好了，可是顺藤摸瓜，看到了一个更大的世界。先来看看函数式编程，再来学学compose的实现吧。
2022-07-16 19:48:37
326
原创 Vue Test Utils 【实战篇】
一、快照知识点补充快照介绍每当想要确保生成的 UI 不会有意外的改变时，快照测试时非常有用的工具第一次运行时，会生成快照文件第二次会比较不同，直接展示结果。更新快照 npm run test:unit – -u运行结果：第一次写入：第二次比较，不能有 stub，因为：修改组件后，快照报错，显示组件被修改。但前提是在同一个文件.vue下才能被监控到。而不是外部引入脚本。执行 npm run test:unit – -u 或 yarn test:unit -u 更新快照二、配置主
2022-01-16 15:28:56
3176
2
原创 Jest 组件库单元测试【基础语法篇】
一、介绍Jest 是 Facebook 出品的一个测试框架，相对其他测试框架，其一大特点就是就是内置了常用的测试工具，比如自带断言、测试覆盖率工具，实现了开箱即用。此外， Jest 的测试用例是并行执行的，而且只执行发生改变的文件所对应的测试，提升了测试速度。二、简单尝试 Jest启动一个项目：安装 Jest全局：npm install -g jest 或局部： npm install -D jest在 package.json 中指定 test 脚本：Jest 的测试脚本名形如*.t
2022-01-16 13:52:28
10143
1
原创 Javascript 的编译器和作用域查找规则
一、编译器介绍对于常见编译型语言（例如：Java）来说，编译步骤分为：词法分析->语法分析->语义检查->代码优化和字节码生成。对于解释型语言（例如 JavaScript）来说，通过词法分析 -> 语法分析 -> 语法树，就可以开始解释执行了。1 传统的编译步骤：1、分词/词法分析将字符组成的字符串分解成有意义的代码块（词法单元）例： var a = 2 => var、a、=、22、解析/语法分析将词法单元流（数组）转换成抽象语法树3、代码生成将 A
2022-01-16 13:36:37
432
原创 vue+element-ui 实现的假进度条
背景接口请求时，为了提高用户体验需要展示进度条，包括加载时间和进度。但有时候加载的接口不止一个，又无法得知具体的时间，这时候模拟一个假进度条更为方便。思路：参考的 nprogress 代码，将内部的进度暴露出来，便于模拟假的时间。 this.$emit(‘progress’, n)部分代码如下：<template> <el-progress :percentage="percentage" :show-text="false" :class="progressClass"
2022-01-03 12:23:53
3309
原创 对npm模块进行调试和测试——npm link
功能将本地开发的 npm 模块连接到本地项目中，方便调试和测试。使用在 npm 模块目录：npm link在本地项目目录：npm link 模块名会提示映射成功注意若无法生效，可能连接的还是线上的 npm 模块。则在本地项目 npm uninstall 本地需要调试的 npm 模块。在 npm 模块目录下打包该模块，例如 npm run dist。...
2022-01-03 11:22:28
1082
原创 安装最新 Jest 报错：TypeError: Cannot read property ‘instrument‘ of undefined
背景：为了在已有的项目中加入 Jest ，踩了不少坑，坑列举如下，采用过的解决方式，出现的新问题，最终的处理手段。首先，我的项目是 Vue2，package.json 的 babel 为 @babel，因此才会出现以下种种问题。若为 babel，正常 npm install -g jest 配置脚本即可，后面会有说明。Vue3 的 Jest 安装更为简单，本篇不涉及。坑1： 直接在 Vue 项目中运行，报错requires Babel "^7.0.0-0", but was loaded with
2021-11-11 21:23:59
3361
原创 ElementUI 多选框取值用 value，展示用 label
多选框：label 绑定选中值（返回值），value 绑定展示内容<el-checkbox-group v-model="status"> <el-checkbox v-for="(value, key) in checkData" :key="key" :label="key" > {{ value }} </el-checkbox></el-checkbox-grou
2021-11-08 16:32:27
2888
原创 ECharts 的 Tooltip 绑定点击事件
效果：关键代码：option 配置tooltip: { enterable: true, // 必须项 鼠标是否可进入提示框浮层中 trigger: 'item', // 触发类型 formatter: function(e) { return ( `<span onClick="goDetail(\'` + e.name + `\',\' ` + e.value + `\')">${e.name}<span id="detail">&
2021-10-12 11:23:15
1474
原创 VSCode 报错 fatal: Authentication failed for ‘http://git.XXXXX
问题：在我同时开多个项目，电脑崩了，再打开 VSCode 操作 git 时，冒出一个弹框，输入用户名密码，第一次输入错误后，之后都报错 fatal: Authentication failed for 'http://git.XXXXX。解决方案：找对方法，问题就咔咔咔的解决了。整体思路是，删除 git 里的错误用户名密码， 并删除 Windows 凭据里相关的 git 普通凭据（例如和报错的地址相关的，或是修改时间最近的），再操作 VSCode 的 git push 时，会提示重新输入用户名密码，这
2021-08-30 10:03:22
4253
原创 前端 UI 实现自检清单
通过自检清单，提高前端和 UI 间的工作和沟通效率。自检清单：1、易忽略的实现：字体颜色、框线、背景颜色、分割线、字体粗细、hover、icon2、对齐：图像和文字居中对齐、文字换行对齐、模块间对齐（左对齐，右对齐）、标题和按钮对齐3、hover 前后样式变化：背景色、字体颜色、圆角4、间距：模块和分割线的边距、按钮间间距、模块间间距、标题内外的间距：5、文字：颜色、文案内容需确认和 prd 或 UI 的一致、一般不换行6、表格：有多种情况和布局要求，在实现过程中最好和 UI 多沟通。表格文
2021-03-31 11:28:30
595
原创 git worktree：在一台电脑上，同时开启不同分支的同一个项目
使用场景：平常为了修bug等，会切换分支，而切换分支的会花费许多的等待时间。不如再开启一个新项目。可采用方法：clone 多份 repo 的方法：会导致重复和各种同步问题git clone：多个项目时，会占用硬盘空间。项目管理不如 git worktree 方便git worktree：git worktree 会将新分支取出来新建一个文件夹，他们的 local repo 是同一个注意事项：都需要修改相应的端口号，避免端口冲突。提交到远程时，别忘了将端口号修改回来，不然就尴尬了。当然
2021-03-21 17:01:11
1750
原创 width:100%、width:auto、绝对定位、box-sizing:border-box、box-sizing:content-box 的混搭结论分析
在开始之前，先回顾些知识点。一、CSS盒模型CSS的盒模型由外到内分别为 margin、border、padding、content。分为标准盒模型与IE盒模型，可使用 box-sizing 属性去切换盒模型。标准盒模型：box-sizing:content-box; 意味着该盒子的 width 包裹的是 content 盒子即 content 部分。IE盒模型：box-sizing:border-box; 意味着该盒子的 width 包裹的是 border 盒子即 border + paddin
2021-01-10 15:54:56
702
3
原创 网络安全初探析——XSS、CSP、CSRF
一、XSS1、概述Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过给目标网站注入脚本，诱导用户点击，使得脚本最终在用户的浏览器上执行。为了和 CSS区分，改名为 XSS。利用注入的脚本，能干的坏事有：注入脚本获取信息窃取用户Cookie，为接下来的CSRF做准备绕过网页过滤进行攻击劫持流量，实现恶意跳转2、XSS 分类2.1、 存储型 XSS（持久型XSS）攻击步骤：恶意代码被攻击者提交到目标网站上，最终存储在目标网站的数据库中
2020-12-27 18:21:12
873
1
原创 webpackChunkName 魔法注释失效解决，只能显示 id 的解决方案
问题路由懒加载时，采用ES6的按需加载方式，却无法显示webpackChunkNameconst BackHome = () => import(/* webpackChunkName: 'backHome' */ '@/views/back/back_home');const ArticleMgt = () => import(/* webpackChunkName: 'articleMgt'*/ '@/views/back/article_mgt');const CommentMgt
2020-12-08 18:39:55
2686
4
原创 腾讯云Centos配置Nginx + node
一、环境Linux：CentOS 7.6 64位Nginx：nginx-1.13.1安装目录：/usr/local配置文件：/usr/local/nginx/conf/nginx.conf其他nginx版本下载二、安装和配置1、安装Nginx依赖yum install gcc yum install gcc-c++yum -y install pcre*yum -y install zlib*// openssl （若需要支持 https 协议）yum -y instal
2020-12-03 12:29:04
236
1
原创 性能优化：Vue-ECharts使用CDN
一、背景在使用了Vue-ECharts的按需加载后，打包仍占用了较大的空间，故通过CDN方式，缩小打包体积。二、配置1、在模板index.html中引入CDN找到Vue-ECharts的关联包：通过国内的CDN服务器BootCDN，查找ECharts和Vue-ECharts的CDN，在index.html中，引入如下：<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.1.0/echarts.min.js"></s
2020-12-01 15:14:16
5901
原创 Chrome扩展：本地应用上传本地文件到谷歌插件，再由插件上传到服务器
须知谷歌扩展只能传输和JSON兼容的数据，可通过JSON.parse(JSON.stringify(form_data))判断兼容与否。解决方案FormData和JSON不兼容。要上传文件，可通过发送方将File对象转换为dataURL，接收方解析回File对象，再生成FormData对象上传文件。本地应用和插件通信是通过Chrome.runtime.sendMessage和Chrome.runtime.onMessageExternal。详细过程如下：代码发送方：本地应用let fileR
2020-11-21 17:49:25
2722
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人