前端
红孩儿2011
这个作者很懒,什么都没留下…
展开
-
旧项目运行报错解决
最后还是会出现包破损之类的安装不下去。其实都没有想到,最简单的方式就是找到破损的文件,单独安装。删除package-lock.json后直接。ps: 只要你在npm命令行配置过参数,比如。删除用户目录下的.npmrc。就会在用户目录下生成该文件。原创 2022-09-26 12:00:51 · 478 阅读 · 1 评论 -
自调用匿名函数
创建一个自调用匿名函数,设计参数window,并传入window对象。使得自身的代码不会被其他代码污染,同时也可以不污染其他代码。执行完匿名函数,存储在内存中相对应的变量会被销毁,从而节省内存。闭包是可以访问在函数作用域内定义的变量的函数。访问变量都是从最近的开始查找,当查找不到时才一级一级往上面查找,将window当做参数传进来可以更快的查找到。使用块级作用域,会大大降低命名冲突的问题,从而避免产生灾难性的后果。//这里是我们的块级作用域(私有作用域)//这里是我们的块级作用域(私有作用域)...原创 2022-08-17 17:52:00 · 766 阅读 · 0 评论 -
尾调用优化 与 尾递归
递归非常耗费内存,因为需要同时保存成千上百个调用记录,很容易发生"栈溢出"错误(stack overflow)。但对于尾递归来说,由于只存在一个调用记录,所以永远不会发生"栈溢出"错误。这就是说,在 ES6 中,只要使用尾递归,就不会发生栈溢出,相对节省内存。(函数调用会在内存形成一个"调用记录",又称"调用帧"(call frame),保存调用位置和内部变量等信息。尾调用由于是函数的最后一步操作,所以不需要保留外层函数的调用记录,因为调用位置、内部变量等信息都不会再用到了,如果尾调用自身,就称为尾递归。.原创 2022-08-15 10:46:58 · 282 阅读 · 0 评论 -
防抖和节流
函数防抖,在一段连续操作结束后,处理回调,利用clearTimeout 和 setTimeout实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能。为了优化体验,需要对这类事件进行调用次数的限制,对此我们就可以采用throttle(节流)和debounce(防抖)的方式来减少调用频率。如果过程中又有人进来,15秒等待重新计时,直到15秒后开始运送,这是防抖。函数防抖关注一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。目的都是,降低回调执行频率。.转载 2022-08-15 10:45:23 · 117 阅读 · 0 评论 -
阿里iconfont 无法改变图标颜色(fontclass,Unicode)
如果其他方法都没用,那么试试取消勾选彩色吧原创 2022-04-13 09:52:16 · 1094 阅读 · 0 评论 -
uni.navigateBack 改变父页面的数据
子页面 navBack() { let pages = getCurrentPages() //获取所需页面 let prevPage = pages[pages.length - 2] prevPage.$vm.refleshData = true uni.navigateBack({ delta: 1 }) }, data() { return { refleshData: fals原创 2022-04-12 10:44:41 · 254 阅读 · 0 评论 -
接口签名校验
import MD5 from ‘blueimp-md5’/** 对象属性值小写 */function sortObjectKey(source) {if (!source) returnlet target = {}Object.keys(source).sort().forEach(key => {if (source[key] !== undefined) {target[key.toLowerCase()] = source[key]}})return _sortObj原创 2022-04-09 12:48:20 · 980 阅读 · 0 评论 -
js判断是否为对象
var obj = {};1、toString(推荐)Object.prototype.toString.call(obj) === ‘[object Object]’2、constructorobj.constructor === Object3、instanceof 需要注意的是由于数组也是对象,因此用 arr instanceof Object 也为true。obj instanceof Object4、typeoftypeof obj === Object// 根据typeof判断原创 2022-04-09 12:45:17 · 8219 阅读 · 0 评论 -
vue版本--腾讯地图demo,可搜索关键字和经纬度,显示地图和搜索结果列表
腾讯地图demo,改正确的key即可用<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>腾讯地图</title> <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" name="vie原创 2022-02-18 09:34:14 · 1369 阅读 · 0 评论 -
yarn 环境安装依赖报错解决方法 The platform “win32“ is incompatible with this module.
fsevents@2.3.2: The platform "win32" is incompatible with this module.输入命令:yarn config set ignore-engines true原创 2022-02-14 16:46:17 · 1633 阅读 · 0 评论 -
如何在git下运行.sh文件
注意:windows环境下无法默认git运行.sh文件,选择在git中直接运行原创 2022-02-09 16:29:04 · 5916 阅读 · 0 评论 -
使用iconfont阿里多色矢量图标
一、问题与解决方法问题:虽然unicode和font-class很好,但你会发现都不支持多色模式。解决:引用方法名symbol来解决。通过mini-program-iconfont-cli 把iconfont图标批量换成多个平台小程序的组件。不依赖字体,支持多色彩。特性● 纯组件● 不依赖字体文件● 支持px和rpx两种格式● 原样渲染多色彩图标● 图标颜色可定制二、实现步骤:步骤1:安装插件Yarnyarn add mini-program-iconfont-cli --dev原创 2022-01-17 11:51:41 · 1029 阅读 · 0 评论 -
五福背后的 Web 3D 引擎 Oasis Engine 正式开源
文章链接原创 2021-02-26 09:25:29 · 469 阅读 · 0 评论 -
img响应式图片
img响应式图片原创 2021-02-25 11:30:43 · 370 阅读 · 0 评论 -
vue+element-ui 自定义装修前端解决方案,未完待续(下)
难点解决:1、预览区拖动排序找了比较多的插件,但是浏览器兼容上问题也是比较多。最终用了一下插件:vue-smooth-dnd添加链接描述// https://javascript.ctolib.com/kutlugsahin-vue-smooth-dnd.html#articleHeader15import { Container, Draggable } from 'vue-smooth-dnd'import { applyDrag, generateItems } from '@/utils原创 2021-02-08 18:03:47 · 1122 阅读 · 3 评论 -
vue+element-ui 自定义装修前端解决方案(上)
一、需求:一、 页面显示三个区域说明1. 动态模块(左)2. 预览区(中)1)展示模块的组合设置效果,模块分为固定模块与动态模块2) 固定模块与动态模块区别3)操作工具条(仅对动态模块):4) 可以拖动模块改变模块位置(仅对动态模块)3. 设置区(右):模块内容的设置区域数据校验:编辑时,校验输入的内容不符合规则,则在下方显示错误提示保存时,对所有模块设置的数据进行校验,如果不符合规则则自动定位:预览区自动选中该模块;设置区显示该模块的设置内容,并且在设置内容下方显示错误提示原创 2021-02-08 17:30:33 · 2599 阅读 · 1 评论 -
微信小程序问题集合
微信小程序动画卡顿,view来做动画流畅一些,不建议cover-view做动画原创 2021-01-22 11:38:14 · 548 阅读 · 1 评论 -
wx.hideHomeButton()
wx.hideHomeButton() 隐藏左侧返回home按钮原创 2021-01-12 10:09:18 · 2051 阅读 · 0 评论 -
js中,双问号??和双竖杠||的区别
js中,双问号??和双竖杠||的区别:它们的共同特点是语法一样,前面是值,后面也是值,中间是符号;都是根据前面的值来决定到底取前面还是取后面。双竖杠||,只要前面的值转为布尔值为false时,就取后面,否则取前面,如undefined、null、false、空字符串和数值0而双问号则为:前面的值为null、undefined,则取后面的值,否则都取前面的值。由此可以发现,双问号??更加适合在不知道变量是否定义时,或者是否赋值时的场景来使用。...原创 2020-12-14 09:36:17 · 19996 阅读 · 1 评论 -
微信小程序里长按识别二维码
微信小程序里长按识别二维码原创 2020-12-03 16:38:25 · 729 阅读 · 0 评论 -
ES2020 系列:可选链 “?.“
可选链 “?.”可选链 ?. 是一种访问嵌套对象属性的安全的方式。即使中间的属性不存在,也不会出现错误。例子:/*可选链路 ?. */let newObj2020 = '';console.log(newObj2020?.lal?.aa) //undefine原创 2020-11-27 17:48:59 · 195 阅读 · 0 评论 -
浏览器同源政策及其规避方法
浏览器安全的基石是"同源政策"(same-origin policy)。很多开发者都知道这一点,但了解得不全面。本文详细介绍"同源政策"的各个方面,以及如何规避它。一、概述1.1 含义1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。协议相同域名相同端口相同举例来说,http://www.example.com/dir/page转载 2020-11-23 10:23:15 · 127 阅读 · 0 评论 -
vue 前端服务器代理,proxyTable简要叙述
文章原创 2020-11-18 10:02:14 · 272 阅读 · 0 评论 -
微信小程序报错
出现这个问题,不检验合法域名即可。原创 2020-11-06 12:00:19 · 430 阅读 · 0 评论 -
vue文字无缝滚动插件vue-seamless-scroll
(1)安装执行命令npm install vue-seamless-scroll --save(2)在main.js文件里面引入使用:import scroll from 'vue-seamless-scroll'Vue.use(scroll)(3) 实例<template> <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">转载 2020-11-06 11:34:41 · 861 阅读 · 0 评论 -
element-ui 图片轮播组件 根据最高图片高度 设置组件高度
<div > <el-carousel :height="imgHeight+'px'"> <el-carousel-item v-for='(item , index) in datas.pictureArr' :key="index"> <img class="slide-picture" :src="item.picUrl" style="width: 375px"> </el-ca..原创 2020-11-05 15:42:42 · 719 阅读 · 0 评论 -
vue 直接修改props的值为何不警告
一、当直接传的是基础类型,如字符串直接在子组件修改name时,浏览器会警告二、当传进来是对象修改里面的字段的值,浏览器不用警告原创 2020-11-03 17:06:39 · 1005 阅读 · 0 评论 -
vue-draggable-resizable
https://tingtas.com/vue-draggable-resizable-gorkys/?path=/info/%E5%AE%BD%E9%AB%98%E6%AF%94–%E5%9C%A8%E7%88%B6%E7%BA%A7%E4%B8%AD%E9%99%90%E5%88%B6、vue 可拖拽可缩放 vue-draggable-resizable 组件常用总结特征没有依赖使用可拖动,可调整大小或两者兼备定义用于调整大小的句柄限制大小和移动到父元素或自定义选择器将元素捕捉到自定义网格原创 2020-11-02 16:39:59 · 15437 阅读 · 1 评论 -
input type=“file“浏览器兼容-音频
笔者之前在开发项目中有个需求:上传音频文件,给用户做好文件类型筛选(限制.mp3,.ogg格式的音频文件以及大小在2M内)不兼容代码:文件大小限制在此就不详细赘述了,我们用的是vue做的管理后台,用的框架是element-ui,当我写好这么一段话之后就以为完事了<el-upload class="upload-audit" accept="audio/mpeg,audio/ogg" :action="uploadPath" :show-file-list="false" :on转载 2020-11-02 13:41:13 · 1006 阅读 · 0 评论 -
小程序 flyio
flyio的使用在小程序中使用请求,只能使用原生的wx.request,如果想要向axios一样使用三方包,只能使用flyio,不然会报错,同时flyio是属于多种兼容的可以放心使用到多端。import Fly from 'flyio/dist/npm/wx'const fly = new Fly()const host = process.env.NODE_ENV === "development"? "模拟地址" : "真实地址"fly.config.baseURL = hostfly.c原创 2020-10-19 16:54:37 · 200 阅读 · 0 评论 -
项目用到的依赖集
vue-lazyload:懒加载vue-awesome-swiper:轮播图vue-layer-mobile:移动弹窗插件vue2-better-scroll(better-scroll):滑动vuedraggable:拖拽vue-property-decorator:使用装饰器简化书写vue-class-component.:以class的方式写组件spritejs(sprite-extend-shapes ):canvas绘画插件matter-js: web 的二维物理引擎poly-d原创 2020-10-19 15:30:58 · 168 阅读 · 0 评论 -
vue-awesome-swiper
一 首先讲下安装:通过npm安装: npm install vue-awesome-swiper --save二 在vue项目中找到main.js添加:import ‘swiper/dist/css/swiper.css’ //这里注意具体看使用的版本是否需要引入样式,以及具体位置。//(如果使用的是2.6.0以上的版本需要自己手动去加载css)import VueAwesomeSwiper from ‘vue-awesome-swiper’Vue.use(VueAwesomeSwiper)然原创 2020-10-19 14:52:27 · 174 阅读 · 0 评论 -
vue-lazyload 懒加载注意事项
一、简介懒加载可以说的上是很基础的功能了,但是平时也用的非常广泛。在vue中有很多懒加载的插件,今天给大家带来一个我比较常用的插件的一些注意事项。二、安装$ npm install vue-lazyload -D三、官方链接这里附上官方文档链接 vue-lazyload四、注意事项栗子代码(此处将本地图片地址改为了接口请求到的图片地址,其他同官方文档)<span style="font-size:18px;"><div v-lazy-container="{ selecto转载 2020-10-19 14:49:28 · 348 阅读 · 0 评论 -
qs库
qs库在新公司里面看见了一个新的库,使用qs库对url进行处理,之前也写过类型的东西方法: stringify()var obj = { a: "kingEND", b: "bname"} var res = qs.stringify(obj) console.log(res) 结果显示:a="kingEND"&b="bname"方法: parse()var url = 'method=query_sql_dataset_data&projectId=原创 2020-10-19 11:40:41 · 590 阅读 · 0 评论 -
H5移动端实现手机震动效果
判断兼容浏览器对振动API的支持情况,一个好的习惯就是在使用之前要检查一下当前你的应用环境、浏览器是否支持振动API。下面就是检测的方法:setTimeout(()=>{ navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate; if(navigator.vibrate) { console.log(转载 2020-10-13 16:28:54 · 2488 阅读 · 0 评论 -
常见的Bom对象
BOM(Browser Object Mode)浏览器对象模型,是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互,这些对象通常统称为BOM。一张图了解一下先1、window 对象——BOM核心window,顾名思义,窗口对象。它表示整个浏览器窗口,主要用来操作浏览器窗口。同时, window对象还是 ECMAScript 中的 Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下。弹框类的方法。前面省略win原创 2020-09-29 09:52:59 · 1759 阅读 · 0 评论 -
解决npm安装时出现run `npm audit fix` to fix them, or `npm audit` for details
npm audit fixnpm audit fix --forcenpm audit原创 2020-09-27 18:22:14 · 1295 阅读 · 0 评论 -
Web Components
组件是前端的发展方向,现在流行的 React 和 Vue 都是组件框架。谷歌公司由于掌握了 Chrome 浏览器,一直在推动浏览器的原生组件,即 Web Components API。相比第三方框架,原生组件简单直接,符合直觉,不用加载任何外部模块,代码量小。目前,它还在不断发展,但已经可用于生产环境。...原创 2020-09-25 10:32:33 · 140 阅读 · 0 评论 -
跨域资源共享 CORS 详解
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。本文详细介绍CORS的内部机制。一、简介CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请转载 2020-09-25 09:59:48 · 94 阅读 · 0 评论 -
常用循环
let arr = [{title:‘aaaa’,read:1000,hot:true},{title:‘bbbb’,read:300,hot:false},{title:‘cccc’,read:2000,hot:true},{title:‘dddd’,read:1900,hot:false}];// 第一种forfor(let i=0; i<arr.length;i++){console.log(arr[i]);}// 第二种forEach// forEach就是代替普通的for原创 2020-09-22 15:34:12 · 142 阅读 · 0 评论