- 博客(45)
- 收藏
- 关注
RSS订阅原创 Vite+Vue3 开发UI组件库并发布到npm
一直对开源UI组件库比较感兴趣，摸索着开发了一套，虽然还只是开始，但是从搭建到发布这套流程基本弄明白了，现在分享给大家，希望对同样感兴趣的同学有所帮助。目前我的这套名为hasaki-ui的组件库仅有两个组件，大致成果如下，后续有时间会继续完善。该项目采用的技术栈为Vite + Vue3，还使用了一些基本的Markdown知识，阅读本文档前，希望你至少对vue有些基础，那么我们正式开始。
2023-07-31 16:52:35
2135
3
原创 Ts实现Echarts自动轮播类
关于此话题，我之前出了一个函数式编程的实现方案，感兴趣的同学可点此链接去看看，虽然经过了优化，但是有一点比较不容易解决，就是如果同一页面需要轮播的echarts图表过多，就要管理多组定、延时器，增加了使用和维护成本。现在我定义一个类来管理这个轮播器，每个类的对象自己管理自己的定时器，就不用我们操心了，对使用和维护大大的友好，请看代码import { ECharts } from "echarts";import _ from "lodash";/** * E...
2021-10-29 22:44:08
671
原创 JS前端实用方法
/** * 用于将手机号脱敏处理 * @param {string} val - 手机号 * @return {string} 处理后的手机号 * example 18238792322 => 182****2322 */export function formatSafePhone(val) { const dealedPhone = val.toString().replace(/^(\d{3})\d*(\d{4})/, "$1****$2"); return dealedP.
2021-09-18 10:42:46
101
原创 JavaScript引擎工作原理解析
JavaScript引擎是什么想知道JavaScript引擎是什么，首先要知道JavaScript（简称js）是什么，相信对于屏幕前的你来说，js是干什么的已经不用再多说，但还是有必要介绍下JavaScript的语言性质。首先计算机不能直接理解高级语言，只能直接理解机器语言，所以必须要把高级语言翻译成机器语言，计算机才能执行高级语言编写的程序。高级语言有两种执行方式：一个是编译，一个是解释，与之对应的就是编译型语言和解释性语言，两种方式只是翻译的时间不同。编译型语言写的程序执行之前，需要一个
2021-01-05 23:54:28
1239
2
原创 浏览器原生 ES imports尝鲜
作为Vue的忠实拥护者，怎么能不知道Vite呢？今年四月，尤大大于一条微博宣布Vite诞生：Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。当然
2020-12-30 19:06:01
594
转载 idea上的git操作
关联本地Git客户端首先要根据系统环境安装Git客户端然后使用File --> Settings --> Version Control --> Git配置客户端安装目录创建本地仓库根据项目要求创建自己的项目然后使用VCS--> Import into Version Control --> Create Git Repository...在项目上创建Git仓库创建成功后会在项目文件夹内出现.git 目录...
2020-12-28 15:54:22
1308
原创 自己实现vue双向绑定从vue2到vue3
在Vue3中，最重要也更为人所知的就是ES6的Proxy。Proxy不仅消除了Vue2中现有的限制（比如对象新属性的增加、数组元素的直接修改不会触发响应式机制，这也是很多新手以为所谓的bug），而且有着更好的性能：我们知道，在Vue2中对数据的侦听劫持是在组件初始化时去遍历递归一个对象，给其中的每一个属性用Object.defineProperty设置它的getter和setter，然后再把处理好的这些对象挂到组件实例的this上面，所以这种方式的数据侦听是在属性层面的，这也是为什么增加对象属性无法
2020-12-28 11:22:31
176
原创 js实现Math.sqrt
// 二分法求平方根 const mySqrt = (n) => { if (isNaN(n)) return NaN; if (n === 0 || n === 1) return n; var low = 0, high = n, pivot = (low + high) / 2, lastPivot; do { if (Math.pow(pivot, 2)...
2020-12-25 16:18:31
758
转载 谈谈浏览器的缓存机制
一、缓存机制概述浏览器的缓存机制也就是我们说的HTTP缓存机制，是根据HTTP报文的缓存标识进行的，所以在分析浏览器缓存机制之前，我们先使用图文简单介绍一下HTTP报文，以Chrome为例F12打开调试面板，任选一个请求发现请求头中有如下部分：General内容 含义 实例 Request URL 请求的路径 https://www.baidu.com/ Request Method 请求的方式 GET Status Code .
2020-12-24 14:09:06
258
原创 从输入地址到页面渲染，浏览器都做了什么
浏览器的主要功能浏览器的主要功能是把你从服务器请求到的网络资源呈现在浏览器窗口上，资源通常包含了HTML，PDF，图片等等，资源通常是由用户指定的URI(UniforresourceIdentifier统一资源定位符)来定位的。浏览器的主要组成部分:此处引用了《浏览器是如何工作的》，很好的文章用户界面(Theuserinterface)-包含地址栏、前进/后退按钮、书签等等。除了主要的窗口之外你所看到的就是请求的页面。浏览器引擎-查询和操作渲染引擎的入口。渲染引擎-负...
2020-12-24 00:33:55
329
原创 前端利用canvas实现手写板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手写板</title></head><body> <div id="app"> .
2020-12-21 23:42:07
1350
原创 判断一个字符串中括号是否成对存在
前段时间遇到一个面试题，是这样的：有一个字符串，如'sdfsd{sss}{{sd}}',请判断字符串中的'{}'是否合法，'{}','{{}}'都视为合法，'}{','{{}'...为不合法。一开始我是硬写，没什么思路，后来偶然看到一篇文章，是关于浏览器解析dom标签的原理，从中受到了启发，才发现这个题是很简单的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
2020-12-21 23:00:53
643
转载 什么是BFC？看这一篇就够了
BFC 定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。Box：css布局的基本单位Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属
2020-12-21 14:18:28
158
原创 解决audio元素获取duration为Infinity
最近开发录音相关功能发现有些录音当取audio.duration时为infinity，影响自定义功能的实现，查阅了很多方法都不起作用，最后在国外论坛找到了可行的解决方案。 private async audioCanplay(e: any) { const firsthandAudio: HTMLAudioElement = e.target; while (firsthandAudio.duration === Infinity) { await
2020-12-18 15:34:01
3301
7
原创 vue封装元素拖拽指令
/** * 用于实现元素拖拽 drag.ts */export default { bind(el: HTMLElement) { el.style.position = 'absolute'; // 将元素定位 let x = 0; let y = 0; let l = 0; let t = 0; let isDown = false; // 鼠标按下事件 el.onmousedown = function(e: any) {.
2020-12-18 14:56:07
450
原创 js生成8位随机字符串密码
最近做了一个功能，随机生成一个8位字符串密码：要求必须包含大写字母、小写字母和数字，下面和大家分享下首先我们要了解下ASCLL码js提供两个方法：分别将ASCLL码转为字符：String.fromCharCode()；将字符转为ASCLL码：'a'.charCodeAt()；// 查表得知： // 数字0~9对应的ASCII码值是 48-57 // 大写字母A-Z对应的ASCII码值是 65-90 // 小写字母a-z对应的ASCII码值是 97-122.
2020-12-18 14:10:47
3746
原创 前端操作下载流文件
/** * 用于导出Excel流文件 * @param {string} url - 接口地址; body - 参数; text - 文件名 */ public exportExcel(url ?: any, body ?: any, text ?: string) { this.$axios.request({ method: 'get', // @ts-ignore url, ...
2020-10-20 14:54:24
193
原创 css 杂项
/*css禁止文字被鼠标选中*/.box { moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}/*文字自动换行（主要针对英文，数字等，中文会自动换行）*/ ...
2020-09-23 22:09:56
204
原创 windows/Mac命令行（查看端口号占用情况，配置环境变量等）
MAC打开任何来源：sudo spctl --master-disable查看端口号是否占用：lsof -i:port查看进程ps -ef | grep -i tomcat杀进程：kill + " "赋权:chmod -R 777 /Users/sunyimingxxxWIINDOWS：查看指定端口占用情况： netstat -aon|findstr "8009"查看PID对应的进程：tasklist|findstr "7372"杀进程：t..
2020-09-23 21:53:40
439
原创 Promise内部执行顺序解析+基于Promise实现js线程sleep
js进入es6后，对于异步操作进行了很多友好的改善，如Promise，async，await等特性：在使用Promise时，我经常疑惑它内部的执行顺序，以及它到底包装了什么，经过多次的尝试和验证，得出了一些自己的见解，在此和大家分享一下。大家首先要知道：1、JS是单线程语言，包括同步任务、异步任务、异步任务又包括宏观任务和微观任务2、执行顺序：同步任务——>微观任务——>宏观任务3、Promise对象用于表示一个异步操作的最终完成 (或失败), 及其结果值大家先来看这个.
2020-09-13 14:04:00
575
转载 idea设置注释模版
进入配置项File>Setting>Live Templates新建（注释）模板组点击右侧的+号，选择Template Group名字随意，如：myTemp新建（注释）模板选中myTemp组，再次点击右侧的+号。选择live Template创建类的（注释）模板abbreviation处填写classtemplate text处填写如下代码(author改为自己的名字)：/** * xxx类 * @author 丁少华 * @date $date$ $
2020-09-12 15:41:49
473
转载 利用commitlint规范团队git提交信息
有时候，团队不一定每个人都有良好的代码提交习惯，提交信息也不准确完备，不便于后续准确定位问题是由于哪次提交产生的，commitlint的出现使得代码提交被强制规范化，推荐我们在开发中为项目添加此配置。安装huskyhusky是一个git hook的管理工具，实现了大部分的git hook，有兴趣的可以自行google。一般情况下，commitlint会用在git的hook回调中，如果不想自己写githooks，那么最简单的就是和 husky一起使用。npm install --save-dev
2020-09-12 15:36:54
813
原创 根据屏幕大小以及设计稿进行rem适配(进行误差修正处理)
!(function(n) { var e = n.document, t = e.documentElement, i = 750, d = i / 100, o = 'orientationchange' in n ? 'orientationchange' : 'resize', a = function() { var n = t.clientWidth ...
2020-08-04 16:35:57
377
原创 echarts全国各省地图数据资源
相信很多人都用echarts绘制过地图，但是苦于寻找省市的数据包，echarts本身提供的数据包又涉及版权问题不再提供使用，下面提供一份干货：某大厂提供的地图数据包链接，很全，省、市、区都有http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4以下是用node写的一个批量下载常用省市数据包的脚本，可供参考//文件下载var fs = require
2020-08-03 15:56:52
1519
原创 axios基本配置
我工作中主要使用vue-cli搭建工程，项目开始需要进行很多环境配置，如commitlint、tslint，axios等，下面逐步上传一些通用配置，方便以后开发，首先从axios开始，代码如下：import axios from 'axios';import {Notify} from 'vant';// 本地会自动走vue.config.js里的代理地址，不需要配置baseUrl。否则代理会失效if (process.env.VUE_APP_ENV !== 'development') {
2020-08-03 14:13:42
634
1
原创 echarts图表，地图实现自动轮播功能
下面是封装的自动轮播方法，可根据需求自行修改，该方法可实现如下图中（包含但不限于）echarts图形的自动轮播，并实现鼠标进入停止轮播功能。/** autoTip轮子:* chart: 需要轮询的echarts* timers\timer\timeOut: 轮询时用的定时器* index: 从第几个开始轮询, 默认0* length: 轮询元素个数* interval: 轮询间隔,默认2s* */export const autoTip = (chart: any,
2020-08-03 13:54:39
3255
原创 大屏工程自动适配屏幕大小
现在很多企业喜欢做一些大屏展示功能，这种需求往往需要页面根据屏幕大小自动适配，下面提供一个方法可以轻松实现，供大家参考/** * 用于页面自动适配屏幕 * @param dw,dh 开发宽高，不设置以（1920 1080）计算，needLT 是否调整缩放起点，默认不设置 */const resetScreenSize = (dw: number, dh: number, needLT = false) => { const init = () => {
2020-08-03 12:31:29
642
原创 webpack 项目常用配置
随着vue-cli、CreateReactApp等脚手架工具的愈加完善，其带给广大开发者方便、高效的开发体验使其越来越受追捧。其实，这类脚手架的底层都是通过webpack来实现的，其中vue-cli对webpack更是进行了很好的封装，使开发者即使不了解webpack也能很好的使用其各种功能。这样做的好处是使得开发者能够更轻松、更快的上手vue-cli，但是使用起来也就不是很灵活了，所以了解web...
2019-11-16 18:22:23
279
原创 常用正则表达式
分享一些我在开发中常用的正则表达式，没什么特殊要求的话，可以直接使用。 private static reg_isPhone = /^[1][0-9]{10}$/; //手机号 private static reg_isEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; //email priv...
2019-11-06 19:26:57
168
转载 ionic3常用命令行集合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/fan2252228703/article/details/78115912————————————————版权声明：本文为CSDN博主「Relax-z」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声...
2019-10-25 16:51:19
186
原创 前段JS绘制动态海浪效果
细腻复杂动画的制作一般要通过canvas来动态绘制，需要具备一定的算法基础。以下js是模拟海浪效果的算法（可直接使用），分享给大家。<div id="wave" style="width: 200px;height: 100px;"></div><script> (function () { //自定义命名空间 var...
2019-10-25 15:57:41
1282
原创 JS获取query参数(get请求携带的数据)
<script type="text/javascript"> function getQuery(key) { var query = window.location.search.substring(1); var map = query.split("&"); for (var i = 0; i < map.leng...
2019-08-20 19:02:40
4046
原创 iOS兼容问题
一、input checkbox 复选框在pc 安卓都正常显示,但是在ios上有重影,黑框等显示问题,可以靠以下方法解决 <style> input[type="checkbox"] { -webkit-appearance: none; -webkit-tap-highlight-color: transparent; ...
2019-08-08 11:15:48
231
原创 利用input:checkbox模拟开关按钮
<style> input[type="checkbox"] { -webkit-appearance: none; /*去掉复选框原有样式*/ } input[type="checkbox"]:checked + label, input[type="ch...
2019-08-06 21:03:13
820
原创 前端js对频发事件进行函数节流控制
//节流 var timer = null; // 给页面绑定onscroll事件，该事件为频发事件 document.body.onscroll = function () { // 根据页面卷动值位置，判断是否触发事件 var scrollTop = document.documentElement.scrollTop || document.body.scrollT...
2019-02-26 19:38:50
350
原创 前端实现图片压缩（转base64）
本文介绍的图片压缩方法适用前端开发的同学，主要流程：图片转base64——canvas重绘——实现压缩。一、图片转为base64网上有现成的工具，我们把图片放进去，就会得到相应的base64编码，此编码的长度就是图片的大小，转换成KB要除以1024，如想预览base64图片，只需将img标签的src属性设置为该base64编码即可。注意：用var oldSize = base6...
2018-09-01 16:32:56
20938
13
原创 浏览器视口大小、HTML元素偏移量的获取
获取浏览器（<html>/<body>）视口大小这个函数首先检查document.compatMode属性，确定浏览器是否运行在混杂模式。大多数浏览器都运行在标准模式下，所以会自动执行else代码。 function getViewport() { if (document.compatMode == "BackCompat"...
2018-08-24 15:08:59
618
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人