- 博客(45)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 创建一个完整的react项目...（持续更新中）
将开源创建一个管理系统的react项目，将已学到的技术运用到项目里面，并进行记录。希望最后有的技术层面：react + antd3(组件库)+ webpack(打包) + mobx(状态存储)+echart(数据可视化)+mock(模拟后台)创建react项目：...
2021-10-20 15:29:34
809
原创 redux和mobx
store:整个存放状态的容器，一个应用只能有一个这样的storereducer:纯函数，有什么输入就有什么输出action:一个对象，通过action对象决定当前状态是如何让去改变的dispatch: 一个函数，用于去触发状态变更...
2021-12-08 17:47:52
64
原创 防抖和截流
监听滚动事件和用户输入框事件（要有频率限制，不然就会加重浏览器的负担）防抖和截流处理可以减少调用事件的频率防抖：多次执行变为一次执行在一秒内出发事件，执行过程中，又触发，就会清空上次的定时器，只执行这次的触发事件防抖 search搜索联想，用户在不断输入值时，用防抖来节约请求资源。 window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次节流 鼠标不断点击触发，mousedown(单位时间内只触发一次)...
2021-12-08 15:10:14
724
原创 github的基础使用
github的英文太多了，对于第一次使用简直无从下眼呀，更别提去托管我滴代码了我决定先在英文里干掉几个概念，把它们理解喽，再逐个击破，额...也许,大概...就可以...统帅三军le基础概念：仓库（respository）：开源项目多的时候，你就可以拥有一个仓库了收藏：方便下次查找复制项目：Fork ，克隆别人的仓库...
2021-12-02 14:03:48
75
原创 原型和原型链
构造函数通过原型分配的函数是所有对象共享的（不用构造函数的每个对象的相同的方法开辟不同的内存空间）sing方法实现共享：（给prototype原型对象里面添加方法） function Fn() { } Fn.prototype.sing = function(){ console.log('我会唱歌') } let f1 = new Fn() let f2 = new Fn() f1.sing() f2.sing()先检查对象.
2021-11-30 17:03:38
51
原创 Promise
promise本身代表目前还不能使用的对象，但在将来某个时间段可以被调用。Promise在实际的应用中往往起到代理的：像我们发出请求调用服务器数据，由于网络延时原因，我们此时无法调用到数据，我们可以接着执行其它任务，等到将来某个时间节点服务器响应数据到达客户端，我们即可使用promise自带的一个回调函数来处理数据。异步编程：fs是node的一个模块，可以读取磁盘的文件。 数据库也是异步 ajax网络请求 setTimeoutPromise是异步编程新的解决方案。支持链式调用，.
2021-11-29 20:24:04
255
原创 内存机制和事件循环机制
先给出一个案例 console.log('1') let promise = new Promise(function (resolve,reject) { console.log('2') resolve(3) }).then(function (data) { console.log(data) }) setTimeout(function () { console.log('4') }..
2021-11-29 11:15:08
206
原创 回调函数和this
回调函数的概念：我定义的，我没有调用，它执行了。dom的回调函数(onclick)定时器的回调函数（setTimeout）ajax回调函数生命周期回调函数。this的概念：...
2021-11-29 10:03:13
342
原创 闭包和var,let
ES5之前只有全局作用域和函数作用域，没有块级作用域，就会用闭包解决这个问题。Es6的let可以将变量绑定到任意的作用域上（{..}内部）。使得for循环的循环语句部分是个父级作用域，循环体内部是个单独的子作用域。if语句和for语句里面的{ }也属于块级作用域。var 存在变量提升，在变量声明之前就访问变量会使用默认值 undefined，而let，const（后面会提及）声明的变量却不存在变量提升let不允许在相同作用域内，重复声明同一个变量。var闭包:function cou.
2021-11-25 11:22:36
818
原创 echarts饼图配置
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>.
2021-11-18 18:21:56
329
原创 echarts饼图的常用实现
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>第一个 ECharts 实例</title> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script&g...
2021-11-18 18:19:14
214
原创 echarts图例动态置灰
解决：//图例动态置灰 option.legend.selected = (data || []).reduce((prev, cent) => { const {name, value} = cent; return Object.assign({}, prev, { [name]: !['未见异常数量', 'Normal'].includes(name) && !!value, }); }
2021-11-15 17:54:46
1488
原创 chaoswise-scripts: command not found
问题：npm start 运行项目时突然爆这个问题尝试：npm install 或删了重新从库里拉下代码，在install 还有这个报错解决方案：这个报错是库里的配置没有安装上，因为源没有换成淘宝的源，install的时候会弄丢这个包.# 查看使用的镜像源 npm config get registry# 设置淘宝镜像源 npm config set registry https://registry.npm.taobao.org# 安装淘宝镜像源 npm ins
2021-11-09 11:56:33
1184
1
原创 css样式实际操作
上下左右水平居中 <div className='login-back'> <div >react项目：后台管理系统</div> </div> .login-back{ background-color: azure; height: 50px; line-he
2021-10-29 12:34:24
45
原创 页面杂记()
JSON.stringify()讲js值转换为JSON字符串localStorage.setItem('userdata', JSON.stringify(res.iuser));localStorage.getItem('language') === 'en'JSON.parse()JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象,就可以用info.xx这样取值了。
2021-10-20 16:22:18
99
原创 css日志异常的原始引用页面
.only-show-two-line { word-break: break-all; text-overflow: ellipsis; overflow: hidden; white-space: normal; display: -webkit-box; display: -moz-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*控制文字行数*/ }页面.
2021-10-20 14:52:11
52
原创 中高级前端面试总结——完善中...
const columns = [ { title: '序号', dataIndex: 'key', key: 'key', width: '10%', render: (text, record, index) => { return (index + 1) } }, { .
2021-10-20 10:46:53
60
原创 antd-- column的width不生效
width：30% 一直不生效时，取组件内部的id，获取宽度，再style给到标签可复制 代码：const columns = [ { title: '分区字段标签', dataIndex: 'partitionValues', key: 'partitionValues', width: '30%', render: (text, record, index
2021-10-20 10:43:20
1383
原创 antd--＜Tree＞的开发应用
后台返回的数据 "data": { "process": [ "conf.config", "algorithm.base", "common.helper.msg_helper", ], "log_level": [ "INFO", "ERROR", ] }展示成树结构处理1let objMap = Object.entries(data)返回，将父子换为0，1导航树 objMap.map(item =>
2021-10-20 10:27:01
78
原创 reduce()的高级用法
const {lineList, isAnomalyList} = (!!info.data ? info.data : []).reduce((prev, cent) => { return Object.assign({}, prev, { lineList: prev.lineList.concat([[cent.log_time, cent.log_value]]), }, cent.anomalyType !.
2021-10-18 16:50:23
262
原创 antd_Tree_树的节点名称相同引发的未点击但被选中
1：树结构（node重复）2: 原始树结构2.1:加工树状显示setLeftTree(prev => { if (!!info && !!Object.keys(info).length) { return Object.entries(info).map(item => { setExpandedKeys(p.
2021-09-28 17:16:57
581
原创 echarts折线图，散点和折线点的点击事件
useEffect(() => { return () => { localStorage.removeItem('tabsActiveKey') } }, [])
2021-09-24 21:04:50
2604
原创 Object.keys()的实用优化
后台返回：青铜： if (!!percentage && !!Object.keys(percentage).length) { return [ !!percentage.nonAnomalyCount && {value: percentage.nonAnomalyCount, name: '未见异常数量'}, !!percentage.periodNewCoun..
2021-09-24 20:07:09
229
原创 Array.filter()的实用场景
const isAnomalyList = (logModalLineData.anomalyTrend || []).map(item => { if (item.isAnomaly === 1) { return { symbolSize: 5, coord: [item.log_time, item.log_value], }.
2021-09-22 10:23:42
95
原创 Object常用的方法keys(),entries(),assign()
Object常用的方法keys(obj)entries()assign()浅拷贝深拷贝keys(obj) //数组 var arr = ["a", "b", "c"]; console.log(Object.keys(arr)); // ['0', '1', '2'] //对象 var obj = { foo: "bar", baz: 42 }, keys = Object.keys(obj); console.log(keys); /
2021-09-18 12:00:27
58
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人