- 博客(31)
- 收藏
- 关注
RSS订阅原创 react Hook 规则
1.只在最顶层使用 Hook不要在循环，条件或嵌套函数中调用 Hook;如果我们想要有条件地执行一个 effect，可以将判断放到 Hook 的内部：useEffect(function persistForm() {// 将条件判断放置在 effect 中if (name !== ‘’) {localStorage.setItem(‘formData’, name);}});只在 React 函数中调用 Hook不要在普通的 JavaScript 函数中调用 Hook。你可以：
2022-07-30 19:52:53
700
原创 前端跨域解决方案
跨域的原因是浏览器的同源策略（不过多陈述了）；简述个人工作中的常用的跨域解决方案。1.proxy代理跨域。原理：实质就是在本地起一个虚拟服务器（webpack-dev-server 的 devServer提供了开发过程中的服务器），利用服务端与服务端的交互不会有跨域问题。本地浏览器端显示的请求路径是 http://localhost:8081/api; 实质上已经被代理成了http://www.test.com/api。 devServer: { proxy:{ "...
2021-11-01 18:12:11
237
原创 git误传文件到远程仓库，只删除远程仓库，本地不删除，并且删除关联关系
删除 git rm -r --cached node_modules提交 git commit -m “删除远程仓库node_modules”推到远程 git push
2021-07-09 16:45:08
150
原创 js数组扁平化，计算字符串出现的次数（阿里面试题）
一.数组扁平化（多维数组转换成一维数组）let a = [1,[2,3,[4,[5]]]];1.ES6的flat();Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组;[1, 2, [3, [4, 5]]].flat()// [1, 2, 3, [4, 5]];flat默认接收一个参数（1），表示拉平多少级[1, 2, [3, [4, 5]]].flat(1)// [1, 2, 3, [4, 5]][1, 2, [3, [4, 5]
2021-06-01 16:39:17
171
原创 sourceTree跳过注册直接使用
使用版本：最新版本3.2.6依赖路径：C:\Users\名称AppData\Local\Atlassian\SourceTree1.添加 accounts.json文件内容：[{“id":"1","id": "1", "id":"1","type”: “SourceTree.Api.Host.Identity.Model.IdentityAccount, SourceTree.Api.Host.Identity”,“Authenticate”: true,“HostInstance”
2021-03-01 17:39:54
86
原创 解决前端ios设备嵌套的H5页面，点击后退按钮，页面存在缓存，不刷新
var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/; //判断ios设备if (browserRule.test(navigator.userAgent)) { window.onpageshow = function(event) { if (event.persisted) { window.location.reload() } };}onpageshow是页面显示的时
2021-02-03 13:58:20
797
原创 webpack的clean-webpack-plugin
1.clean-webpack-pluginwebpack每次打包都会生成一个dist文件，默认本次打包不会清除上次打包的dist文件；clean-webpack-plugin 插件 就是这样由来的 每次生成代码之前 先将 dist 目录 清空；安装：npm i clean-webpack-plugin -D引入：const {CleanWebpackPlugin} = require(‘clean-webpack-plugin’)插件配置：plugins里new CleanWebpackP
2021-02-01 17:09:21
172
原创 webpack4的copy-webpack-plugin
1.打包后html引入的文件资源找不到报错的问题。解决方案：因为打包后的dist文件没有之前静态资源路径。webpack的copy-webpack-plugin插件的作用是将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹指定的文件中。安装： npm install -D copy-webpack-plugin；引入 const CopyWebpackPlugin = require(“copy-webpack-plugin”)；在webpack 的plugins 配置；ne
2021-02-01 14:25:08
1118
原创 git远程版本想回退
本地分支先回退 git log找到 某一次提交 commit 123456git reset --hard 123456使用git push -f强制推送到远程分支，远程就是当前提交的代码。
2020-12-18 17:18:37
560
原创 前端h5页面，ios手机软键盘弹出来，导致局部页面滚动卡顿、整体页面滚动，解决方案。
布局:div class=‘app’input id=‘searchInput’ /div class=‘content’ /div/div.app {position: relative;overflow: hidden;height: 100%;}input {width: 100%;position: fixed;top: 0;z-index: 100;}.content {height: calc(100% - 1.76rem); 减去输入框的高度，只使
2020-11-18 18:23:37
2301
原创 移动端ios问题总结
1.城市列表选择字母页面滚动出现白屏：选择字母开始滚动和滚动中：$(’.selectText’).css({’-webkit-overflow-scrolling’:‘auto’});手指离开：$(’.selectText’).css({’-webkit-overflow-scrolling’:‘touch’});防止ios手机正常滚动卡顿。2.ios唤醒键盘，positon:fixed定位问题，fixed定位搜索框样式飘离。解决方法。布局解决:div class=‘app’input
2020-10-12 16:44:45
182
1
原创 antdesign中 给form表单赋某一个值，及验证问题，邮箱格式。
form.setFieldsValue({art: “哈哈哈”});给 art赋值（设置一组值）“哈哈哈”form.resetFields([‘handlerId’]);重置handlerld这组值，若不传参数，则重置所有值
2020-10-12 16:43:01
935
原创 函数节流操作（用于判断是否滚动到底部，在加载数据）
//函数节流操作函数节流: 指定时间间隔内只会执行一次任务；let last, timer;export function throttle(delay, value, fn, callback) {const now = +new Date();if(last && now < last + delay){clearTimeout(timer) //清除上一次的timer = setTimeout(function(){console.log(‘延时器里的’+valu
2020-10-12 14:44:40
283
原创 伪数组如何转成真数组进行遍历
伪数组就是例如获取的dom节点数组 伪数组是html元素集合var aLi = document.querySelectorAll(‘li’);方法一：声明一个空数组，通过遍历伪数组把它们重新添加到新的数组中var arr = [];for (var i = 0; i < aLi.length; i++) {arr[arr.length] = aLi[i] 或者是 arr.pu...
2020-10-12 14:27:55
330
原创 nodejs运行前端项目，通过node.js获取本机的ip地址
function getIPAdress() {var interfaces = os.networkInterfaces();for (var devName in interfaces) {var iface = interfaces[devName];for (var i = 0; i < iface.length; i++) {var alias = iface[i];if (alias.family === ‘IPv4’ && alias.address !==
2020-10-12 14:23:55
617
原创 react父组件调用子组件方法设置
1.父组件内，执行方法onRef = ref => {this.childElement = ref;};把方法传给子组件 <ChildElement onRef={this.onRef} />2.子组件内componentDidMount(){const { onRef } = this.props;onRef(this);}childFn = () => {console.log(‘子方法’)}父组件方法内 this.childElement就
2020-07-29 17:00:53
144
原创 react项目支持“decorators“装饰器语法
使用@From.create() 报错解决方法1.安装decorators依赖npm install --save-dev @babel/plugin-proposal-decorators或者 yarn add @babel/plugin-proposal-decorators -D2. 配置package.json文件“babel”: {“presets”: [“reac...
2019-11-12 14:14:50
102
原创 写一个移动端弹框，有遮影层，，后面的内容禁止滚动
启用禁用时，设置jsdocument.documentElement.style.overflowY = ‘hidden’;当还原时候，只需要把属性重置scroll就可以了document.documentElement.style.overflowY = ‘scroll’;...
2019-07-10 17:12:19
111
原创 js模糊查询一对一，从头开始，纯前端
filInput = (value,event) => {let arrayCity = Object.values(allCity);let selectCity = [];arrayCity.map((item) => {item.map((itemChildren) => {if (itemChildren.name.slice(0,value.length) =...
2019-06-20 15:01:11
220
原创 移动端兼容 iOS 数字默认为蓝色 可点击
一串数字 ios默认是一段号码，可以点击，显示链接色：解决 在页面中添加《meta name=“format-detection” content=“telephone=no”&gt;默认不可点击
2018-12-26 15:30:58
268
转载 react 中的 state
1.state:在react中，state可以看成管理页面状态的集合（实则一个对象而已），库里面的成员均为页面渲染变量，整个页面为一个状态机，当state发生变化时，页面会重新渲染，页面随state变化而变化。state控制页面渲染，但是只给state赋值是不会导致页面刷新的，只有调用this.setState({})方法后才会执行render方法，最后导致页面重新渲染。第一种写法：thi...
2018-12-24 16:13:29
143
转载 js 中的！ 和 ！！
js代码中有时会用到“！”，这个我们知道是取反，对于布尔类型会将其值true和false互换，那对于非布尔类型呢？对于非布尔类型，js会将值先转换成布尔类型，而后取反。其他类型转布尔型的规则：字符串类型值，会将空值（""）转换成false，其余转换成true。数字类型，会将0转换成false，其余为true。null、undefined会转换成false。因此，对于null、undef...
2018-12-18 16:36:39
1439
转载 js中的尺寸
浏览器窗口的尺寸(就是内容部分，可以看见的部分，不包括工具栏和滚动条)对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：window.innerHeight - 浏览器窗口的可见高度window.innerWidth - 浏览器窗口的可见宽度对于 Internet Explorer 8、7、6、5：document.documentEl...
2018-12-13 17:28:42
293
原创 js中的常用字符串操作
String 对象方法charAt() 返回在指定位置的字符。var str=“Hello world!”document.write(str.charAt(1)) //e;concat() 连接字符串。concat() 方法用于连接两个或多个字符串。var str1="Hello "var str2=“world!”document.write(str1.concat(s...
2018-12-10 16:10:33
204
原创 react.js中的隐藏属性
react框架中，渲染用到了JSX语法；JSX元素（标签内）有一个hidden属性，可以判断当前JSX元素是否显示；例如：支付方式hidden属性为true;当前JSX隐藏， 属性为false,不隐藏；属性值可以为表达式，转换成boolean值;也可以隐式转换；hidden={0、&quot;&quot;、false、!true} 不隐藏；hidden={1、true、{}、[]、&quot; “、!f...
2018-12-07 17:40:04
2201
原创 react项目打包后无法运行的问题
react项目打包后运行，在生产环境下npm/yarn build后无法运行或者是资源路径出错一. 在开发模式下，package.json下设置 homepage“homepage”:&amp;quot;.&amp;quot;,以上设置会将 index.html中的%PUBLIC_URL%替换为 .,从而拼接为：./index.js这样的一个相对index.html的资源路径.二. react使用的browserHis...
2018-12-01 14:41:12
5503
1
原创 为什么用token验证
为什么使用Token验证：在Web领域基于Token的身份验证随处可见。在大多数使用Web API的互联网公司中，tokens 是多用户下处理认证的最佳方式。以下几点特性会让你在程序中使用基于Token的身份验证1.无状态、可扩展2.支持移动设备3.跨程序调用4.安全那些使用基于Token的身份验证的大佬们大部分你见到过的API和Web应用都使用tokens。例如Facebook,...
2018-11-30 17:18:38
599
转载 HTTP与HTTPS的区别
HTTP与HTTPS的区别 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协...
2018-11-30 17:17:39
81
转载 location 中的assign()、replace()、reload()及常见属性
window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的reloa...
2018-11-28 11:12:22
1293
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人