前端随笔

前言sku算法主要用于 电商业务中，只要有商品就有sku商品多规格 本文sku算法主要利用质数()、笛卡尔积、邻接矩阵。(同时参考掘金作者文章 ) 1.笛卡尔积笛卡尔乘积是指在数学中，两个[集合] X 和 Y 的笛卡尔积(Cartesian product)，又称 [ 直积 ] ，表示为 X × Y，第一个对象是 X 的成员而第二个对象是 Y 的所有可能 [ 有序对 ] 的其中一个成员 假设集合 A = { a, b }，集合 B = { 0, 1, 2 }，则两个集合的笛卡尔积为 { ( a, 0 ), ( a, 1 ), ( a, 2), ( b, 0), ( b, 1), ( b, 2) } 1.例1 /** * 笛卡尔积组装 * @param {Array} list * @returns [] */function descartes(list) { // parent 上一级索引;count 指针计数 let point = {}; // 准备移动指针 let result = []; ...

前言功能说明基于element-ui封装的uploadPic组件(vue2版本) 1.支持自定义图片和视频预览尺寸 2.弹框预览、可下载、删除。 3.可同时上传单个、多个,可混合上传图片或者视频。 实现<template> <div :style="{'--compWidth': width, '--compHeight': height}"> <el-upload :action="action" :file-list="fileList" :disabled="disabled" list-type="picture-card" :headers="headers" :limit="limit" :accept="accept" :class="(limit <= fileList.length) | ...

新建封装函数// websocket.jsexport default function (Vue, url) { // 在Vue原型上添加$websocket属性 Vue.prototype.$websocket = { socket: null, init: function () { this.socket = new WebSocket(url); this.socket.onopen = this.onOpen; this.socket.onmessage = this.onMessage; this.socket.onerror = this.onError; this.socket.onclose = this.onClose; }, onOpen: function (event) { console.log("WebSocket connected:", event); }, onMessa ...

1.小程序保存相册getShareCode(row) { let baseUrl = request.baseURL; this.codeUrl = `${baseUrl}/enterSettleRecord/getMiniProgramCode?settleId=${row.id}&path=pages/companyManage/companyUser/shareDetail/index` api.getShareQrCode(qs.stringify({ settleId: row.id, path: "pages/companyManage/companyUser/shareDetail/index" })).then(res => { this.qrCodeUrl = "data:image/png;base64," + uni.arrayBufferToBase64(res); this.isShow = tr ...

自定义指令1.eg：全局注册自定义v-focus指令 Vue.directive('focus', { bind() {}, inserted(el) { el.focus() }, update() {}, componentUpdated() {}, unbind() {}}) 2.使用v-focus指令 <template> <input v-focus /></template> 生命周期的理解1）生命周期是什么？ Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 2）各个生命周期的作用 ![image-20230106135142037](../Library/Application Support/typora-us ...

1.安装axiosnpm install axios -s 2.新建http.js文件import axios, { AxiosInstance, AxiosRequestConfig } from "axios";import { Message } from "element-ui";import { jumpLogin, downloadFile } from "@/utils";import { Loading } from "element-ui";import { ElLoadingComponent } from "element-ui/types/loading";// import vm from "@/main";let loadingInstance: ElLoadingComponent | null = null;let requestNum ...

1校验数字1 数字：^[0-9]$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9])$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9])+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$ 8 正数、负数、和小数：^(-|+)?\d+(.\d+)?$ 9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$11 非零的正整数：^[1-9]\d$ 或 ^([1-9][0-9]){1,3}$ 或 ^+?[1-9][0-9]$12 非零的负整数：^-[1-9][]0-9”$ 或 ^-[1-9]\d$13 非负整数：^\d+$ 或 ^[1-9]\d*|0$14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$15 非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d.\d|0.\d*[1-9]\d*|0 ...

防抖节流// 防抖函数 n秒内只触发一次function debounce(fn: Object, wait: number) { let timer; return function () { let _this = this let args = arguments if (timer) { clearTimeout(timer) } timer = setTimeout(()=> { fn.apply(_this, args) }, wait) }}// usewindow.onresize = debounce(function () { console.log("resize")}, 500)// 节流函数function thorttle (fn: Object, wait: number) { let timer return function () { ...

Mac 前端开发环境安装1.安装brew (HomeBrew为Mac的包管理工具)中科大镜像. /usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)" 2.安装GITbrew install git git -v 查看版本 是否安装成功 3.安装nvm node包管理工具 brew install nvmnvm -v 查看版本 是否安装成功 3.环境配置先检查版本、无法在终端运行,打开.zshrc/bashrc文件 # 2、这是本地存在配置文件的时候提示需要添加的配置（推荐） export NVM_DIR=~/.nvmsource $(brew --prefix nvm)/nvm.shexport PATH="/usr/local/opt/python/libexec/bin:$PATH"# pkg_configexport PATH="/opt/homebrew/opt/jpeg/bin: ...