又到了一年一度的新Flag时间
10本书 2/10
React 已学完60%, 准备动手做自己的小项目
Python 最近在看新买的三本书 慢慢来。争取年底可以实战
吉他 (放弃了,吉他好像让我妈扔了)
换工作 (已完成 华宇到AC,薪资没达到期望,后面再看吧)
何鹏技术博客
转载: 请携带作者并标明出处
归类在项目中 常用的lodash方法
内部大部分方法 可通过es6等处理 这里不做归类
1 | _.compact([0, 1, false, 2, '', 3]); |
1 | // 你可以过滤id |
1 | _.fill([4, 6, 8, 10], '*', 1, 3); |
1 | var users = [ |
1 | var users = [ |
1 | _.flattenDeep([1, [2, [3, [4]], 5]]); |
1 | _.fromPairs([['fred', 30], ['barney', 40]]); |
1 | var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]; |
1 | var array = [1, 2, 3, 1, 2, 3]; |
1 | var array = [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }]; |
1 | var array = [5, 10, 15, 20]; |
转载: https://lixuguang.github.io/2020/01/02/FE-guide-new/
作者: 李旭光
1 | let a = { |
从上述例子中我们可以发现,如果给一个变量赋值一个对象,那么两者的值会是同一个引用,其中一方改变,另一方也会相应改变。
通常在开发中我们不希望出现这样的问题,我们可以使用浅拷贝来解决这个问题。
首先可以通过 Object.assign
来解决这个问题。
1 | // js代码 |
当然我们也可以通过展开运算符(…)来解决
1 | let a = { |
1 | arr.slice() |
通常浅拷贝就能解决大部分问题了,但是当我们遇到如下情况就需要使用到深拷贝了
1 | // js代码 |
浅拷贝只解决了第一层的问题,如果接下去的值中还有对象的话,那么就又回到刚开始的话题了,两者享有相同的引用。要解决这个问题,我们需要引入深拷贝。
这个问题通常可以通过 JSON.parse(JSON.stringify(object))
来解决,这也是最好用最简单的方法,俗称乞丐版。
1 | // js代码 |
但是该方法也是有局限性的:
1 | // js代码 |
如果你有这么一个循环引用对象,你会发现你不能通过该方法深拷贝
在遇到函数、 undefined
或者 symbol
的时候,该对象也不能正常的序列化
1 | // js代码 |
你会发现在上述情况中,该方法会忽略掉函数和 undefined 。
但是在通常情况下,复杂数据都是可以序列化的,所以这个函数可以解决大部分问题,并且该函数是内置函数中处理深拷贝性能最快的。
那么是否可以解决函数和循环引用的问题呢?答案是肯定可以解决,接下来是基础版本的改造
1 | function myClone(target){ |
写到这里已经可以帮助你应付一些面试官考察你的递归解决问题的能力。但是显然,这个深拷贝函数还是有一些问题。
这里只考虑了对象,没有考虑数组。
下面我们来做一个强化版的深拷贝,同时考虑对象、数组还有循环引用的问题。
1 | function myClone(target, map = new WeakMap()) { // WeakMap => 键对象弱引用, 可被垃圾回收 |
当然如果你的数据中含有以上三种情况下,可以使用 lodash
的深拷贝函数。
如果你所需拷贝的对象含有内置类型并且不包含函数,可以使用 MessageChannel
1 | // js代码 |
深拷贝实现方式2,可以深拷贝 function
、symbol
,等等,堪称终极版
1 | // js代码 |
转载: https://lixuguang.github.io/2020/01/02/FE-guide-new/
作者: 李旭光
this
在调用new
的过程中会发生以上四件事,我们也可以试着来自己实现一个new
1 | // js代码 |
对与实例对象来说,都是通过new
产生的,无论是function Foo()
还是 let a = { b : 1 }
。
对于创建一个对象来说,更推荐使用字面量的方式创建对象(无论性能上还是可读性)。因为你使用new object()
方式创建对象需要通过作用链一层一层找到object
,但是你使用字面量的方式就没这个问题。
1 | // js代码 |
对于 new
来说,还需要注意下运算符优先级。
1 | // js代码 |
从上图可以看出,new Foo()
的优先级大于 new Foo
,所以对于上述代码来说可以这样划分执行顺序
1 | // js代码 |
Foo.getName()
,所以结果为 1;new Foo()
产生了一个实例,然后通过原型链找到了 Foo 上的 getName 函数,所以结果为 2。因为全局的axios组件 所以很容易的从前置和后置拦截器中
通过headers向后台传输 token或者 user-info
并使用elementUi的 Loading.service 进行了请求的遮罩
本来是很舒服的一件事
但突然发现 因为业务需要 使用Promise.all 的遮罩缺出现了问题
因为大家都知道 .all 是当所有请求都success时 按照书写顺序同时返回。
但拦截器并不知道,当第一个接口开启拦截器后,后续接口同步开启。
但第一个结束的接口关闭了遮罩。其他接口却还没有完成。
增加计数器 每次开启遮罩进行计数
关闭之后 进行– 当等于0时即可默认所有接口完成 关闭遮罩
1 | 请求拦截器 |
1 | 响应拦截器 |
今天,开发小伙伴问我。当导出失败的时候 后台返回的Message 前台没有打印。我是在 response中进行的拦截
发现 responseType: ‘blob’的返回值 是要给blob的类 并没有message啊。
从期望来看。是要将blob对象转换成 JSON 就可以了
但是 我所封装的axios组件中 正常的get post请求和 blob请求等 是公用一个拦截器的。
为了不影响其他功能。就需要做一次判断。
1.首先判断是否是blob请求
2.其次判断 type类型是否是 ‘application/json’
都满足是 即可转换打印
1 | if ( |
总结来说 就是相对于 2019年初计划。我 干(屁)的(事)不(没)错(干)!!!!
今年是在用户体验部最开心的一年,以及我的各位小伙伴,结果年底前端部门解散,拆分到项目组,真特么玩我呢…****
其实,总的算起来。我也达到了一点。
1.也算是入门了React,但还没有实战经历。听说React更新了,等出教程也跟着实战来一遍。
2.Git从以前无脑push,也初次接触了gitflow,也看到了带来的好处。哈哈哈 今晚也是拼团买了git三剑客,待我啃完升职加薪,走上人生巅峰。
3.年初定了要读10本书….我特么加上读小说也没读到10本…webpack就啃了40页 css选择器世界我读了封皮..我废了 我忏悔,我2020一定重新做人。
4.公司培训,算是完成了年初的任务。Vue Es6 前后端分离 CSS+HTML JS 都完成了部门或公司培训,待我奖励自己一顿炸鸡。
5.Vue模板也通过一年打磨,推出了Base版本,使用项目20+也算是完成了承诺,也打包成了脚手架 vue create –preset he8hepeng/cli3
6.也终于有了自己维护的NPM模块,也算是给自己增加了一点加分项吧。
7.啃完了Es6
8.尽了把师傅的责任
9.当上了前端技术负责人 T.T
在某宇呆了两年半了,我的前端经验也马上三年。心底还是感谢公司带给我的成长,但最近的公司氛围还是让我感到恐慌。
累的永远是有技术的人,也看到了很多有才干有抱负的人离开。也送走了好多合作愉快的项目经理及大神开发。
公司不注重前端,毕竟是卖软件的 更偏向数据和业务无可厚非。但前后端分离的问题,还是让前端累的喘不过气。
ATY6的淫威,让我怕怕….
下半年前端团队分了合 合了分,元旦毫无预兆的拆组分入项目团队,让人寒心。
耗费无数个夜晚来工作和学习,终于成为高级前端,但领导却认为听话的人就是准高级。。。真是让我苦笑。。。
日子还得过,只能不断地充实自己,不断地努力,才能不被这些挫折所影响,加油!
1.心怡的工作。
2.读10本书。
3.啃完TypeScript和webpack以及React
4.身体健康,培养一门兴趣爱好。可以试试吉他,毕竟我会弹棉花。
5.旅游
6.每周一篇博客
首先 问题是 T3E项目 突然联系我说,出了个小问题 0.0 然后下去发现 在IE11下,20分钟操作就引起页面崩溃,
按理说64位系统 浏览器也拥有1.5G的内存,一个web项目 怎么会引起性能问题呢。
so 用IE11的内存跑了下 发现部分页面每次加载就加了200M的内存 但离开 并没有内存降低的迹象…大概了解了
首先,确认了一下项目背景,是由前端及部分开发共同开发的。
技术栈为VUE + atyUI(公司基于ElementUI 进行的二次封装)。
而后 要了一份GIT地址 然后看了一下sonar,代码从检查来看还可以。进行人肉检查。果然发现了大量的数据处理 和页面create里的大量前置接口 0.0 还真是公司特色呐~
而后继续 检查。
发现公共的JS文件 放入了 Mixins里,确实是好习惯 但是…引入了36次…
发现 大量的数据操作 使用reduce filter等语法操作数据,从性能来看 要比for循环更加损耗内存,但这么严重的性能问题
不会是这种操作引起的 但需要记录一下。
打开控制台 通过PerforMance和快照 发现atyUI中存在大量闭包 无法被销毁。。原来你才是罪魁祸首
整理文档 交给项目组 整改