前端
怒放的生命1991
我就是我,是不一样的烟火 功到自然成
展开
-
rrweb实现录像功能
rrweb实现录像功能rrweb实现录像功能rrweb实现录像功能rrweb实现录像功能原创 2023-03-08 17:38:21 · 859 阅读 · 1 评论 -
热力图前端功能实现
【代码】热力图前端功能实现。原创 2023-02-06 14:43:14 · 284 阅读 · 0 评论 -
原生js过滤删除用户输入input输入框的全角文本功能demo实现
原生js过滤用户输入的全角文本功能demo实现原创 2022-11-02 18:50:12 · 228 阅读 · 0 评论 -
使用http-server开启一个本地服务器
平时需要模拟启动一个本地服务器 请求静态文件可以使用http-server插件前端常使用的http服务器http-server,非常实用。可以做模拟数据,可以做静态资源服务器,也可以做调试、测试的前端服务器,可以不再依赖后端。可可以做代理转发等功能,解决平时开发大部分后端需求。1.下载命令:npm install http-server -g2.http-server使用:1.http-server 默认启动一个服务 默认一个端口号2.http-server './www/..原创 2022-03-01 11:11:52 · 1122 阅读 · 0 评论 -
前端设计模式
// 实现单例设计模式 利用闭包 缓存实例对象 只产生一个实例let single=(function(){ let singleObj=null; function getInstance(){ if(!singleObj){ singleObj=new dialogObj(); } return singleObj } function dialogObj(){ ...原创 2022-01-23 23:29:22 · 201 阅读 · 0 评论 -
构造函数实现单例模式 观察者模式面试题
请实现EventEmitter, 让打印输出符合预期const eventBus = new EventEmitter()const eventBus1 = new EventEmitter()console.log(eventBus === eventBus1) // 打印输出: truefunction handleClick(param1, param2) {console.log(param1, param2)}eventBus.on('click', handleClick)...原创 2022-01-01 19:26:56 · 266 阅读 · 0 评论 -
Vue3的优势
一、Vue 3.0 性能提升主要是通过哪几方面体现的?1、源码体积的优化重写了虚拟 dom2、响应式系统的升级用 Proxy 和 Reflect 来代替 vue2 中的 Object.definepeoperty()方法来重写响应式 vue3 中可以监听动态新增的属性 vue3 中可以监听删除的属性 vue3 中可以监听数组的索引和 length 属性3、代码编译优化使用了 组合 API 来代替 vue2 中的 Options API 组件内不需要根节点了,使用 fragment原创 2021-08-14 08:04:20 · 501 阅读 · 0 评论 -
自己写工具包发布到npm流程
把通用的功能开发成npm包,便用使用和维护,更重要的是可以分享给广大的开发者,是不是很激动人心!那么,步骤如下:1.创建项目创建项目目录,npm init ,根据需要输入配置信息(建完后也可以在package.json中自行修改)npm init控制台如图:生成一个package.json文件 如图:配置项name: 说明了npm包的名称,也就是publish后可以在npmjs中通过该名称搜索到version:版本号main:入口文件2.创建ind.原创 2021-07-28 19:42:16 · 302 阅读 · 0 评论 -
Vue中使用swiper插件实现轮播图
Vue中集成使用swiper插件实现轮播图 集成vue-awesome-swiper组件支持vue的写法:终端输入如下命令下载vue-awesome-swiper和swiper原创 2021-06-23 14:36:25 · 2378 阅读 · 0 评论 -
vscode中使用less编译wxss
设置中打开settings.json加入:原创 2021-01-29 08:26:37 · 293 阅读 · 0 评论 -
view-name
1.不使用原有的数组方法遍历数组 :递归 定时器 计时器2.生命周期除了八种之外的 keep-alive中的active deactive3.函数柯里化原创 2020-10-14 19:56:15 · 435 阅读 · 0 评论 -
JavaScript之冒泡排序
我们去大厂面试前端的时候,最容易被问及的一个内容就是排序,而其中,冒泡排序作为最基础的排序算法,很多时候是被要求进行手写代码的,面试官通过对手写代码的考察,可以看出求职者的算法基础功底、JavaScript语言功底以及在开发时,对变量的语义化水平。下面,将对冒泡排序的原理进行讲解。01冒泡排序原理假设数组中有n个数,比较相邻两个数的大小,若前者大于后者,则两数交换位置。这样,第一轮结束的时候,就可以选出最大的一个数放在最后面,那么,经过n-1轮之后,所有的数就完成了排序。02代码演示原创 2020-10-12 20:03:03 · 228 阅读 · 0 评论 -
2020-09-01- ES6 Map对象使用
1.基本的操作:增删改查 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </bo.原创 2020-09-01 23:00:14 · 129 阅读 · 0 评论 -
数组的移动
<!DOCTYPE html><html><head> <title></title></head><body> </body></html><script type="text/javascript"> function move(arr,from,to){ let newArr=[...arr]; let item=newArr.splic.原创 2020-08-20 22:24:12 · 205 阅读 · 0 评论 -
随机获取数组元素/随机点名操作demo函数
1.随机点名操作<!DOCTYPE html><html><head> <title></title></head><body></body></html><script type="text/javascript"> function arrayRandomVal(arr,start=1,end){ end =end?end:arr.length; .原创 2020-08-19 10:41:25 · 179 阅读 · 0 评论 -
while循环 boolearn demo
<!DOCTYPE html><html><head> <title></title></head><body> </body></html><script type="text/javascript"> while(true){ let str=prompt("后盾人是什么时候成立的"); if(!str) continue console.l.原创 2020-08-17 22:47:27 · 220 阅读 · 0 评论 -
js中字符串常用的方法
字符串截取:1.slice(start,end)//参数可以负数 同为正start>end 不交换位置 得到空串2.substr(start,length)//第一个参数可以负数3.substring(start,end)//end<start 交换位置 两个参数负数转换为0处理<!DOCTYPE html><html><head> <title></title></head><body&.原创 2020-08-16 22:50:43 · 457 阅读 · 1 评论 -
vue项目测试环境生产环境切换api接口前缀
复制build.js到test.js文件 :1:修改如下process.env.NODE_ENV='production'改成process.env.NODE_ENV='testing'test.js文件修改之后:'use strict'require('./check-versions')()process.env.NODE_ENV = 'testing'const ora = require('ora')const rm = require('rimraf')...原创 2020-08-05 17:18:11 · 1701 阅读 · 0 评论 -
正则学习
正则表达式 -语法正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。例如: runoo+b,可以匹配 runoob、runooob、runoooooob 等,+ 号代表前面的字符必须至少出现一次(1次或多次)。 runoo*b,可以匹配 runob、runoob、runoooooob 等,* 号代表前面的字符可以不出现,也可以出现一次或者多次(0.原创 2020-07-31 12:41:35 · 388 阅读 · 0 评论 -
解决IE11兼容HTML5 设置:设置兼容性视图网站正常显示网页
最近做一个Webhtml5网站,在chrome,firefox,safari,opera,360浏览器(极速模式)、搜狗浏览器等浏览器下均没有问题,而在IE8及IE11下发现样式无法显示,然后各种百度啊,最后在 雅朋网 的一个网友帖子的帮助下解决了问题,现在将解决方法总结如下:首先需要确保你的HTML页面开始部分要有DOCTYPE声明。DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:对标记attributes 、properties的约束规则对浏览器..原创 2020-07-08 09:49:39 · 1514 阅读 · 0 评论 -
常出现的vue警告warning vue报错:There are multiple modules with names that only differ in casing
client?b35b:147 ./src/utils/edit3d/ServerCabinet.jsThere are multiple modules with names that only differ in casing.This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.Use equal casing. Compare these module iden.原创 2020-06-20 14:36:33 · 1736 阅读 · 0 评论 -
解决ie11 浏览器的get请求方式缓存清除问题
使用axios的get请求时产生缓存,致使请求的数据不是最新的。这样的场景很多,例如我们添加或修改数据成功后,立马调用查询接口,因查询接口是get请求,产生了缓存,响应数据还是之前数据,并没有新增或修改后的数据,给人感觉像是添加或修改失败,这显然是不合理的,那么如何禁止缓存呢?用axios拦截器拦截请求,为get请求添加时间戳//axios请求拦截器axios.interceptors.request.use(config => { if (/get/i.test(config.原创 2020-06-18 17:59:10 · 1525 阅读 · 0 评论 -
IE11 Blob对象报错 关于Blob文档下载----浏览器兼容性问题
此方案是度娘查询到的,忘了是哪个网址了if( window.navigator &&window.navigator.msSavaOrOpenBlob ) {navigator.msSavaBlob(new Blob([req.data],name));}else {let url = window.URL.createObjectURL(new Blob([req.data]));let link =document.createElement('a');lin.原创 2020-06-16 20:40:05 · 1928 阅读 · 1 评论 -
将vue methods方法挂载到全局window对象,给app端或后台使用 vue项目
通过jsBridge方法,H5可以调用客户端(ios,android)的内部方法,同样,客户端也需要能调用H5页面里定义的js方法,但是在vue里,所有的方法都是在组件内部声明的,也只能在组件内部调用,并没有绑定window对象下面,这样一来,vue组件里定义的方法怎么暴露给window对象,提供给外部调用呢?created() {},mounted() { /*将backToday方法绑定到window下面,提供给外部调用 后端在使用的时候调取backToday即可 我们前端..原创 2020-06-11 14:52:58 · 6920 阅读 · 3 评论 -
JavaScript正则表达式匹配空格
匹配字符串中任何位置出现的空格:var reg=/(^\s+)|(\s+$)|\s+/g;var str = " ff gg ";reg.test(str);//true原创 2020-05-28 13:52:02 · 4867 阅读 · 0 评论 -
前端自己平时总结
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-02-24 23:06:42 · 870 阅读 · 0 评论 -
高度不固定的容器的上下左右的居中显示。(重点是垂直居中)
基本上常用的就这四种:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> /*方法一:1)将父级容器设置为:*/ .gao{ /* display:table-cell; vertical-alig...原创 2020-02-15 21:16:03 · 414 阅读 · 0 评论 -
前端资料
vue.js高仿饿了么(1-13章全)链接:https://pan.baidu.com/s/1qYSiYXluA1AlEV0EskxWZw提取码:25z9Vue.js 2.5 + cube-ui 重构饿了么 App链接:https://pan.baidu.com/s/1UZyLkzYMvhUhhX3GH5ITvA提取码:bx53Vue2.0 + Node.js + MongoDB全...原创 2020-01-17 11:24:05 · 918 阅读 · 0 评论 -
css--flex布局问题
flex-shrink:0;如果值为0,表示不减小。详解:该属性用来设置,当父元素的宽度小于所有子元素的宽度的和时(即子元素会超出父元素),子元素如何缩小自己的宽度的。flex-shrink的默认值为1,当父元素的宽度小于所有子元素的宽度的和时,子元素的宽度会减小。值越大,减小的越厉害。如果值为0,表示不减小。举个例子: 父元素宽400px,有两子元素:A和B。A宽为200px,...原创 2019-10-23 14:13:24 · 189 阅读 · 0 评论