赵乘风_i

原创 前端各阶段资源，应有尽有，尽管学，学的完算我输

前端路漫漫，如果想好要走，那就加油吧ps:可以加我微信，关于前端的困惑都可以问我1、前端基础视频 各阶段视频 链接: https://pan.baidu.com/s/1DkKu-uyN0zGPtONUrvXkag 提取码: s99a 2、HTML+CSS+JavaScript思维导图 链接: https://pan.baidu.com/s/1B...

原创 HTML，CSS，JavaScript知识树思维导图

最近师父布置的学习任务，就是构建知识树。一个周末终于完成了任务，有一些是网上有的，就直接用了，有些没有，就是自己总结的。整理的过程中发现前端的知识真是错综复杂，还有层出不穷的各种框架。任重而道远想要原稿的可以留言邮箱，统统发给你！PS：微信公众号 FEtoss回复 hcj 即可获取下载地址正文~HTMLCSSJ...

原创 最近学习路径

在平时的工作中，不仅需要储备基础的技术能力，还要对所处的行业方向和研究领域进行深挖。大概可以整理一下技术能力比如Webpack，JS基础，前端工程化；行业方向的话就是大数据前端，目前的核心发展包括 数据集、渲染引擎、数据模型、可视化 这四个模块，平时可以做的东西如 数据表格优化、Web Excel、SQL编辑器、智能可视化等。现在在可视化方向做了一些事情，比如可以拖拉拽快速生成的可视化页面，面向前端工程师，生成JSON格式，在代码中使用。当然，这些不够，还需要做更多的事情，目前在规划中。最近

原创 跳转到另一页面固定锚点，参数带在url上

在需要跳转页，触发跳转window.open('/xxx/yyy/zzz#detail')在接收跳转页并到固定锚点，进行判断并使用 scrollTo 方法进行页面滚动，调用scrollTo 的对象是document.querySelector('.layout-content')，而不是window，原因是react项目切换路由，没有回到顶部useEffect( () => { if (window.location.hash === '#detail') {...

原创 React切换路由，没有回到顶部

在网上找了很久，也都是利用window.scrollTo 方法去解决的，但我尝试后，发现没有生效。问了其他大佬之后，才发现问题出在 scrollTo 方法的调用上class ScrollToTop extends Component { componentWillReceiveProps(nextProps) { // 当路由切换时 if (this.props.location !== nextProps.location) {

原创 使用antd组件库，将基准调至 12px

使用了 antd 新组件库，但是基准都是 14px，而系统的默认基准是 12px，通过一些全局配置，可以直接将基准调至 12px参考 antd 主题配置最开始，采用的是 webpack的配置方式，也就是在webpack.config.js中，在 less-loader，设置紧凑主题（compact）但其实结果不太理想，在本地是可以正常调整到12px，但在发布dev之后，有的是12px，有的还是14px。这非常使人疑惑，最后大概认为是 打包后资源请求先后的问题，但我也不能每个修改样式，然后加.

原创 最近述职结束遇到的一些问题

简单聊一下我最近一次的述职，有前辈指出的几点问题，关于如何在现在的阶段上更进一步。背景快3年前端开发经验，现在待的是第二家公司了，主要做的是PC中后台应用，技术栈为React。自我感觉技术能力一般，刚入行那一年，成长最快，由一个前端小白，迅速成为一个合格的API调用师，但在这之后的快两年时间里，只能说是API调用的更快了，最多是可以精准定位问题，快速解决，或者是基于系统实施方面提出一些可以优化的点，但是在底层能力方面，总没有显著的成长。对于一个已经快3年开发经验的工程师来说，是不是有些差劲了呢。领

原创 antd Tabs 实现 胶囊样式标签页

现在的项目是基于antd了，但又要和之前的UI保持一致，设计师希望还用之前的tabs 标签页的样式，所以就需要在antd Tabs的基础上进行一些样式的修改。如下：在 antd Tabs type='card'的基础上进行样式修改<div className='c-tab-capsule'> <Tab type='card'> {children} </Tab></div>.c-tab-capsule { .ant-tabs-

原创 antd modal 打开会闪一下，针对确实多次渲染的问题

需求背景在最近的项目中，遇到一个比较复杂的场景，点击触发后会打开modal弹框，但是因为情况比较多，总共有3种方式都可以打开modal框，所以在父组件的处理就比较复杂，涉及到了多次渲染，就导致modal框在打开的时候，会闪一下。我也知道，处理好多次渲染的问题，modal框应该在打开的时候就不会闪了，但是，因为需求场景比较复杂，如果要处理多次渲染，那就会导致modal框打开后的各种问题，所以不能修改解决在仔细看了官网的api后，发现一个属性， maskTransitionName 其实就是将Modal

原创 React项目pdf,word 预览 使用react-file-viewer插件

最近需要做一个word和pdf预览的功能，因为基础的技术栈是 react，于是就选用了 react-file-viewer 这个插件.其实这个插件，还支持更多文件格式Images: png, jpeg, gif, bmp, including 360-degree imagespdfcsvxslxdocxVideo: mp4, webmAudio: mp3安装npm i react-file-viewerps: 如果React版本小于16，需要安装 0.5版本的 react-fil

原创 如何正确地地使用Echarts图表

目标让用户短时间内获取重要信息 => 量化，合适的图表，布局与颜色搭配分析过程从上面两张图可以知道，在整个的分析过程中，前端负责的是 图表的设计。选用哪个图表，以及数据关系如何，这些东西是产品来决定的，由于开发时间以及对数据图表概念不清晰等问题，我们很少关注是不是应该这样去实现。这样看来，我们是需要学习一些这样的知识了，会用，也要知道为什么要用。图表选择可视化目的 数据集特征...

原创 记第一次的社招经历【前端两年小菜鸟】

我又来更新了~简单聊一下我前段时间社招的经历啦~到新公司入职已经两个多月了，从准备面试到确定offer再到入职，就1个半月时间，似乎很快，但这也让我感触颇深。首先是为什么要离开之前的公司呢？面试的时候，每一家hr都会问，谈话的时候，领导也会问。我一直的回答都是两个点，首先是我毕业两年多了，想要寻求一个更大的发展空间，还有一个点就是工资太低了。但一般没有说第二个点，只有再追问时，我会直接说了，因为也没有必要隐瞒，跳槽嘛，大家都心知肚明，大部分原因都是钱没给到位。其实我离开还有一个点就是之前一起毕业进公

原创 所以我一点都不努力吗

没有什么技术追求，有点迷茫了

原创 Echarts 折线图点击折线区域(包含圆点)触发事件

和上一篇相关，这次是对于折线图的处理，也是基于 getZr() 这个方法来使用的需求分析产品想要在折线图上点击某个折线，触发事件，不止是在折线图的拐点，那处理方法我想了两种，如下：获取点击位置，判断点击位置是否在某条折线的集合上此方法有实践过，但没有成功，因为我拿不到某条折线的所有点的集合，或者说点太多了，所以思路也不是很正确获取点击位置，返回这个点的信息，在这些信息里找，看有没有属于这条折线的信息所以最终的实现确实是这种方式，当然，是基于getZr()获取点击坐标的方式那myChar

原创 Echarts 柱状图 hover阴影部分可触发点击事件

可以点击整个柱状图的hover区域，也就是某个柱子的空白区域在hover之后，也是可以点击的数据可视化，图表展示区域点击

原创 react+antd 动态增删表单 再解决

最近开发的一个功能，和之前写过的很像，但毕竟我也快两年经验了，当然不能再使用原来实现的方法，于是，又搞起来。功能： 需要对多个Input组成的list可以新增和删除在之前的文章 react 涉及的增加，删除list ，我说不可以使用 index 来做删除，就使用了 给每个 list 添加 selfId 的方式来实现删除。然而事实是可以使用 index 来进行删除操作的。当年我才疏学浅，没有get到高级玩法，使用selfId这样的实现，无疑就是对数据过度操作了，所以学习了新的使用方法，实现如下：技术

原创 近期遇到的数组对象处理

一个数组对象，根据另一个数组的ids来过滤数据。arrF.filter(i => arrZ.includes(i.id))判断一个数组是否是另一个数组的 子集arrF.every(i => arrZ.includes(i))数组对象选择出一个与之id相等的对象使用 find 方法会更加优雅一些，使用 filter也是可以的，但需要多一步操作，因为filter返回的...

原创 JavaScript基础复习(六) 对象，原型(链)，继承

最近在复习基础知识，这次整理的内容是JS对象，原型，原型链，继承～本次知识的复习是基于《JavaScript高级程序设计》加上自己的理解，如果有什么问题，望不吝赐教。对象什么是对象： 无序属性的集合，其属性可以包含基本值，对象或者函数。 在js中就是 key-value 的键值对对象的属性类型数据属性访问器属性数据属性包含一个数据值的位置，可以读取和写入。包含4个特性[Con...

原创 JavaScript基础复习(十一) 异步编程

总是纠结js是异步还是同步？对于JS 异步还是同步这个问题，不需要纠结太多，在执行DOM渲染时，确实是同步执行的，也是为了安全起见，一步一步执行，如果上一步未完成，下一步是不会运行的。但本质还是单线程但是对于 网络请求 这样的场景，一个网络资源啥时候返回，这个时间是不可预估的，所以不能傻傻的等着，也就是这样，设计了异步，不管返回结果，执行后就执行下一步，上一步的执行结果什么时候返回，就什么时...

原创 JavaScript基础复习(七) Ajax&跨域

Ajax原理通过 XMLHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JS操作DOM，从而更新页面。编写步骤创建AJAX对象 XMLHttpRequest打开一个连接 open(“GET”,URL,asnyc)发送数据 send();事件处理函数，处理服务器的响应结果 onreadystatechange实现步骤//创建ajax对象var...

原创 JavaScript基础复习(九) 常见JS算法

排序算法AlgorithmAverageBestWorstextra spacestable冒泡排序O(N^2)O(N)O(N^2)O(1)稳定直接插入排序O(N^2)O(N)O(N^2)O(1)稳定折半插入排序O(NlogN)O(NlogN)O(N^2)O(1)稳定简单选择排序O(N^2)O(N^2)O(N^2)...

原创 JavaScript基础复习(十) JS事件机制

事件用户交互行为，用户或浏览器自身执行的某种动作事件流页面接收事件的顺序，事件触发的顺序，分为 事件冒泡(子级先触发，冒泡到父级)和事件捕获(父级先触发，再到达子级) 先捕获->处于目标阶段 -> 再冒泡事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发，子级元素先触发事件捕获：事件从最不精确的对象(document对象)开始触发，...

原创 JavaScript基础复习(五) 作用域(链)，闭包，this，执行上下文

作用域作用域： 变量与函数的可访问范围量分为全局作用域： 在代码中任何地方都能访问到的对象拥有全局作用域局部作用域： 一般只在固定的代码片段内可访问到。最常见的是在函数体内定义的变量，只能在函数体内使用。在函数体内，局部变量的优先级高于同名的全局变量。如果在函数内声明的一个局部变量或者函数参数中带有的变量和全局变量重名，那么全局变量就被局部变量所遮盖。声明提前：JavaScript...

原创 JavaScript基础复习(四) 函数详解

创建函数的方式函数声明和函数表达式// 函数表达式 匿名函数 赋值给这个变量var foo1 = function(...){}// 函数表达式 命名var foo2 = function acc(...){}// 函数表达式 也就是立即执行函数(function(){...})// 函数表达式setTimeout(funciton timer(){...},200)/...

原创 盒模型（IE，W3C）

W3C盒模型IE盒模型从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。两者的不同体现在width和height上IE：width=content+padding+borderW3...

原创 fileReader 读取文件内容

原创 antd Table 展开行可全部展开或关闭

有一个需要实现的需求： 可展开表格 可以全部展开或关闭。如下：技术实现前提： React + antd Table + Hooks + tsx在 antd Table 上并没有找到这个属性，所以就自己上手来解决一下咯。实现思路：写一个同级的 div ,设置其css属性，让它绝对定位到 父表格对应的th上设置其打开或关闭的显隐使Table的所有 keys 可控完善细节总体...

原创 React Hooks 再学习，应用到项目中

期望在新代码中使用hooks函数 + hooks = 有‘生命周期’的组件与class的区别：Hook 提供了强大而富有表现力的方式来在组件间复用功能，自定义hookconst [originData, setStateData] = useState(0);const newData = originData * 2;setStateData(newData);//useEf...

原创 React项目 加入 TS

1、全局安装tsnpm i -g typescript2、创建tsconfig.jsontsc --init修改tsconfig.json，开启jsx和allowJs配置，3、安装开发环境依赖npm install --save-dev typescript @types/react @types/react-dom ts-loader4、修改webpack.config.js....

原创 react 渲染页面的过程，存在的问题，引入Fiber机制

问题： 渲染过程分为两个阶段1、调度阶段：根据更新数据生成新的Virtual DOM，通过Diff算法，找出需要更新的元素，生成新的更新队列，2、渲染过程：遍历更新队列，将变更一次性更新到DOM上。而1过程是不可控的，也就是说React在执行更新的时候是同步的，浏览器主线程被React占着用来调度，这段时间如果用户进行操作，那就不会得到反馈。需要同步更新的任务完成后，主线程才被释放。Rea...

原创 JS精度丢失导致的问题及解决

遇到的问题：项目中出现了 17652.19 + 7673.78 - 25325.97 = -3.64 的问题，最后发现是JS精度丢失的问题，那么就先来看看这个结果是怎么产生的。产生原因：JavaScript 中所有数字包括整数和小数都只有一种类型 — Number。它的实现遵循 IEEE 754 标准，使用 64 位固定长度来表示，也就是标准的 double 双精度浮点数（相关的还有floa...

原创 彻底理解JavaScript的深拷贝，浅拷贝

是什么js中有基础类型和引用类型。基础类型是存储在栈内存中的，按值存储，按值访问。基本类型有Number，String，Boolean，Null，Undefined，Symbol引用类型是存储在堆内存中的，值是可变的。在栈中保存对应的指针（一个指向堆的引用地址），指向堆中实际的值。比如数组，对象，正则等，除了基本数据类型，都是引用类型了。基本类型的复制，是不会相互影响的。因为直接改变的就是...

原创 JavaScript基础复习(八) 字符串，数组操作

数组截取相关slice 截取 不会影响原始数组var arr = [1,2,3,4,5];// 截取 从 i 到 j的数组，不会改变原数组console.log(arr.slice(3)); // [4,5]console.log(arr); // [1,2,3,4,5]console.log(arr.slice(1,3)) // [2,3]...

原创 使用vue+webpack构建项目(三) Vuex中的 mutation和action

知识点复习使用vue+webpack构建项目(二) 引入vuex vue-resource vue-router更改 Vuex 的 store 中的状态的唯一方法是提交 mutation// 区别mutation 必须同步执行Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。在组件中使用this.$store.commit(ty...

原创 Antd 组件 Menu.Item中关于 disabled 的一点使用心得

有一个需求是下拉菜单中有操作，但有些操作是有前提条件的，比如 批量启用 就需要在选择了数据之后。所以设置disabled来控制它操作还是不可操作。但是会出现一个问题，在<Menu.Item></Menu.Item>中的 不是 string就会导致 disabled不能生效也就是以下情况<Menu.Item key="1" disabled={dis}>...

转载 pycharm最新激活码（2019）---亲测可用

MTW881U3Z5-eyJsaWNlbnNlSWQiOiJNVFc4ODFVM1o1IiwibGljZW5zZWVOYW1lIjoiTnNzIEltIiwiYXNzaWduZWVOYW1lIjoiIiwiYXNzaWduZWVFbWFpbCI6IiIsImxpY2Vuc2VSZXN0cmljdGlvbiI6IkZvciBlZHVjYXRpb25hbCB1c2Ugb25seSIsImNoZWNrQ...

原创 map出的数据拼接，使用；隔开，删除最后一个符号

问题： 后台返回一个数组，需要取到每个对象的name和sex，自己拼接成字符串，以 ； 隔开解决：1、 拼接出字符串，然后删除最后一个 ；号let asd = '';objList && objList.map(({ name, sex }) => { const sexN = sex && '('+ sex + ')'; retu...

原创 过滤掉某个数组对象中 属性全部为某个值的 数组元素

JS数组操作方法问题： 过滤掉某个数组对象中 属性全部为某个值的 数组元素涉及的问题是 数组嵌套对象再嵌套数组aList && aList.filter( item => !(item.iList.every(({ state }) => state === 2) && item.iList.length > 0)...

原创 React项目 页面切换，保留表单筛选项

Q: 人员列表页面切换保留筛选项ans:/** * 表单组件在挂载时，将组件的 fields 值赋给对应的交互组件 */componentDidMount() { const { fields, pageIndex } = View; this.props.form.setFieldsValue(fields); this.getUser(pageIndex);...

原创 NestJs 学习(二) todoList应用

实现一个 TodoList 应用UI实现项目解析config 异常，管道，中间件，过滤器 使用todo 主要实现todolist的增删改查app.module.ts 组织应用程序结构main.ts 项目配置文件，监听端口实现创建文件在 cli 项目的基础上，创建todo 文件夹，如上，创建一些文件，可以手动创建，当然，也可以使用nest的命令。generate(...