当前位置: 首页 > news >正文

vue 项目涉及的焦点聚焦、格式化日期、判断是否为对象或数组、判断是否为空、深拷贝、节流、防抖

  • 焦点聚焦
import Vue from 'vue'
// 插件对象(必须有 install 方法, 才可以注入到 Vue.use 中)
export default {install () {Vue.directive('fofo', {inserted (el) {el = el.querySelector('input')el.focus()}})}
}
  • 格式化日期格式
export const formatDate = (time) => {// 将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 return time.replace(/\-/g, "/");
}
  • 是否在数组内
export const inArray = (search, array) => {for (var i in array) {if (array[i] == search) return true}return false
}
  • 日期转换
export const dateFormat = (fmt, date) => {const opt = {"Y+": date.getFullYear().toString(), // 年"m+": (date.getMonth() + 1).toString(), // 月"d+": date.getDate().toString(), // 日"H+": date.getHours().toString(), // 时"M+": date.getMinutes().toString(), // 分"S+": date.getSeconds().toString() // 秒// 有其他格式化字符需求可以继续添加,必须转化成字符串};let retfor (let k in opt) {ret = new RegExp("(" + k + ")").exec(fmt)if (ret) {fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))};};return fmt
}

dateFormat('YYYY-mm-dd HH:MM:SS', new Date()) ==> 2020-01-01 08:00:00

  • 判断是否为空对象
export const isEmptyObject = (object) => {return Object.keys(object).length === 0
}
  • 判断是否为对象
export const isObject = (object) => {return Object.prototype.toString.call(object) === '[object Object]'
}
  • 判断是否为数组
export const isArray = (array) => {return Object.prototype.toString.call(array) === '[object Array]'
}
  • 判断是否为空
export const isEmpty = (value) => {if (isArray(value)) {return value.length === 0}if (isObject(value)) {return isEmptyObject(value)}return !value
}
  • 对象深拷贝
export const cloneObj = (obj) => {let newObj = obj.constructor === Array ? [] : {};if (typeof obj !== 'object') {return;}for (let i in obj) {newObj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i];}return newObj
}
  • 节流函数
export function throttle(fn, delay = 100) {// 首先设定一个变量,在没有执行我们的定时器时为nullvar timer = nullreturn function() {// 当我们发现这个定时器存在时,则表示定时器已经在运行中,需要返回if (timer) returntimer = setTimeout(() => {fn.apply(this, arguments)timer = null}, delay)}
  • 防抖函数
export function debounce(fn, delay) {let timerreturn function() {const that = thisconst _args = arguments // 存一下传入的参数if (timer) {clearTimeout(timer)}timer = setTimeout(function() {fn.apply(that, _args)}, delay)}
}

相关文章:

vue 项目涉及的焦点聚焦、格式化日期、判断是否为对象或数组、判断是否为空、深拷贝、节流、防抖

焦点聚焦 import Vue from vue // 插件对象(必须有 install 方法, 才可以注入到 Vue.use 中) export default {install () {Vue.directive(fofo, {inserted (el) {el el.querySelector(input)el.focus()}})} }格式化日期格式 export const formatDate (time) > {// 将xx…...

软件工程知识梳理6-运行和维护

软件维护需要的工作量很大,大型软件的维护成本高达开发成本的4倍左右。所以,软件工程的主要目的就是要提高软件的可维护性,减少软件维护所需要的工作量,降低软件系统的总成本。 定义:软件已经交付使用之后,…...

docker- php7.4

安装 gd拓展 anzhuanga在Dockerfile里面安装php7.4的GD库 - 知乎 apt update apt install -y libwebp-dev libjpeg-dev libpng-dev libfreetype6-devdocker-php-source extractdocker-php-ext-configure gd \ --with-jpeg/usr/include \ --with-freetype/usr/include/docker-…...

开发一个Android App,在项目中完成添加联系人的功能,通过ContentResolver向系统中添加联系人信息。

实现步骤&#xff1a; &#xff08;1&#xff09;添加动态联系人的权限。 &#xff08;2&#xff09;创建Activity和布局文件&#xff0c;添加输入框和按钮等控件。 &#xff08;3&#xff09;完成添加联系人的功能。 代码文件如下&#xff1a; activity_main.xml文件 <!…...

Flume搭建

压缩包版本&#xff1a;apache-flume-1.9.0-bin.tar 百度盘链接&#xff1a;https://pan.baidu.com/s/1ZhSiePUye9ax7TW5XbfWdw 提取码&#xff1a;ieks 1.解压 tar -zxvf /opt/software/apache-flume-1.9.0-bin.tar.gz -C /opt/module/ 2. 修改文件名 [rootbigdata1 opt]…...

Web APIs 1 DOM操作

Web APIs 1 引入&#xff1a;const优先Web API 基本认知01 作用和分类02 什么是DOM03 DOM树04 DOM对象 获取DOM对象01 根据CSS选择器获取02 其他获取DOM元素方法 操作元素内容01 innerText 属性02 innerHTML 属性 操作元素属性操作元素的常用属性操作元素的样式属性操作表单元素…...

dvwa,xss反射型lowmedium

xss&#xff0c;反射型&#xff0c;low&&medium low发现xss本地搭建实操 medium作为初学者的我第一次接触比较浅的绕过思路high low 发现xss 本关无过滤 <script>alert(/xss/)</script> //或 <script>confirm(/xss/)</script> //或 <scr…...

从云计算到物联网:虚拟化技术的演变与嵌入式系统的融合

文章目录 一、硬件性能提升&#xff1a;摩尔定律与嵌入式虚拟化二、CPU多核技术&#xff1a;为嵌入式虚拟化提供支持三、业务负载整合&#xff1a;嵌入式虚拟化的核心需求四、降低硬件成本&#xff1a;虚拟化技术的经济效益五、软件重用与移植&#xff1a;虚拟化技术的优势六、…...

linux 文件查看 head 、 cat 、 less 、tail 、grep

查看文件详细信息 stat 文件 cat 》》适合显示小文件【行数比较少】&#xff0c;如果行数较多&#xff0c;屏幕显示不完整&#xff08;如果虚拟操作&#xff0c;是无法上下键的&#xff0c;或者滚动鼠标的&#xff0c;第三方 xsheel&#xff0c;crt 可以方向键查看&#xf…...

13.2 Web与Servlet进阶(❤❤)

13.2 Web与Servlet进阶 1. 请求与响应1.1 URL与URI1.2 HTTP请求的结构1. 结构2.后端获取访问工具类型:getHeader().toLowerCase方法1.3 响应的结构1. 结构2. 响应常见状态码3. 后端设置响应参数4. 响应的ContentType作用1.4 请求转发与响应重定向应用1. 请求转发:getRequestDis…...

记录解决报错--vue前后端分离,接口401(Unauthorized)

1.场景 前端访问不了后端接口。报错401。 2.解决步骤 ①在页面console.log(111)查看走到代码的位置没有。&#xff08;走到了&#xff0c;没问题&#xff09; ②查看vue.config.js配置。这段配置就是vue访问api的url。&#xff08;没问题&#xff09; devServer: {port: 80…...

【笔记】Android 常用编译模块和输出产物路径

模块&产物路径 具体编译到软件的路径要看编译规则的分区&#xff0c;代码中模块编译输出的产物基本对应。 Android 代码模块 编译产物路径设备adb路径Comment 模块device/mediatek/system/common/ 资源overlay/telephony/frameworks/base/core 文件举例res/res/values-m…...

部署私有知识库项目FastGPT

FastGPT 是一个基于 LLM 大语言模型的知识库问答系统,提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排,从而实现复杂的问答场景。 项目文档: [快速了解 FastGpt | FastGptFastGPT 是一个基于 LLM 大语言模型的知识库问答系统,提供开箱即…...

【2024-02-02】华为秋招笔试三道编程题解

恭喜发现宝藏&#xff01;搜索公众号【TechGuide】回复公司名&#xff0c;解锁更多新鲜好文和互联网大厂的笔经面经。 作者TechGuide【全网同名】 订阅专栏&#xff1a; 【专享版】2024最新大厂笔试真题解析&#xff0c;错过必后悔的宝藏资源&#xff01; 第一题&#xff1a;找…...

银行数据仓库体系实践(8)--主数据模型设计

主数据区域中保留了数据仓库的所有基础数据及历史数据&#xff0c;是数据仓库中最重要的数据区域之一&#xff0c;那主数据区域中主要分为近源模型区和整合&#xff08;主题&#xff09;模型区。上一节讲到了模型的设计流程如下图所示。那近源模型层的设计在第2.3和3这两个步骤…...

vue在main.js中引入三方插件不生效的原因

有的时候需要比较复杂的功能,但是自己实现比较复杂的话,可以引入第三方插件.如果这个第三方插件需要全局都使用的话,可以在main.js中进行引入. 比如router elementplus之类的. import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/…...

chatgpt搭建

chatgpt两步搭建大法 部署docker环境 下载docker curl -fsSL https://get.docker.com -o get-docker.sh安装docker sh get-docker.sh运行docker服务 systemctl start docker查看运行状态 systemctl status docker设置docker开机自启 systemctl enable docker部署chatgpt…...

vue基本理解

1、js闭包&#xff0c;作用&#xff1f;&#xff1f; 闭包是指在一个函数内部&#xff0c;可以访问外部函数的变量&#xff0c;即使外部函数已经执行完毕。闭包的作用有&#xff1a; 保护变量&#xff1a;闭包可以保护函数内部的变量&#xff0c;使其不受外部环境的影响。实现…...

NLP入门系列—Attention 机制

NLP入门系列—Attention 机制 Attention 正在被越来越广泛的得到应用。尤其是 [BERT]火爆了之后。 Attention 到底有什么特别之处&#xff1f;他的原理和本质是什么&#xff1f;Attention都有哪些类型&#xff1f;本文将详细讲解Attention的方方面面。 Attention 的本质是什…...

实习记录——第十天

今天啥也不想说了&#xff0c;ctf里面还有道题目还没做&#xff0c;这里就不写了&#xff0c;把日报奉上&#xff0c;懂得都懂&#xff1a; 2.2日总结&#xff1a; 早上对xx银行的招聘网站做了渗透测试&#xff0c;对招聘网点赞处做重放看是否会多次点赞&#xff0c;对收藏处考…...

UserAgent包名识别工具

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 背景具体实现 背景 为了更准确地分析用户下单行为的来源渠道&#xff0c;并实现精细化运营与风险控制&#xff0c;我们希望在用户下单时&#xff0c;能够通过请求中…...

jvm 垃圾收集算法 详解

垃圾收集算法 分代收集理论 垃圾收集器的理论基础&#xff0c;它建立在两个分代假说之上&#xff1a; 弱分代假说&#xff1a;绝大多数对象都是朝生夕灭的。强分代假说&#xff1a;熬过越多次垃圾收集过程的对象就越难以消亡。 这两个分代假说共同奠定了多款常用的垃圾收集…...

SpringAI(GA):Nacos2下的分布式MCP

原文链接地址&#xff1a;SpringAI(GA)&#xff1a;Nacos2下的分布式MCP 教程说明 说明&#xff1a;本教程将采用2025年5月20日正式的GA版&#xff0c;给出如下内容 核心功能模块的快速上手教程核心功能模块的源码级解读Spring ai alibaba增强的快速上手教程 源码级解读 版…...

[面试精选] 0104. 二叉树的最大深度

文章目录 1. 题目链接2. 题目描述3. 题目示例4. 解题思路5. 题解代码6. 复杂度分析 1. 题目链接 104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 2. 题目描述 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点…...

WPS中将在线链接转为图片

WPS中将在线链接转为图片 文章目录 WPS中将在线链接转为图片一&#xff1a;解决方案1、下载图片&#xff0c;精确匹配&#xff08;会员功能&#xff09;2、将在线链接直接转为图片 一&#xff1a;解决方案 1、下载图片&#xff0c;精确匹配&#xff08;会员功能&#xff09; …...

程序代码篇---Python串口

在 Python 里&#xff0c;serial库&#xff08;一般指pyserial&#xff09;是串口通信的常用工具。下面为你介绍其常用的读取和发送操作函数及使用示例&#xff1a; 1. 初始化串口 要进行串口通信&#xff0c;首先得对串口对象进行初始化&#xff0c;代码如下&#xff1a; i…...

libiec61850 mms协议异步模式

之前项目中使用到libiec61850库&#xff0c;都是服务端开发。这次新的需求要接收服务端的遥测数据&#xff0c;这就涉及到客户端开发了。 客户端开发没搞过啊&#xff0c;挑战不少&#xff0c;但是人不就是通过战胜困难才成长的嘛。通过查看libiec61850的客户端API发现&#xf…...

AI IDE 正式上线!通义灵码开箱即用

近期&#xff0c;通义灵码AI IDE正式上线&#xff0c;即日起用户可在通义灵码官网免费下载开箱即用。 作为AI原生的开发环境工具&#xff0c;通义灵码AI IDE深度适配了最新的千问3大模型&#xff0c;并全面集成通义灵码插件能力&#xff0c;具备编程智能体、行间建议预测、行间…...

集成学习三种框架

集成学习通过组合多个弱学习器构建强学习器&#xff0c;常见框架包括Bagging&#xff08;装袋&#xff09;、Boosting&#xff08;提升&#xff09; 和Stacking&#xff08;堆叠&#xff09; 一、Bagging&#xff08;自助装袋法&#xff09; 核心思想 从原始数据中通过有放回…...

Neovim - 常用插件,提升体验(三)

文章目录 nvim-treelualineindent-blanklinetelescopegrug-far nvim-tree 官方文档&#xff1a;https://github.com/nvim-tree/nvim-tree.lua 以前我们都是通过 :e 的方式打开一个 buffer&#xff0c;但是这种方式需要记忆文件路径&#xff0c;因此这里可以通过 nvim-tree 插…...