前端
BBbila
前端小鸟,欢迎交流学习
展开
-
react-hooks的节流与闭包,以及useCallback的用处
useThrottle: 封装了一个节流的hookuseCallback的作用(性能优化)不用Hook封装节流方法的情况,看是怎么形成闭包的:原创 2022-11-15 17:41:05 · 1191 阅读 · 0 评论 -
【前端性能优化摸索】浏览器发起的网络请求,经历了哪些阶段以及该如何优化
一、发起的网络请求,经历了哪些阶段以及该如何优化我们从开发者工具的network就可以清楚的看到每个请求的时长,以及网页加载的情况。 Stalled:是浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接等时间等。 queueing完后开始Stalled,上图Stalled所用时间为6.45ms。 Proxy negotiation:代理协商所用时间。 上图所用时间为..原创 2022-05-28 14:09:34 · 755 阅读 · 0 评论 -
[小程序]- 列表左滑置顶删除功能
一、效果【wxml】 <view wx:if="{{msgGroup.length > 0}}"> <message-box pType="im" data="{{item}}" wx:for="{{msgGroup}}" wx:key="{{item.groupID}}" bind:touchS="touchS" bind:touchE="touchE" bind:touchM="touchM" leftRange="{{leftRange}}" star原创 2022-04-25 18:17:06 · 357 阅读 · 0 评论 -
【实现自动跳转页面】
很简单,也模板一下。<!DOCTYPE html><html> <head> <title>自动跳转页面</title> </head> <body> <!--先编写好网页布局--> <h1>操作成功</h1> <div><...原创 2019-11-12 16:24:46 · 218 阅读 · 0 评论 -
前端基础&进阶学习笔记(持续更新)
【一】Immerimmer 是一个用 C ++ 编写的可持久化和不可更改的数据结构库。 可持久化意味着修改数据结构时,将保留旧值。 不可更改意味着所有的操作方法都是 const。 对象不会在适当位置修改,但会返回新值。 因为旧值仍然存在并且永远不会改变,所以新值可以透明地保持对它的公共部分的引用。 这个属性被称为结构共享。.....................原创 2021-06-15 16:19:55 · 477 阅读 · 1 评论 -
【react-hook】useEffect与useLayoutEffect及componentDidMount的关系
参考大佬的文章:https://www.jianshu.com/p/5296c5acf788摘要:在React通知到Renderer渲染器后,渲染器又分了三个子阶段来处理:beforeMutation阶段(渲染视图前) mutation阶段(渲染试图) layout阶段(渲染视图后)渲染器会在mutation阶段完成后, 在layout阶段同步的调用useLayoutEffect,在子组件嵌套中于是如此。在类组件中,调用的是componentDidMount生命周期函数。也就是说,在use转载 2021-05-17 23:16:10 · 1966 阅读 · 0 评论 -
【React】react-hook中useEffect第二个参数的意义
转载大佬的文章:https://www.jianshu.com/p/6e525c3686ab1.你可以把useEffect函数看做componentDidMount,componentDidUpdate和componentWillUnmount这三个函数的组合。2.默认情况下,它在第一次渲染之后和每次更新之后都会执行。你可能会更容易接受 effect 发生在“渲染之后”这种概念,不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时,DOM 都已经更新完毕。...原创 2021-04-25 17:33:23 · 1680 阅读 · 0 评论 -
使用百度地图API的相关技术目录:创建覆盖物,定位到当前位置...(持续更新)
如何定位到当前位置: <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); var point = new BMap.Point(116.331398,39.897445); map.centerAndZoom(point,12); var geolocation = new BMap.Geolocation(); geolocation.原创 2021-04-18 02:24:34 · 602 阅读 · 0 评论 -
【laydate】限定时间,从当前日期开始(年月日)
代码: //时间控件 laydate.render({ elem:"#operation_time", min: getDate(), });var dateFmt = 'YYYY-mm-dd';//获取当前日期function getDate() { return dateFormat(dateFmt);}..原创 2021-03-10 11:37:31 · 650 阅读 · 0 评论 -
【echarts】legend的图标的样式总结
图标样式有:circle,rect,line,roundRect,triangle,diamond,pin,arrow,none(一)rect(二)circle(三)line(四)pin(五)triangle(六)roundRect(七)diamond(八)arrow(九)none...原创 2021-02-23 16:07:43 · 4612 阅读 · 0 评论 -
【小程序】input输入框,输入连续的两个1,变成2
小程序官网:https://developers.weixin.qq.com/miniprogram/dev/component/input.html原创 2021-02-20 16:02:42 · 340 阅读 · 0 评论 -
[echarts图]:设置柱状图的Y轴滚动条+效果图
效果:代码:html:<div class="layui-col-md12" id="echart-tsrqlxtj" style="height:100%"></div>JS: (滚动条属性)dataZoom: [ { start:0,//默认为0 end: 100,//默认为100 type: 'slider', ...原创 2020-11-05 14:54:16 · 8436 阅读 · 2 评论 -
正则:判断日期的先后
效果:修订日期必须大于编制日期://编辑表单 form.on('submit(plan-form-edit)', function(obj){ var field = obj.field; var st = field.organization_date.replace(/\-/g, "\/"); var ed = field.revise_date.replace(/\-/g, "\/"); if (ed != "" &原创 2020-11-04 14:22:12 · 337 阅读 · 0 评论 -
echarts横向条形图的Y轴文字太长,做字数限制处理
/** * 统计条形图(横向滚动的情况) * @param id * @param data [{key:val,key:val...}] * @param color ['rgba(12,12,12,0)','rgba(12,12,12,1)','rgba(12,12,12,0.1)'] 开始颜色,结束颜色,背景色 */function activityBarChartScroll(id,data,color){ if (!id) { return; } var .原创 2020-11-04 10:45:38 · 3128 阅读 · 0 评论 -
【JQ实现textarea字数限制并显示实时长度】
效果图:代码:原创 2020-11-02 16:18:03 · 398 阅读 · 0 评论 -
【layui】laydate日期关联判断,并限定时间段
//显示弹出框 function showPopup(title, btnId, data) { layer.open({ title: title, type: 1, shade: 0.2, area: ['800px', '600px'], btn : ['确定','取消'], content: template('temp-shift.原创 2020-08-20 14:58:30 · 1087 阅读 · 0 评论 -
【bug解决】当出现 无【object object】请求的错误提示信息时
注意参数(请求的参数不同时,要看参数结构)原创 2020-08-16 16:39:22 · 1048 阅读 · 0 评论 -
【layui】解决table的宽度与固定左右侧出现的bug
出现的Bug:可以看到活动名称这一列当设置了固定宽度 width:280,出现了字数超出就换行显示了,并且右边的fixed:right,就会失效(因为每一行的高度不统一)解决办法:原创 2020-08-13 20:20:34 · 1557 阅读 · 0 评论 -
【layUI】关闭最新的弹窗/下拉的模拟点击
layer.close(layer.index);//关闭最新弹出层原创 2020-08-13 20:14:03 · 283 阅读 · 0 评论 -
【layUI】:项目搭建|+分页器demo+弹窗的使用注意事项+layui与jquery结合使用
一、下载layui文件包,部署到项目目录https://www.layui.com/在html中引入其中两个文件。二、以分页器为例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&原创 2020-06-04 14:14:51 · 468 阅读 · 0 评论 -
JS快速排序(图解)
【快速排序】思路:(1)在数据集之中,选择一个元素作为"基准"(pivot)。(2)所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。(3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。用js实现快速排序=><!DOCTYPE html><html...原创 2019-12-19 15:53:54 · 388 阅读 · 0 评论 -
typeOf null === "object" 为什么返回true?
转载:https://www.cnblogs.com/wzybnzy/p/7232618.html?tdsourcetag=s_pcqq_aiomsg不同的对象在底层都表示为二进制,在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型, null 的二进制表示是全 0,自然前三位也是 0,所以执行 typeof 时会返回“ object ”...转载 2019-12-18 11:33:12 · 277 阅读 · 0 评论 -
前端性能优化文章推荐
https://www.cnblogs.com/xiaohuochai/p/9178390.html原创 2019-12-03 15:28:00 · 96 阅读 · 0 评论 -
【react实战】如何开发嵌入客户端的H5页面黑白模式?
需求:提供用户自行选择的主题模式:黑/白。默认情况下,是白色主题。用户选择的数据传递给后端,然后获取接口(已知接口:DarkMode())。1.首先写好黑/白模式下的CSS文件.2.在app.js里,在生命周期函数componentDidMout() { }页面加载的时候去判断:定义一个全局变量:—isDarkMode,初始值为null;如果页面加载的时候,有isDarkM...原创 2019-11-07 16:45:37 · 481 阅读 · 0 评论 -
e.target 和 e.currentTarget 分别怎么获取具体的子元素节(JS动态改变图片icon)
【e.target】【e.currentTarget】原创 2019-09-09 11:15:53 · 3430 阅读 · 0 评论 -
拉取(pull)远程的dev分支到本地的dev分支,再与本地的local分支合并
▒▒ع▒▒ MINGW64 /e/leo/real/pc-app-store-h5-react (local)$ git checkout devSwitched to branch 'dev'M src/layouts/Layout.jsM src/pages/Recommend/Recommend.jsM src/pages/Uninstall/...原创 2019-09-09 16:58:52 · 1824 阅读 · 0 评论 -
如何用redux+redux-sagas修改react组件里的dom元素的样式
1.操作sagas2.在constant里定义action 的type3.定义action4.在reducer里写方法5.在react组件去引用最后实现:点击按钮,让其他dom元素变样式原创 2019-09-11 15:19:20 · 162 阅读 · 0 评论 -
前端性能优化:关于reflow/repaint
推荐阅读:https://www.cnblogs.com/zhutao/p/6551216.html原创 2019-09-24 22:40:18 · 108 阅读 · 0 评论 -
【15】前端实习:Vue中父子组件传值(实例展示)
父组件:exchangeList.vue子组件:isExchanging在组件里的方法里用到在浏览器中打印,看接受到了父组件传过来的值没有:原创 2019-08-16 10:43:51 · 172 阅读 · 0 评论 -
【4】前端实习:JS巩固(JS分支语句+break/continue+js循环语句)+parseInt()方法点
【prompt()方法】功能:弹出输入框返回值:1.点击确定,会返回输入的内容2.点击取消,返回null实例:【if判断多个条件】语法:if(){}else if(_){}else{}实例:【if嵌套】功能:判断多个条件情况下【ParseInt()------将字符串转换为整数】...2019-07-19 16:50:30 · 105 阅读 · 0 评论 -
【react-router4.0+】版本导入browserHistory失效('BrowserHistory' is not exported from 'react-router')
当在js文件中引用:import {BrowserHistory} from 'react-router'报错:./src/pages/store.jsAttempted import error: 'BrowserHistory' is not exported from 'react-router'.react-router4.0官方文档里已经废弃了:Brow...原创 2019-09-03 16:49:26 · 10955 阅读 · 0 评论 -
React : 如何遍历一个数组对象,并操作特定的数组里的元素,让其改变样式
问题:如何让第5个,第10 个,第15个...5的倍数的数组元素的外边距改变。实现的功能是:让一行显示5个<div>。效果:原创 2019-09-01 01:10:52 · 2470 阅读 · 0 评论 -
react项目中修改页面的样式,让页面与顶部没有距离
浏览器中发现:原先是:body { display: 0; margin: 8px;}解决:原创 2019-08-29 18:30:02 · 628 阅读 · 0 评论 -
【9】前端实习:react audio播放音乐组件(详细完整代码)
详解:https://www.cnblogs.com/mybilibili/p/10376528.htmlimport React, {Component} from 'react';import {Form,Radio} from 'antd';import {Link} from 'react-router-dom';import STATIC from '....原创 2019-08-05 17:51:48 · 5780 阅读 · 2 评论 -
【5】前端实习:JS巩固(JS的内置对象---Array与string篇)
【JS的对象】JS中任何一个事物都是对象,比如:函数 数组 字符串...【JS的内置对象】JS的内置对象是浏览器封装好的一些对象,我们可以直接调用这些对象的属性和方法。属性就是对象的一些特性; 方法就是这些对象的作用,可以用来干什么。(主要有4个内置对象):Array String Math Date 数组:Array (1)创建数组(2)数组的...原创 2019-07-23 10:06:02 · 266 阅读 · 0 评论 -
【9】前端实习:react怎么修改DOM元素的样式
【转载:https://www.cnblogs.com/dragon-cat/p/8919334.html】转载 2019-07-30 17:59:19 · 2588 阅读 · 0 评论 -
如何用命令管理器导入sql文件到mysql5.5 +如何本地电脑上传文件到github的仓库中
【如何用命令管理器导入sql文件到mysql5.5】第一步:windows+CMD进入到命令行。进入到mysql安装位置的bin目录。然后执行(root是你的用户名,password是你自己的密码)mysql -uroot-prootpassword第二步:查看你的数据库列表show databases;第三步:创建空的数据库:create database yourda...原创 2019-07-25 13:35:29 · 416 阅读 · 0 评论 -
【3】前端实习:(查漏补缺)>>>>单行文本溢出&多行文本溢出
【单行文本溢出显示省略号css】overflow: hidden; //内容会被修剪,并且其余内容是不可见的。 text-overflow: ellipsis; //用省略号“…”隐藏超出范围的文本 white-space: nowrap; //文本不换行【多行文本溢出显示省略号css】overflow : hidden; //内容会被...原创 2019-07-17 15:54:26 · 87 阅读 · 0 评论 -
【7】前端实习:JS巩固(JS的DOM对象)
【基本的的DOM查找方法】1. document.getElementById( " id " )2. document.getElemnetsByTagName( " id ")【如何用js动态设置DOM样式】【如何用js获取DOM元素属性】【DOM事件】...原创 2019-07-24 15:53:57 · 264 阅读 · 0 评论 -
【4】前端实习:JS巩固(JS函数)
【函数的作用】通过函数可以封装任意多条语句,而且可以在任何地方,任何时候调用执行。【函数如何定义】函数通过function声明,函数名字后面跟 参数(非必须)以及 函数体,语法:function functionName([参数1,参数2,...,参数n]){ statements(函数的主体内容)}【函数的调用】语法:函数名([参数1,参数2,.....原创 2019-07-19 18:45:38 · 116 阅读 · 0 评论