其他
关注
分享
扫一扫
bugdemon8023
这个作者很懒，什么都没留下…
展开
-
前端接入sentry可能会遇到的坑
3. SentryWebpackPlugin 的urlPrefix配置错误（打开对应的web程序，打开网络控制面板，筛选js，查看该js 对应请求的地址即可，例如：http://xxxxx.com/static/1.js 那么我们就填写：http://xxxxx.com/static）在配置版本的时候除了填写版本号，最好在版本号添加该项目名称前缀。2. nginx 是否设置了上传的最大限度（这里会有报错）异步错误不捕获不上报（全网唯一正确的解决方案）1. 仔细查看对应的路径是否正确。原创 2022-12-21 18:09:01 · 1045 阅读 · 1 评论 -
vant 日历组件优化
vant 日历组件卡顿优化原创 2022-11-14 18:44:51 · 1681 阅读 · 1 评论 -
vscode nodemon打断点
1，修改package.json"scripts": { "debug": "nodemon server.js" }, 2，修改.vscode/launch.json{ "version": "0.2.0", "configurations": [ { "name": "随意", "type": "node", "request": "launch",原创 2020-10-14 16:51:26 · 470 阅读 · 0 评论 -
前端数据映射
前端数据映射—>平铺1.树形结构的映射const data = [{ id:1, name:'1', children:[ { id:2, name:'1-1', children:[ { id:3, name:"1-1-1" }, { id:4, name:"1-1-2", children:[ { i原创 2020-09-18 18:46:54 · 3304 阅读 · 0 评论 -
Promise的实现原理（三）
Promise的实现原理（三）1.Promise 实现原理1.1 Promise 实现原理之链式调用1.1.1 基础用法const p =new Promise((resolve,reject)=>{ resolve('成功')//这里得成功会调用下一个.then里的res回调函数 reject('失败')//这里得失败会调用下一个.then里的err回调函数})const p1 = p.then(res=>{ return res // 这里return值会在下一个.then原创 2020-09-18 15:18:27 · 227 阅读 · 0 评论 -
Promise的实现原理（二）
Promise的实现原理（二）1.在Promise的实现原理（一）中我们已经实现到同步的promiseclass Mypromise { // executor 执行者，也就是调用方传过来的函数，他是立即执行的 constructor(executor){ // executor又有两个回调函数，一个成功的函数resolve，一个失败的状态reject，首先定义这两个函数 // 使用者传回成功的value值 const resolve = (value)=>{ // 因为pr原创 2020-09-15 10:47:01 · 232 阅读 · 0 评论 -
Promise的实现原理（一）
Promise的实现原理（一）1.先说一下用法，根据用法来一步步实现；1.1 简单使用// 传如一个函数，函数里有两个参数，resolve，reject new Promise((resolve,reject)=>{ // 成功就调用 resolve() })1.1.1 来实现我们自己的Mypromiseclass Mypromise { // executor 执行者，也就是调用方传过来的函数，他是立即执行的 constructor(executor){ // exe原创 2020-09-14 18:16:44 · 785 阅读 · 0 评论 -
移动端适配
npm install lib-flexible --savenpm install postcss-pxtorem --save-dev或者：npm install postcss-px2rem --save-devpostcss-pxtorem会将px转换为rem，rem单位用于适配不同宽度的屏幕，根据<html>标签的font-size值来计算出结果，1rem=html标签的font-size值。引入lib-flexible在项目入口文件main.js 中引入lib-fl原创 2020-09-14 17:31:37 · 186 阅读 · 0 评论 -
Aop 切片编程
AOP 切片编程需求：1.在不动原来封装好的函数下，增加业务代码例如：const render = function(){ xxxxxxx console.log('render);}const oldPrototype = new Function().prototype;render.prorotype__proto__ = oldPrototype;render.before = function(callback){ return ()=>{ callback()原创 2020-09-14 17:12:53 · 146 阅读 · 0 评论 -
定位缩放位置不发生改变
当一个元素需要定位到另一个元素上时，缩放会导致定位偏移例如：图片缩放时，定位点将发生偏移；处理:1.得到底层图片最大尺寸（maxWidth）2.实时更新底层图片大小（updateWidth）3.动态定位:{left: ${(i.latitude（需要定位元素坐标） * updateWidth) / mapWidth}px,top:同上，得到最大高度与实时更新高度即可}...原创 2020-08-17 14:24:42 · 1818 阅读 · 0 评论 -
linux jenkins连接gitlab 报错128
1.查看linux 下用户~cat /etc/passwdroot@wordpress-virtual-machine:/# cat /etc/passwdroot:x:0:0:root:/root:/bin/bashdaemon:x:1:1:daemon:/usr/sbin:/usr/sbin/nologinbin:x:2:2:bin:/bin:/usr/sbin/nologinsys:x:3:3:sys:/dev:/usr/sbin/nologinsync:x:4:65534:sync:原创 2020-05-22 14:11:00 · 572 阅读 · 0 评论 -
ES6对象多层解构
这里写自定义目录标题ES6 对象多次解构ES6 对象多次解构 const data = {res:'ceshi',a:{b:'b测试'}} 接收res另起别名为res1； 接受a，在对a进行解构， const {res:res1,a:{b:b1}} = data; console.log('res1',res1);...原创 2020-03-20 18:01:36 · 3244 阅读 · 0 评论 -
scrollIntoView 滑动卡顿或scrollIntoView不生效问题
在实际生产中遇到scrollIntoView滑动卡顿现象； dom.scrollIntoView({ behavior: "smooth", block: "nearest", //"start",// | "center" | "end" | "nearest", // 默认 inline: "nearest" ...原创 2020-01-19 19:07:39 · 7530 阅读 · 2 评论 -
compose函数第一步传参结构
函数传参let a = 1;let b = 2;let c = 3;function test(...[first,...outer]){// 在这个函数中我想拿到第一个参数 console.log(first) //1 console.log(outer) //[2,3]}原创 2019-12-23 15:43:30 · 281 阅读 · 0 评论 -
for循环自定义跳出某一层循环体
在使用for循环时，为了资源的消耗，我们可以指定for循环跳出某一层循环体，距离如下： out: for (let i = 0; i < 10; i++) { int: for (let j = 0; j < 10; j++) { console.log('i+j',i+j) if(i+j===2){ ...原创 2019-12-20 17:48:34 · 1096 阅读 · 0 评论 -
Echarts
markPoint: { data: [ { name:'某个坐标', yAxis:'2.2', xAxis:'04:30', value:'标记1' ...原创 2019-12-16 10:26:17 · 100 阅读 · 0 评论 -
umi 写多个className 名
<div className={`${style.a} ${style.b}`}></div>原创 2019-12-16 10:21:07 · 1087 阅读 · 0 评论 -
在react中使用防抖以及节流函数
在react中使用防抖以及节流函数这里已防抖函数举例；debounce.jsexport debounce = (fn,wait=1000)=>{ let timer = 0; if(timer){ clearTimeout(timer) } return (...args)=>{ timer = setTimeOut(()=>{ fn.apply(th...原创 2019-12-06 19:37:04 · 3133 阅读 · 0 评论 -
Uncaught SyntaxError: Unexpected token
部署前端项目报错Uncaught SyntaxError: Unexpected token1.产生原因：前端使用了BrowserRouter路由方式，当跳转二级路由时，前端所引用的js文件以及css 文件路径会因二级路由的原因所改变。2.解决：配置webpack，output：{ ..., publicPath:isEnvProduction?'/':'.'}当前端使用Brows...原创 2019-11-28 20:21:40 · 495 阅读 · 0 评论 -
git:remote: HTTP Basic: Access denied fatal: Authentication failed forXXXX
git 拉取代码时出现：remote: HTTP Basic: Access deniedfatal: Authentication failed for 'http://gitlab.yitu-inc.com/tzhou1/sturnus.git/'1.输入git config --system --unset credential.helper 清空密码和账户2.可以打开控制面板中的...原创 2019-10-14 13:35:06 · 3630 阅读 · 0 评论 -
如何阻住Promise中的.then方法！
今天接手了一个别人的项目，存在一些问题，老大让我更改修改一下！前提条件：一个用户只能一处登录，后台返回值中没有code码，只有没有检测有木有登录的接口有返回code码！问题：A人员登录了用户1，准备提交一个表单，正好这个时候另一个B人员再次登录用户1的账号，此时A人员点击提交按钮，此时A人员界面弹窗两个①用户未登录②提交成功解决方案：在封装请求的js中在此添加一个前置条件，每次发送...原创 2019-05-15 16:18:22 · 1186 阅读 · 0 评论 -
react中父组件调用子组件的方法~~~~
react中父组件调用子组件的方法class A extends Component{ onref=(ref)=>{ this.children = ref } add =()=>{ this.children .add(5) } render(){ return <div> <B onref = {this.onref}>&l...原创 2019-03-29 16:21:05 · 1368 阅读 · 2 评论 -
封装antd中的form表单
封装一个antd中的form表单组件！今天去尚品网面试，问了一个知识点，说antd的form表单怎么实现的，怎么拿到数据的，我一时懵比 没有打出来，回来的一路我都很难受，回到现在的公司，抽公司休息时间我实现了一款比较简单版本的form表单！废话不多说，直接说代码：1.首先呢看了看antd的用法是这样的：getFieldDecorator是this.props 结构出来的 ，他接受了两个参...原创 2019-03-29 14:59:28 · 3921 阅读 · 0 评论 -
手写antd中的RadioGroup组件
标题手写antd中的RadioGroup组件import { react } from 'react';function RadioGroup (props){ return <div> { React.Children.map(props.Children,child=>{ return React.cloneElement(child...原创 2019-03-07 17:23:51 · 2008 阅读 · 0 评论 -
你可能会用到的鼠标穿透~~~~~
何为输小穿透？意思是：一图胜过千言万语!在拖拽的方块的css中设置{…style,pointer-events:none;★★★★★}原创 2019-01-31 14:21:54 · 2365 阅读 · 1 评论 -
MVVM实现过程（3）
MVVM实现过程（3）为了更好的更方便的更改数据，我们可通过数据代理来完成这项操作！思路：把所有的数据都绑定到，this上，我们只需要通过实例点语法即可更改添加数据 ，好处是我们只需要xx.a或者xx.b来更改数据，不需要xx.data.a或者xx.data.b 更或者xx.data.a.a。<body> <div id = 'app'> </div&g...原创 2019-01-25 16:45:43 · 444 阅读 · 0 评论 -
非常牛逼的二进制开关
在前后端控制某项状态（状态开关非常多）时，可运用二进来控制，前后台协调好哪一位控制怎么样的一个状态；例如：第一位 ‘0’ 用来控制不显示，‘1’控制显示；第二位 ‘0’用来控制字体颜色（默认颜色），‘1’控制显示红色等等。。。//二进制转换 binary(num, Bits) { var d = parseInt(num / 2) ...原创 2019-01-09 17:57:48 · 1942 阅读 · 0 评论 -
MVVM实现过程（2）
数据劫持Observer<body> <div id = 'app'> </div></body><script> let smz = new SMZ({ el:'#app', data:{ a:1 } }) function SMZ(options={}){ this.$options = oo...原创 2019-01-24 18:58:26 · 157 阅读 · 0 评论 -
MVVM实现过程（1）
1.通过数据劫持，来实现MVVM；第一步：了解Object.defineProperty();可接受三个参数：1.所要监听的对象，例如：let obj = {};2.对象中的哪个key 发生变化，key3.第三个参数是一个对象有： { onfigurable:true, false 不可以删除 true 可以删除 enumerable:true,false 不可以通...原创 2019-01-24 18:34:51 · 433 阅读 · 0 评论 -
获取上一个页面的url
前端获取上一个页面的url路径直接上代码：document.referrer可用此API 来获取~原创 2019-09-12 18:19:40 · 1705 阅读 · 0 评论 -
滚动列表，滑动到可见区域，聊天记录
往往前端有一些需求：例如1.聊天记录一直显示最新的一条，自动滚动；例如2.点击按钮，列表页中的某一条滚动到可见区域例如3.ios下，键盘会遮挡输入框等等。。。只要有需要滚动的，都可使用该API。Element.scrollIntoView()OK ~...原创 2019-09-12 19:21:10 · 441 阅读 · 0 评论 -
禁止浏览器缩放
移动端页面禁止用户缩放界面只需加上即可，但是pc端确实比较麻烦，用户可以通过如下几种方式来缩放：windows：ctrl + +/-ctrl + 滚轮浏览器菜单栏mac：cammond + +/-浏览器菜单栏由于浏览器菜单栏属于系统软件权限，没发控制，我们着手解决ctrl/cammond + +/- 或 Windows下ctrl + 滚轮 缩放页面的情况，只能通过js来控制了Re...原创 2019-10-11 15:08:53 · 1134 阅读 · 0 评论 -
图片禁止下载
图片禁止下载<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport...原创 2019-10-09 17:24:22 · 1034 阅读 · 0 评论 -
react lazy----延迟加载组件
const CreateProject = lazy(() => { return new Promise(resolve => setTimeout(resolve, 2000)).then( () =>import('../common/CreateProject.js') ) })原创 2019-09-25 17:17:37 · 1015 阅读 · 0 评论 -
图片放大在区域内拖拽，正常比例是不能拖拽
最近遇到一个需求：1.图片可拖拽，但是在正常比例下，是拖拽不动的2.当图片放大后，图片的大小大于盒子的大小时，此时可拖拽要求：1.放大后的图片的边缘不能在盒子内出现，意思就是只能在盒子内拖动（图片的左边缘不能小于盒子的左边缘）写了一下午：主要代码如下：第一张：点击时记录位置。移动时限制大小第二张：滑动滚轮的时候判断图片偏移量，不要让图片的边框出现在div内，意思不要露出背景色来...原创 2019-09-25 17:28:09 · 1103 阅读 · 5 评论 -
React API Portals和findDOMNode介绍与使用
react 新API ——Portals1.findDOMNode场景使用在我们开发中往往会遇到一些获取真实DOM的情形，比如说 我要给一个div 通过滚轮事件方法或者缩小，此时我们就想到findDOMNode 来获取真实dom，可指定到具体某一个div或者img 等等标签~~~代码： 定义鼠标滚轮事件 onMouseWheel = e => { let dom = ...原创 2019-09-25 15:48:12 · 360 阅读 · 0 评论 -
react 中svg封装
import classNames from "classnames";import * as React from "react";import "./index.scss";export const SvgIcon = props => { const { className, url, ...etc } = props; return ( <svg {.....原创 2019-09-17 15:37:55 · 1367 阅读 · 1 评论 -
react 阻止默认行为
react在做某一些弹层的时候，会用到原生的监听点击事件document.addEventListener(‘click’,…);这个时候会用到阻止默认事件发生，代码如下： e.nativeEvent.stopImmediatePropagation();...原创 2019-09-17 15:34:42 · 577 阅读 · 0 评论 -
前端input 密码回填bug
前端业务中：不需要密码回填，但浏览器往往会自动回填，为了防止这里密码回填！我们在input中直接添加属性：autoComplete="new-password"原创 2019-09-16 18:14:38 · 298 阅读 · 0 评论 -
js:返回到页面时滚动到上次浏览位置
客户端存储数据的两个对象为：localStorage:没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）代码块://滚动时保存滚动位置KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){ if((document).scroll...转载 2019-01-10 14:50:03 · 949 阅读 · 0 评论