- 博客(42)
- 收藏
- 关注
RSS订阅原创 开发脚手架常用的JS库
开发脚手架的js库：命令行交互-inquirer、命令行loading-ora、命令行文字样式-chalk、命令行日志-npmlog
2023-03-29 10:59:14
798
原创 js-封装判断变量是否为空的方法
使用场景场景1请求接口返回的数据是数组类型，没有数据时，后端竟然返回null（坑），而不是空数组，导致判断数据是否为空报错 console.log(!arr.length) ==> Uncaught TypeError: Cannot read properties of null (reading 'length')场景2由于js是弱类型语言，一开始声明变量是数组，进过一系列的赋值操作后，由于代码不规范，变量可能变成了undefined、null或其他数据类型，这时通过!arr.length
2022-04-01 19:01:54
1201
原创 js-封装数字保留X位小数点方法
数字保留X位小数点方法/** * @description 数字保留x位小数点 * @param {Number | String} num 数字 * @param {Number} digit 保留几位 默认2位 * @example myToFixed(1.005, 2) => 1.01 */const myToFixed = (num: number | string, digit: number = 2) => { if (isNaN(Number
2022-03-22 14:23:38
426
原创 js-校验数组对象中某属性值是否重复
分享一种校验数组对象某属性值重复的思路数据结构const data = [ { name: '小明', age: 18 }, { name: '小红', age: 20 }, { name: '小明', age: 22 }]实现/** * 校验有无重复项 * @param {Array} dataArr-数据数组 * @param {String} key-对象属性名 * @return {Boolean} true-重复 false-不重复 */
2022-01-11 14:55:33
4105
原创 js-使用forEach过滤数组的一个坑
使用forEach遍历数组，删除不符合条件的元素时，发现有的元素没有删掉，原因是forEach不会重置索引例如下面数组，id=1 / type=pdf的元素需要删除掉，会发现删除第0项后，第1项没有删除成功，因为第0项被删除后，第一项补位到了第0项的位置，但是索引没有重新计算，索引自增1，接着循环了数组第1项，导致补位上去的第0项没有访问到var arr = [ { id: 0, type: 'image' }, { id: 1, type: '
2021-12-20 09:19:31
971
原创 js-计算字符串中出现次数最多的字符
方法1利用对象记录每个字符出现的次数var str = 'aaaaaaaabbbcccccbbcccccdddd';var obj = {}; // 利用对象来记录每个字符出现次数for (var i of str) { obj[i] = obj[i] ? obj[i] += 1 : 1 // 若属性i存在 属性值+1 否则=1}var count = 0; // 出现的次数var keyName = ''; // 最多次数多字符名for (var k in obj) { // 遍历
2021-12-19 13:35:11
1742
1
原创 vue3-懒加载长列表
应用场景页面中有数据量非常大的表格，并且不方便做分页时，可以用Intersection Observer的API实现瀑布流列表<template> <button @click="getDataList">点我获取数据列表</button> <ul class="list"> <li v-for="(item, index) in showList" :key="index">{{ item }}</li>
2021-12-17 17:29:20
1422
1
原创 js通过url下载文件
关键：获取blob二进制对象const downloadFn = { /** * 获取 blob * @param {String} url 目标文件地址 * @return {cb} */ getBlob(url, cb) { let xhr = new XMLHttpRequest() xhr.open('GET', url, true) xhr.responseType = 'blob' xhr.onload = function (
2021-12-02 11:29:47
873
原创 vue-两个浏览器tab页通信的思路
前言最近在开发中遇到一个场景，有一个列表页和详情页，由于业务需求，需要用新标签页来打开详情页，因此我用了window.open()打开详情页，详情页中有一个保存功能，保存后需要触发一个事件，让列表页监听执行刷新列表的操作，最先想到的是eventBus，详情页保存成功时emit一个事件让列表页去监听，但发现列表页始终监听不到，后面又用vuex状态管理，详情页保存后更改store里的值，列表页监听这个值做对应的操作，也是失败了。后面才反应过来，由于vue是单页应用，两个标签页的状态是响应不到一块的解决思路
2021-12-01 14:31:56
1665
原创 js实现金额数转简体/繁体中文
最近在开发项目的时候遇到一个需求，要求把金额数转成繁体中文显示，例如1700，显示成壹仟柒佰元，不排除后期会更改需求为显示简体中文，因此统一进行封装。/** * @description 数字转中文 * @param {Number|String} num 数字[正整数] * @param {String} type 文本类型，lower|upper，默认upper * @example number2text(100000000) => "壹亿元整"
2021-09-24 16:14:45
906
原创 js常用的正则&表单验证
分享一下工作中常用的正则以及表单验证规则，单独封装一个js文件，代码如下/** * 基础正则 */// 汉字let chineseReg = /^[\u4e00-\u9fa5]{0,}$/// 英文字符let englishReg = /^[A-Za-z]+$/// 英文和数字let engAndNumReg = /^[A-Za-z0-9]+$/// 整数let integer = /^-?[1-9]\d*$/// 正整数let positiveInteger = /^[1-9]\
2021-09-24 16:05:56
164
原创 js实现金额添加千位符
当需要对后端返回的金额添加千位符时直接调用方法，2000 => 2,000function addComma(value) { let suffix = '' if (value && value !== 'NULL' && value !== 'undefined' && isNaN(Number(value))) { return value } else if (!value) { return '
2021-09-24 15:58:30
531
原创 js实现下载blob对象
当后端接口返回blob对象，前端需要转成文件并下载时，可以使用此方法// blob转文件并下载downloadFileByBlob(blob, fileName = "file") { let blobUrl = window.URL.createObjectURL(blob) let link = document.createElement('a') link.download = fileName || 'defaultName' link.style.display = 'non
2021-09-24 15:54:13
5371
原创 vue-封装对话框
前言开发后台管理系统时，经常需要使用对话框进行逻辑操作，可以封装成公共组件，方便复用及管理开始封装以vue3+element-plus为例在src/components中新建diaLog.vue文件，使用具名插槽，让父组件决定渲染的内容<template> <el-dialog v-model="visible" width="30%" @close="close" > <template #title> &l
2021-09-18 15:30:48
709
原创 前端导出文件流方法
download(url = '', data = {}, config = {}, isFormData) { return getToken(!config.noToken) .then((token) => { return super.download( url, data, { token, Authorization: token,
2021-09-14 11:26:31
716
原创 vue-封装获取当前时间方法（支持任意格式）
开发过程中，经常会有获取当前时间的需求，可能是年月，年月日，周几等，可以封装成函数，方便复用，以vue举例。封装src下新建utils文件，新建formatDate.js文件/** * 获取当前时间 */export const formatDate = (fmt) => { const date = new Date() const o = { 'Y+': date.getFullYear(), 'M+': date.getMonth() + 1, // 月
2021-09-06 15:18:48
1005
原创 vue-防抖封装
封装/** JS多次触发防抖 * @param {Function} func * @param {number} wait * @param {boolean} immediate * @return {*} */export function debounce(func, wait, immediate) { let timeout, args, context, timestamp, result const later = function () { // 据上一次
2021-09-06 14:59:40
331
原创 vue-storage封装
/** * 封装操作localstorage本地存储的方法 */export const storage = { // 存储 set(key, value) { localStorage.setItem(key, JSON.stringify(value)) }, // 取出 get(key) { const value = localStorage.getItem(key) if (value && value !== 'undefined
2021-09-06 14:49:55
826
原创 vue-自定义查询组件
在开发后台管理系统的时候，经常会有搜索表单，可以封装组件，提高开发效率1、封装组件searchForm组件 ???? 自行替换ui组件（饿了么、蚂蚁），写好会用到的类型，v-if判断符合类型则渲染，双向绑定数据// searchForm组件<template> <div v-for="(item, index) in config" :key="index"> <div v-if="item.type === 'input'">
2021-09-04 09:14:51
2042
1
原创 解决antdv-select选项太长，展开错位的问题
antdv-select选项太长，展开错位，如图解决方法：getPopupContainer属性，设置渲染到父节点上，并相对其定位<div class="fundFlow__header__search__item"> 费用事项： <a-select ref="select" v-model:value="form.costItem" placeholder="请选择" style="width: 200px" :getPopupCont
2021-09-03 14:59:47
2423
原创 vuex使用方法
安装参考官网：https://vuex.vuejs.org/zh/installation.htmlvuex的五大核心state：存放公用数据action：存放异步操作，不能直接修改state中的数据，通过dispatch触发action，action会有两个参数，参数一：context，使用里面的commit方法触发mutation，参数二：params传递过来要修改的数据值mutation：存放同步操作，修改state中的数据，参数一为state，参数二为params要修改的数据值gett
2021-06-02 13:16:09
111
原创 前端项目优化的常见方法
1. 减少http请求数合并图片，条件允许时，可以合并成雪碧图从而减少请求合并压缩css样式表和js脚本2. 图片优化优先级：CSS手绘 > iconfont > 图片.png > 图片.jpg图片懒加载。3.减少DOM操作4.CDNCDN即内容分发网络，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度，缺点是需要收费5.GZIP压缩GZIP即数据压缩，用于压缩使用Internet传输的所有文本资源。开启GZIP的方法很简单，到对应的w
2021-05-27 21:49:28
1130
原创 Vue3.0 — axios、getCurrentInstance
axios安装npm install axios -S使用1、在main.js中引入aixosimport axios from "axios"2、挂载到根实例上vue3.0新增了一个函数createApp()，用于创建根实例const app = createApp(App)app.config.globalProperties.$axios = axios // 挂载到Vue上的写法3、在组件上使用axiosvue3的setup函数中的this为undefined，需要使用组合A
2021-04-07 09:59:12
1976
原创 Vue3.0 — props写法
父组件向子组件传值父组件通过属性传值<children :content="x"/>子组件通过setup第一个参数props接收setup(props) { let content = props.content // 拿到父组件传过来的content变量数据}子组件向父组件传值子组件通过setup第二个参数context中的emit方法向上触发事件setup(props,context) { context.emit("memberClick", "member
2021-04-07 09:02:12
1956
原创 Vue3.0 —— 生命周期函数与setup
1、Vue3.0 生命周期函数变更Vue2.xVue3.0beforeCreatesetupcreatedsetupbeforeMount(挂载前)onBeforeMountmounted(挂载后)onMountedbeforeUpdate(数据更新前)onBeforeUpdateupdated(数据更新后)onUpdatedbeforeDestroy(销毁前)onBeforeUnmountdestroyed(销毁后)onUnm
2021-04-06 15:47:47
11260
原创 Stylus安装及使用
1、简介Stylus是一个CSS预处理器，在VUE项目中一般使用Stylus就足够了，Sass预处理器的node-sass包比较多坑。2、安装与页面引入（1）在命令行中依次执行如下命令进行安装npm install stylus --savenpm install stylus-loader --save（2）在style标签中添加lang属性，例：<style lang="stylus"></style>3、Stylus语法特点（1）括号可有可无.hel
2021-03-30 09:40:33
2354
1
原创 vue-router
vue-router1、创建vue项目时，选择使用router路由，脚手架就自动生成了配置路由的js文件，并在入口文件main.js中使用了路由2、配置路由项：将页面组件import进路由的js文件中，开始配置url所对应跳转的页面// router.jsimport { createRouter, createWebHistory } from 'vue-router'import Home from '../views/Home.vue'import About from '../views
2021-03-29 16:45:37
45
原创 屏幕自适应
PC端H5页面直接使用px单位即可，大屏幕只需要展示更多内容，而不是更大的内容，更大的内容只会显得廉价移动端H5页面（移动端屏幕适配）封装在一个js文件中，使用时直接引入移动端简单适配(function () { setRemUnit(); window.addEventListener('resize', setRemUnit); function setRemUnit() { // 文档元素 var docEl = documen
2021-03-29 11:04:19
436
原创 H5初始化css
/* 基础样式定义 */body,html,ul,li,p,h1,h2,h3,h4,h5 { margin: 0; padding: 0;}h1,h2,h3,h4,h5,h6 { font-size: 14px; font-weight: normal;}img { border: none; font-size: 0;}a { color: #71777d; text-decoration: none;}a:hover {
2021-03-29 09:30:13
404
原创 原生JS实现搜索匹配
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { p
2021-01-08 16:15:37
1249
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人