文i-CSDN博客

原创如何实现一个防抖函数？

在前端开发中会遇到一些频繁的事件触发，比如：window 的 resize、scroll……</#containerwidth;height;;text-align;color;;font-size;

2023-04-07 14:49:08 286

原创如何实现一个节流函数？

height;;text-align;color;;font-size;</</</</</</区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的情况会每隔一定时间（参数wait）调用函数。防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

2023-04-07 14:41:57 673

parseint(08)或者parseint(09)错误对于parseint(“01”)到parseint(“07”);都能得到正确的结果，但如果是parseint(“08”) 或parseint(“09”)则返回0；首先看parseint语法：parseint(string, radix);其中string为要转换的字符串，radix为二进制，八进制，十六进制或十进制。在默认不指定radix时，当以0x开关时，为十六进制；如果以0开关且第二位不为x,则让为是八进制，（因为八进制不能

2021-09-22 16:28:09 2692

原创 vue预览图片 v-viewer

效果1、安装依赖npm install v-viewer --save2、全局引入import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar'

2021-08-18 15:53:13 976

原创前端工程化之组件批量注册使用（无需引入注册）

连连看一global.jsimport Vue from 'vue';// 死代码,拿到的就是 require.context('.', false, /\.vue$/) 匹配到的vue结尾文件名字 child1 child2function changeStr(str) { return str.charAt(0).toUpperCase() + str.slice(1);}//require.context('.', false, /\.vue$/)//三个参数分别表示 1

2021-08-16 11:30:16 201

原创 vue实现 pdf 预览、翻页、打印、导出功能

话不多说看图安装依赖npm install --save vue-to-pdfmain.js引入import vueToPdf from 'vue-to-pdf';Vue.use(vueToPdf);全部代码<template> <div> <div class="pdf-box"> <div> <el-button type="primary" @click="backPage">上一页&

2021-08-13 15:42:52 3063 8

原创浅谈原型链

js原型链JS 原型链有两个比较重要的属性：__proto__ 和 prototype；__proto__ 我的理解就是一个指针，该指针指向其构造函数的原型对象prototype。prototype 是构造函数的一个属性，你可以理解为一个空对象，可以在该对象内写任意的方法和属性，由该构造函数实例化的对象的__proto__指针会指向该构造函数的 prototype。构造函数也是对象，也有 __proto__，也会指向其构造函数的原型对象 prototype......一环扣着一环这就是 JS

2021-03-12 15:48:34 128

原创 JavaScript 代码执行顺序（一目了然）

前言之前对js的执行顺序一直搞得很迷茫，最近考虑换跳槽，又仔细回顾了下这块，又给捡起来了JavaScript 代码执行顺序1. js的执行顺序，先同步后异步2. 异步中任务队列的执行顺序：先微任务microtask队列，再宏任务macrotask队列(微任务优先级高于宏任务的前提是：同步代码已经执行完成。)3. Promise 里边的代码属于同步代码，.then() 中执行的代码才属于异步代码微任务包括 process.nextTick ，promise ，MutationObser

2021-03-12 11:37:01 5228

原创 js实现搜索显示列表

现有这一需求，有一列表，一个搜索框，要求列表根据搜索框内容显示，效果如下话不多说看图代码如下实现思路：父组件是搜索框传给子组件列表需要显示的内容子组件遍历列表通过computed 计算属性来拿到处理后的数据用到的方法有 str.toLowerCase() 转化为小写, indexOf()根据字符串判断拿到索引，有索引返回索引，没有返回-1<template> <div class="eub-wrap"> <!-- 最下面三条信息 .

2021-03-09 17:59:32 1626

原创 Echarts切换图表（k线图·折线图互相切换）

现有一需求，要求图表k线、折线相互切换依赖npm install echarts -Shtml<div id="chart" style="width: 100%;height: 350px;"></div>引入import Vue from 'vue'import * as echarts from 'echarts'Vue.prototype.$echarts = echarts mounted () { this.initData().

2021-03-05 10:08:16 3786 2

原创这个去抖你看的懂吗？

反正我是没看懂现有一这个情况，每次点击图上一情况就会重新请求数据，作为一名合格的程序猿，是不是有必要做一下去抖呢？这是大佬来给我写的代码，我还不合格实现去抖代码如下datadata(){ return{ kCharData: undefined dateTime: undefined // 定义一变量为 undefined }}点击事件 async initData () { const dateTime = new Date().getTi

2021-03-04 18:30:05 131 2

原创利用computed配合watch监听子组件中值得变化并作出相应操作

现在一需求，子组件的子组件中的值发生变化，要求根父组件时时监听得到，这是我的方法（老子不想用状态管理）父组件的子组件的子组件 data () { return { show: false, time: '5min', unit: 'k' } },父组件的子组件 <transaction-settings ref="transactionSettings"/> // 这是调用的上面 computed: { .

2021-03-04 18:00:07 863 1

原创 Aos.js 入场动画

最近写一个某网站，要求入场动画，效果如下话不多说看效果依赖 npm install aos --savemain.js引入import AOS from "aos";import "aos/dist/aos.css";AOS.init();代码<template> <div> <div style="color: #333333;"> <div data-aos="fade-up" .

2021-03-03 17:27:51 757 3

原创 call（）、apply（）bind（）的作用与区别

简介每个函数都包含两个非继承而来的方法：apply()和call()；call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性；作用它们共同的作用：call和apply 都是用来修改函数中this的指向问题；区别他们的区别在于接收参数的方式不同：call()：第一个参数是this的指向，没有参数默认指向window。在使用call()方法时，传递给函数的参数必须逐个列举出来。apply()：第一个参数是thi

2021-02-18 13:24:31 493

原创三种app的区别

简介目前市面上有三种app，企业在开发前，会根据自己的需求，选择不同的app性能的app进行开发话不多说先看表Web App(网页应用)Hybrid App(混合应用)Native App(原生应用)开发成本低中高维护更新简单简单复杂体验差中优Store或Marke认可不认可认可认可安装不需要需要需要跨平台优优差原生app（nativeapp）介绍利用Android、IOS平台官方开发语言开发

2021-02-02 10:08:00 1020

原创 vue 导出 - element - xlsx

前言星期五，又可以熬夜了，嘻嘻嘻，当然我说的是熬夜学习，把最近项目中的导入拿了出来，写了一个小Demo，方便大家直接使用导出总结说起导出，很多的后台管理里面都有，****** 什么一键导入，一键导出啊。可怜的开发仔，小丑竟是我自己话不多说，先看电视项目业务：导入存本地，导出从本地拿这里用到了 element 的上传组件，如果你也是，直接拿走导入看上集<<<<<<<<<<安装npm install xlsx上传的页

2021-01-30 10:27:15 252

原创 vue 导入 - element - xlsx

前言星期五，又可以熬夜了，嘻嘻嘻，当然我说的是熬夜学习，把最近项目中的导入拿了出来，写了一个小Demo，方便大家直接使用导入总结说起导入，很多的后台管理里面都有，一般都是方便销售那边，才给我们前端施加压力，什么一键导入，一键导出啊。可怜的开发仔，小丑竟是我自己话不多说，先看电视项目业务：导入存本地，导出从本地拿这里用到了 element 的上传组件，如果你也是，直接拿走导出看下集<<<<<<<<<<安装npm ins

2021-01-30 00:20:45 238 1

原创 Object.assign() 忘了吗

今天看隔壁前端的代码 :const requestParameters = Object.assign({}, parameter, this.queryParam)哎呦我类，这玩意干啥用的来着，就百度查了下大概用法，顺变复习一下加深记忆基本用法Object.assign 方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。const target = { a: 1 };const source1 = { b: 2 };const source2 .

2021-01-29 15:50:53 410 2

原创 (♥∀♥)倒计时

今天写app，里有一个倒计时，效果，代码如下话不多说看图相中直接拿走template样式就不给你了，用的quasar的内置类，给你也不一定能用<div>{{ day }}天 {{ hour }}小时：{{ min }}：{{ second }}</div>data定义 data () { return { curStartTime: '2021-01-30 17:06:00', // 定义你的结束时间 day: '00', .

2021-01-28 17:51:02 160

原创 mock数据简单应用

按以下提示，拷贝代码可、快速、直接得到一个对象数组的请求更多mock格式，请去官网查看1.安装// 安装axios请求npm install axios // 使用mock产生水机水机数据npm install mockjs// 使用json5解决json文件，无法添加注释(不写注释可忽略)npm install json52，根目录建立mock/index.js文件const fs = require("fs"); // 读取const path = require("pa

2021-01-27 09:22:09 187

原创分享一个阿里云开源的流程图-g6

最近有个朋友问我有什么插件可以做网络拓扑图，当时我也一脸懵，在百度上找了好久，找到了这个网站，应该可以解决他们公司的需求，觉得网站图画的不赖，这里分享给大家。话不多说看图去看官网…...

2021-01-26 14:15:26 949 1

原创 Vue刷新页面

我们在写项目的时候，经常会遇到，用户执行完某个动作，改变了某些状态，需要重新刷新页面，以此来重新渲染页面。如：用户登录成功、增加、删除、更新等。1.原始方法：window.location.reload();2.vue自带的路由跳转：this.$router.go(0);用过的人都知道，前两者都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。所以，我们选择第三种方式：3. 首先在App里面写下如下代码：<template> <div id="app"&g.

2021-01-25 14:02:10 1068

原创在for of/in循环中使用const定义循环的数据，数组也可以使用 indexOf

场景有时候在拿到接口反回数据的时候我们需要循环数据,就可以用for of / in当然还有好多其他的循环，这里忽略首先先看一个循环的数组注意区分 of in 返回结果data() { return { list: [ { name: "帅帅1", age: 11 }, { name: "帅帅2", age: 12, some

2021-01-22 13:51:57 761

原创 JavaScript 文件对象File

在浏览器中操作文件，多数情况下用到的是 File 对象，从<input type='file' />元素获取，进而继续操作(例如将选择的图片展示在页面上，用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API.File 对象继承自 Blob 对象，先看看 Blob 对象。1. Blob 对象Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。Blob构造函数 Blob(array[, options])ar

2021-01-21 15:51:45 27648 1

原创 vue.nextTick()

什么是Vue.nextTick()？？定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的js代码；理解：nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数，<template> <div class="hello

2021-01-18 14:29:13 91

原创 components 异步加载组件

组件的懒加载require: 运行时调用，理论上可以运用在代码的任何地方，import：编译时调用，必须放在文件开头懒加载：component: resolve => require([’@/view/index.vue’], resolve)用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js非懒加载：component: index如果用import引入的话，当项目打包时路由里的所有comp

2021-01-15 17:17:40 1144

原创 JavaScript 标准内置对象（没事就看）

源于开发者，服务开发者。最今发现一个新网站，在里面学习到了很多知识. 分享给大家，快去变强吧…去变强…

2021-01-15 12:00:03 134

原创 Moment.js JavaScript 日期处理类库

Moment.jsMoment 被设计为在浏览器和 Node.js 中都能工作。所有的代码都应该在这两种环境中都可以工作，并且所有的单元测试都应该在这两种环境中运行。CI 系统当前使用以下的浏览器：Windows XP 上的 Chrome，Windows 7 上的 IE 8、9 和 10，Windows 10 上的 IE 11，Linux 上最新的 Firefox，OSX 10.8 和 10.11 上最新的 Safari。安装依赖npm install moment --save # n

2021-01-15 11:00:47 119

原创在vue中使用echarts

看图安装依赖npm install vue-echarts// 或者npm install --save echarts引入一般使用 echarts 都是按需引入（可以放在main.js里全局用，也可以放在页面里单页面使用）import Vue from "vue";import ECharts from "vue-echarts/components/ECharts.vue";// 手动引入 ECharts 各模块来减小打包体积import "echarts/lib/char

2021-01-14 13:59:33 435

原创 axios封装

安装npm install axios代码axios.js 封装import axios from 'axios'import Vue from 'vue'// import qs from 'qs' // 如果要求参数序列化// export let ConfigBaseURL = 'http://*****' // 默认路径，这里也可以使用env来判断环境export let ConfigBaseURL = 'http://******' // 测试// 使用create方

2021-01-13 15:15:17 98 1

原创 QRcode.js 生成二维码

什么是QRCode.jsQRCode.js是用于制作二维码的JavaScript库。QRCode.js支持在HTM中使用HTML5画布和表格标签进行交叉浏览。QRCode.js没有依赖关系VUE里安装QRCode.js包npm i qrcodejs2VUE中引入qrcodejs2包import QRCode from 'qrcodejs2'创建DOM元素，存储二维码的位置<div id="qrcode" ref="qrcode"></div>methods

2021-01-11 17:06:24 271

原创 VUE 移动端进入页面监听滑动或点击事件后，超过规定时间没有任何操作，重置页面

类似于某银行app，时间长不操作页面，执行相应业务<template>  <div id="app" @touchend="moveEvent" @click="moveEvent"> 12321 </div></template><script>export default { name: "App", data() { return { // 用户超时定

2021-01-11 16:15:06 1034

原创 vue-lazyload实现图片懒加载

安装依赖npm i vue-lazyload -S// 或者yarn add vue-lazyloadmain.js引入import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)// or with optionsconst loadimage = require('./assets/loading.gif') //loading图const errorimage = require('./assets/error.gif')

2021-01-11 14:45:24 137

原创深入理解Promise

ES6提供的Promise对象是异步控制相较于回调的更好的一种方法。包括ES8提供的asyncFunction本质上也是基于Promise和生成器的结合，因此在已经了解Promise对象的常用API基础上，更加深入的去了解如何使用Promise去解决一些常见的难题对于开发将会有一些帮助。文章阅读前，希望读者已经对Promise的使用及相关api有了一定的了解。[ 快速学习Promise ]一、如何对Promise异步任务进行超时监听任务描述作为一道开胃小菜，这个问题还是不难解决的。平时对于一些.

2021-01-09 12:50:03 332

原创 HTML5--使用浏览器全屏操作、退出全屏、是否全屏功能

复制即可代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <div style="background: red;width:500px;height:500px;margin: auto;">&l

2021-01-08 17:38:13 492

原创在VueCli3项目中使用Bootsrap

在VueCli3项目中使用Bootsrap在Vue开发中，为了实现响应式效果加入了Bootstrap框架安装npm i bootstrap jquery popper.js --save配置在项目根目录下新建或修改vue.config.jsconst webpack = require("webpack");module.exports={ configureWebpack:{ plugins: [ new webpack.ProvideP

2021-01-08 17:25:02 346

原创 vue-clipboard2实现复制功能

复制代码即可在Vue中通过该模块能够实现将内容复制到剪贴板的功能安装npm i vue-clipboard2 --save在页面或者全局-main.js引入看自己import Vue from "vue";import VueClipBoard from "vue-clipboard2";Vue.use(VueClipBoard);页面代码<template> <div> <div> <textarea

2021-01-08 17:11:24 341

原创在WEB项目中防御XSS攻击

在WEB项目中防御XSS攻击所谓XSS攻击就是开发者在网站开发时提供了用户的输入入口中输入可执行代码或标记语言（当然本意可能只是想让用户输入文本），并且该内容能够直接在网页中执行（例如在VUE中提供的v-html指令）时，攻击者利用该漏洞，注入一些恶意代码攻击该网站的用户。有效的XSS攻击可能造成的后果一次有效的XSS攻击轻则导致网页乱码（通过注入HTML），重则为了搜集用户信息，攻击者甚至会在有漏洞的程序中插入 JavaScript、VBScript、 ActiveX或Flash以欺骗用户。一旦

2021-01-08 16:38:47 538

原创在Vue中点击某个元素以外的元素时让这个元素隐藏或关闭

在实际开发中，可能会有点击某个元素以外的元素时让这个元素隐藏或关闭的需求。在Vue中实现则更加简单。思路为全局document添加click事件，判断是否为指定节点及其子节点，如果不是则隐藏该指定节点。例如当前组件现有功能是：span默认不显示，当点击button时显示span。点击非span button时span消失<template> <div> <span v-show="isShow" ref="showPanel">没点击我我就消.

2021-01-08 14:47:01 2625

原创在Node.js中实现邮箱验证码的发送与验证

在实际开发中，可能会遇到注册时提供邮箱验证码的需求。在Node.js中是可以实现的。以下分享一些我的开发经验。开发环境Node.jsExpressMongooseMongoDB邮箱验证码思路验证码发送阶段客户端上传邮箱地址到服务端，服务端通过生成随机验证码，并将这个验证码发送到用户上传的这个邮箱中。此时服务端需要将这个邮箱和验证码保存到数据库的某张表中（后文中使用Code来称呼这个表），同时保证这条记录的唯一性。并在有效时间内将这条记录删除（此时间就是验证码的有效时间）验证码.

2021-01-08 14:24:41 3663 1

空空如也

空空如也