- 博客(121)
- 收藏
- 关注
RSS订阅原创 react+ts配置eslint+prettier
webpack的eslint插件，在webpack.config.js中注入该插件扩展，可以在webpack进行编译前，先进行eslint语法检查，将eslint的错误输出到终端，不会影响到webpack编译结果。eslint配置的ts解析器，需要先配置上解析器，eslint才能正确对ts语法进行检查，需要先按照上解析器，@typescript-eslint/eslint-plugin才能使用。因为项目是ts + react，所以需要额外安装ts和react的扩展，依赖的npm包如下。
2023-06-09 16:03:22
1249
2
原创 从实例对象上谈对hooks的理解
而通过 useState 声明的变量，则是存储在 React 内部的内存中，每次组件更新执行的 render 和它没有任何关系。React 在渲染过程中会创建组件实例对象，无论是函数组件还是类组件都需要实例化来支持 React 的渲染机制。为了增强函数组件的能力，Hooks 提供了一些特殊的函数，使得函数组件也能够使用 state 和 React 生命周期等功能，使其具有类组件一样的能力。Hooks 可以跳出 render 方法，并将这些方法和内容与组件实例进行关联，从而使得函数组件具有类组件一样的能力。
2023-04-25 19:48:28
154
原创 高级前端面试题（react + 原生js + es6）
createRoot是基于fiber模式，通过createRoot会创建出来fiber的根节点，fiber会将每个组件作为一个节点记录到队列中，并且会记录每个组件的父节点、子节点、兄弟节点，以此可以实现不需要遍历整颗dom树，就可以进行局部更新，从局部渲染上会比ReactDOM的方式更快，但是整体效率上不好说，因为可能会碰到有高频更新的局部节点占用，导致其他的节点始终在排队。其次是实例化对象，通过new关键字创建，每个实例化对象都会有原型上的属性和方法，并且可以定义自己的属性和方法。
2023-04-23 16:05:03
714
原创 js两个数组取相同的值的几种方式，包含ES6
_resultSameValue(arr1, arr2) { let newArr = []; for (let i = 0; i < arr1.length; i++) { if (arr2.includes(arr1[i])) { newArr.push(arr1[i]) } } return newArr; } _resultSameValue2(arr1, arr2) { let newArr = ar.
2020-09-27 18:43:59
4062
原创 表单提交分离化判断条件
在写一些登录页面或者调查问卷等表单的时候，经常会在最后提交的方法中进行大量的判断逻辑，其实可以单独提取出来一个新的方法，来进行一些操作提示等，效果都一样，但是代码看起来会舒服很多。$(this._dom.login).click(function () { var email = $(_this._dom.email).val(); var pwd = $(_this._dom.pwd).val(); if (_this._validate(...
2020-08-04 19:02:03
176
原创 通过Web Audio Api展示音频整体波形（整体波形，而非实时）
在做这个功能时并未对音频过多了解，因为H5的audio标签已经很强大了，但是因为这次需要对音频的波形进行展示，于是开始查看文档及相关技术贴，发现无论是官网推荐还是大部分的帖子推荐的做法都是使用Audio Api的AnalyserNode，但是AnalyserNode的问题是他只能用来做实时波形展示，与需求不符，不过如果公司对插件没要求的话，强烈推荐wavesurfer.js库，相当简单，做...
2020-02-27 12:16:47
3128
原创 $.ajax中设置responseType
最近在为公司产品新增一个音频播放及整体波形预览的功能，首先需要的就是请求音频地址，将请求到的二进制原始数据转换为arrayBuffer类型，之后在通过Web Audio Api解码以此来生成波形展示所需数据，于是问题来了。 如果用原生xhr是可以直接设置responseType属性的，但是因为是公司产品，底层封装的是jquery的ajax方法，然而$.ajax没有respons...
2020-02-27 11:57:26
20532
9
原创 网页地址栏直接输入请求地址有返回值，前端本地项目访问请求报跨域的问题
在网页地址中访问可以正常看到数据，在postman中也正常。自己的react项目启动的服务器，访问同样的地址报跨域的问题，在package.json中添加proxy属性。...
2019-12-13 17:44:34
1764
原创 react-native 安卓键盘顶起绝对定位元素
之前网页端的开发经验认为我这是个小问题，要么换成固定定位，实在没办法加个聚焦和失焦的操作就可以了，但是实际上rn中并没有固定定位，造成这种情况的原因其实只需要修改安卓的配置即可，实际要比网页端容易解决。vscode的话可以command+p搜索文件名字，找到这个文件之后添加：android:windowSoftInputMode="stateAlwaysHidden|adjus...
2019-10-11 13:21:01
1663
3
原创 超级严格的身份证认证规则
var checkProv = function (val) { var pattern = /^[1-9][0-9]/; var provs = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",3...
2019-08-20 16:12:55
329
原创 No bundle url present.错误解决方案
-1 . 常规方式进入项目目录执行rm -rf ios/build之后在执行react-native run-ios大部分情况下都是够呛....-2 第二种常规方式进入项目目录执行rm -rf node_modules/ && npm install然后还是重新运行，有几率就好使了....-3 第三种常规方式查看端口号是否被占用sudo lsof...
2019-06-27 15:05:09
2607
1
原创 不需要部署服务器即可测试ajax请求。
在日常开发时，前端请求后台地址获取参数进行操作这是毋庸置疑的，但是有时对于新人而言，对ajax并不是特别熟练，自己想额外的练一练手的话，或者嫌弃部署本地服务器麻烦学习新技术例如axios练习异步请求的时候，我们可以用get方式请求一些开发的地址接口，例如github：var urlInfo = 'https://api.github.com/'；...
2019-05-13 12:02:04
1910
5
原创 react国际化文字图片样式配置，最好有redux基础在看
因为所做项目需要应用国际化，语言包用的是intl-messageformat的插件，自己根据需求又修改的，这样文字的问题配置js就可以解决了。Intl对应的文件内容：import IntlMessageFormat from 'intl-messageformat';import zh from '../locales/zh-CN';import en from '../loca...
2019-05-13 11:52:31
676
原创 react路由跳转之后回到页面顶部
开发一个官网时候发现一个问题，顶部导航栏跳转路由的时候，如果这时候我将页面滚动到底部，那跳转过去的路由页面也会再底部，这样的效果显然是不正确的，所以需要重置一个页面滚动条的位置，如下：document.documentElement.scrollTop = document.body.scrollTop =0;先将滚动条位置重置之后再跳转路由即可。...
2019-05-13 11:09:50
6365
原创 react组件中批量引入图片
在开发官网等一些偏静态类的网站时，经常会碰到某个组件中需要用到多张图片，正常引入方式如：import demoBJ from '../../images/demo1.jpg'所产生的问题就是如果我用到了十张图片资源，同类代码就需要写上十次，麻烦而且不易维护，所以可以采用下面的方式进行整理。const maths = { fixedView1 : "" , fixed...
2019-02-18 16:55:42
6460
3
原创 react模块文件使用全局class，并且可以修改全局的class属性而且不影响全局样式
简单描述业务场景：项目是基于create-react-app搭建的，后续添加的css_modules及less等相关配置。在写一些通用的组件的时候，我们往往需要单独提取一个全局的样式文件，用于存放所有通用的样式，模块内部则自己用自己的样式文件，以达到模块化开发的目的。但是有些时候我们却需要在某个模板文件中修改全局的样式，例如我全局做好了媒体查询配置，但是偏偏有一个页面的布局稍稍有些不同...
2019-02-12 15:47:32
5545
原创 js类的单例（懒汉和恶汉模式）
首先问大家一个问题，类的静态属性你会写吗？哈哈哈，笔者今天被同事问蒙了，什么是静态属性啊。// ES5 >>>function Demo(){}Demo.sayHello = "Hello";// ES6 >>>class Demo{ static sayHello = "Hello"}sayHello就是Demo的静态属...
2019-01-17 18:46:15
2003
2
原创 关于错误处理便于管理的数据规划
日常开发中无论是通过ajax通信、还是调用一些第三方的API，都会有很多的错误编码，笔者以前的写法一直都是每一个请求结果之后都去根据code码做出各种提示之类的操作，例如： if(code === 1){ console.log("code等于1啦") }else if(code === 2...
2019-01-17 18:18:39
235
原创 目标组件不在store注入的组件内，但是还需要使用store中存放的数据
日前碰到个需求，应用antd的弹窗二次封装了一个弹窗组件，但是该组件是和root同级的，应用react开发的大部分开发者应该都不会改这个根dom的id吧，所以问题也就出现了，我是将store状态管理注入到根root节点中的，那么在弹窗的组件中应该如何获取到store中的数据呢。想了一个我也不知道low不low的方法，那就是在注入的同时将store导出，这样我在弹窗的组件就可以直接通过引入s...
2019-01-17 17:56:42
2969
1
原创 react实现粒子动画
首先安装依赖 npm i reactparticles.js --save 简单用法，引入当做标签用，id必填任意不重复即可，config指向public下存放的.json配置文件，配置文件可以自己改，也可以去官网生成：地址：https://github.com/kr1tzb1tz/reactparticles.js//引入import Particles from ...
2018-11-28 10:28:46
3951
1
原创 react如何实现领取奖励爆炸效果
首先安装：npm install --save react-dom-confetti安装之后再页面引入，就是一个纯粹的组件，接收config参数和active参数，config配置展示地址：https://daniel-lundin.github.io/react-dom-confetti/active可以放在state或者props都可以，当然也可以放到状态管理中，默认值必须是f...
2018-11-26 12:51:43
623
1
原创 react部署线上二级目录路径错误问题处理
react-router有一个basename:string属性，用于为所有位置添加一个基准URL。使用场景：假如你需要把页面部署到服务器的二级目录，你可以使用 basename 设置到此目录。 后台需要将域名指向二级目录 前端路由如下配置即可例如 ：（二级目录为/guess）<BrowserRouter basename="/guess"><div...
2018-11-20 18:00:30
6352
原创 react项目批量导入图片资源。
/* 合作伙伴图标批量引入 */const matchs = {"cooperation_01" : "cooperation_01","cooperation_08" : "cooperation_08","cooperation_02" : "cooperation_02","cooperation_03" : "cooperation
2018-11-02 15:26:22
2225
原创 react实现滚动计数组件
效果就是设置初始值，滚动计数加到结束值，首先安装npm install react-countup安装完毕后引入/* 滚动计数 */import CountUp from 'react-countup';其实就是一个react标准展示组件，用的时候在render里当成正常组件用即可，需要修改样式的话，组件本身是一个span标签，直接修改span样式即可。<CountU...
2018-10-30 17:49:43
2276
转载 转载：监听手势向上向下等滑动触发事件
<script> var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Math.PI; }; //根据起点终点返回方向 1向上 2向下 3向左 4向右 0未滑动 functio...
2018-10-26 12:09:44
1154
转载 转载js可拖拽悬浮球特效
这是一个常见的案例，在写移动端的时候。很多网站APP 都会有类似手机的悬浮球，可以在界面上随意拖动，然后点开就是一个连接，效果图如下 图中有一个客服的悬浮球点击是一个窗口连接，可以随意滑动，代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &
2018-10-23 12:26:37
4599
原创 git从远程仓库clone到本地项目切换分支
git从远程拷贝项目到本地很简单，直接git clone '仓库地址' 即可，日前在公司分支开发，代码上传到dev分支上，在远程仓库也创建了相应的分支名称，之后回家想要继续开发，发现clone到本地的项目只有master一条主干，并没有之前在公司开发的其余分支，但是想要继续开发的还并非主干，所以如果你也碰到同样的苦恼，可尝试以下办法。首先将项目clone到本地之后，执行git branch...
2018-10-23 10:58:56
6592
2
原创 通过npm包管理使用md5加密。
首先安装md5。npm install blueimp-md5安装完毕后引入MD5。import md5 from 'blueimp-md5'如此即可使用MD5了，格式如下：console.log(md5("value")); //加密后为："2063c1608d6e0baf80249c42e2be5804" ...
2018-10-08 15:46:50
10855
原创 this.props.history传值
父组件：this.props.history.push({ pathname: "/PutForwardSubmit", state: { vcode } }); 子组件取值：this.props.location.state.vcode
2018-09-28 19:35:55
14763
3
原创 截取get传参返回对象方法
/*** 截取地址栏location返回对象* @returns {object}* @public* */function showWindowHref(){ var sHref = window.location.href; var args = sHref.split('?'); if(args[0] == sHref) return ""...
2018-09-28 17:31:35
888
原创 react页面中存在多个input时巧妙设置value属性
笔者以前是一直在用jquery进行开发的，才转react没多长时间，对别的倒是没什么感触，就是这个input输入框是深深的抵触，感觉很烦人，简单的一个输入框，你就必须要设置changeValue的方法去给input加上，这样你输入的内容才能够正确的展示到UI页面中，也因此，如果你页面中存在多个input时，简直就是噩梦了，因为你首先要为这些所有的input框绑定上onChange的方法，然后还需要...
2018-09-21 15:39:24
19498
9
原创 设置浏览器全屏展示网站
<!-- 全屏展示兼容代码 --><!-- safair --><meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"><meta...
2018-09-19 14:29:51
337
原创 解决rem不能自适应的问题。
(function(){ function w() { var r = document.documentElement; var a = r.getBoundingClientRect().width;//获取当前设备的宽度 if (a > 414 ){//414不固定，根据设计稿的宽度定 a = 414; }...
2018-08-24 12:07:30
4459
原创 jquery复制文本区域内容
//查找需要复制的区域，成功和失败的操作，需引入clipboard.js 和jquery.jsvar clipboard1 = new Clipboard('.a'); clipboard1.on('success', function(e) { // console.log(e); // al...
2018-08-13 11:05:22
1757
原创 react项目支持多语言，扩展性高
目录结构 Intl.js代码import IntlMessageFormat from 'intl-messageformat';import zh from '../locales/zh-CN';import en from '../locales/en-US';const MESSAGES = { en, zh }; //const LOCALE = 'zh...
2018-08-03 18:36:57
1386
原创 个人对react及状态管理的粗浅理解(没有代码只是文字)
为什么要用react，react的原理是什么：众所周知react所强调的组件化开发，什么是组件化开发，例如我们的这个球星竞拍，我们需要从后台获取到球星的列表，然后遍历拼接渲染到真实dom上，父组件负责的任务就是获取到后台传递过来的json数据，作为有状态组件，将json数据设置为state的属性，然后通过props传递给子组件，而子组件根据父组件传递的props值来进行遍历渲染，在这个过程中父...
2018-08-01 11:56:07
203
原创 针对原生replace只能匹配第一个字符做的完善办法
String.prototype.myReplace=function(f,e){//吧f替换成e var reg=new RegExp(f,"g"); //创建正则RegExp对象 return this.replace(reg,e); }例如 str = 'aaabbbaaabbb';str.myReplace("aaa","ccc") //str cccbbbc...
2018-07-13 19:43:53
558
原创 文本过长时中间部分用省略号表示。
//截取字符串中间用省略号显示function getSubStr (str){ var subStr1 = str.substr(0,10); var subStr2 = str.substr(str.length-5,5); var subStr = subStr1 + "..." + subStr2 ; return subStr;}var str = "123123...
2018-07-13 17:31:07
9520
1
原创 前端实现倒计时页面显示多个。
//倒计时构造函数function Countdown(startTime,endTime,day,house,minte,second ){//str var leftTime = endTime - startTime + 2000; //定义变量 d,h,m,s保存倒计时的时间 var d,h,m,s; this.setTime = function (obj...
2018-07-13 17:29:04
3315
原创 轮播图不限制子级元素个数
.sell-show{ width: 100%; overflow: hidden; margin-top: 50px; position: relative}.sell-show>p{ width: 2%; float: left; margin-top: 150px; background:rgba(255,255,255,1); border-radius:4px; border:1p...
2018-07-09 17:58:31
560
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人