2024年如何成为一名优秀的大前端Leader?

本文介绍了前端开发者应掌握的基础技能如手写instanceof、深拷贝和防抖,强调了使用工具如CodeIF、docschina和在线编程平台的重要性。同时,提到了技术面试的意义以及如何通过开源分享提升自我。
摘要由CSDN通过智能技术生成
  • 阿里`UED`[6]

  • 滴滴 `FE BLOG`[7]

  • 头条前端[8]

  • 有赞前端[9]

  • 腾讯 `AlloyTeam`[10]

  • 腾讯 `TNFE`[11]

  • 百度 `EFE`[12]

  • HYPERS 前端团队博客[13]

  • InfoQ 前端专栏[14]

  • 印记中文周刊[15]

  • 阮一峰老师weekly[16]

  • 蚂蚁数据体验技术团队[17]

  • TNFE-Weekly[18]

有时候学习后端Node也是必不可少的,后端的语言有助于反哺前端技术能力。

我的启蒙老师就是大家所熟知的,拥有9000多万阅读量的,分享纯干货最直接的廖雪峰-Node.js[19]

保持技术深度

手写一些函数是基本功,最好达到熟练地步,可以通过练习来加强记忆。以下简单列举几个,网上也有很多资料。最好找个可以在线编程的,可以不借助工具快速搭题。

手写instanceof

51babe2c5184869c4474ac0ceb196327.png

instanceof (1)

手写深拷贝

9191f0479fbefa81aa68ca5f182cf69b.png

deepcopy

手写防抖

function debounce(fn, delay) {

if(typeof fn!==‘function’) {

throw new TypeError(‘fn不是函数’)

}

let timer; // 维护一个 timer

return function () {

var _this = this; // 取debounce执行作用域的this(原函数挂载到的对象)

var args = arguments;

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(function () {

fn.apply(_this, args); // 用apply指向调用debounce的对象,相当于_this.fn(args);

}, delay);

};

}

input1.addEventListener(‘keyup’, debounce(() => {

console.log(input1.value)

}), 600)

刷刷算法题

dd75dd8a158faf7f5b068363fb919b4c.png

image-20211119181035741

善用工具 前端开发博客


搞技术的应该为自己重复性的工作感到鄙视,技术是生产力。要学会通过工具的方式来减少重复性的工作,熟练利用工具可以让你效率翻倍提升,从而有助于提升愉悦的工作体验。

其中推荐给大家我用着比较顺手的outils[20],轻量级工具库,支持模块化加载。强烈建议读源码,以后搞项目就可以随手封装出一个类库。

关于工具学习资源:推荐28个网站,让你边玩边学

c17de84e0d8d759a3df458a5bc228bd1.png

image.png

CODEIF

变量命名神器,地址:unbug.github.io/codelf/[21]

b7d4792ded84a4e46121c7d6c926a269.png

image.png

docschina

Web前端优质的中文文档,docschina.org/[22]

975b763dd85a87a975f3ae3b624fa84e.png

image.png

RegExr

RegExr 是一个基于 HTML/JS 开发的在线工具,用来创建、测试和学习正则表达式。

特性

  • 输入时,结果会实时更新

  • 支持 JavaScript 和 PHP/PCRE RegEx

  • 将匹配项或表达式移至详细信息

  • 保存并与他人共享表达式

  • 在编辑器中使用 cmd-Z/Y 撤消和重做

0e83b159841a33e5e5084b93e0012061.png

image.png

Tool.lu

工具集合: tool.lu/[23]b11838b549edcbb0289e2b517257ca51.png

CodeSandbox

CodeSandbox[24] 是一个在线的代码编辑器,主要聚焦于创建 Web 应用项目。CodeSandbox[25]

支持主流的前端相关文件的编辑:JavaScript、TypeScript、CSS、Less、Sass、Scss、HTML、PNG 等。

LightHouse

LightHouse[26]是一个开源的自动化工具,用于改进网络应用的质量。在里面你可以看到它给你各个方面的建议,比如图片、css、js 这些文件的处理,还有 html 里面标签的使用,缓存处理等建议,可以根据这些来对网站进行优化。

Can I Use

Can I Use[27]这个是一个针对前端开发人员定制的一个查询 CSS、Js 在个中流行浏览器钟的特性和兼容性的网站,可以很好的保证网页的浏览器兼容性。

有了这个工具可以快速的了解到代码在各个浏览器钟的效果。比如查询 transform 的浏览器支持情况:

500ad25d9450b758421da9fab1448bc2.png

image.png

Carbon

Carbon[28]是一个在线的代码转图片工具。发个朋友圈,发个脉脉,发个博客啥的贼能装X了。尤其咱们搞前端的,要注重用户体验的,所有输出的东西必须看得过去。

e81220f371bac5cf4b1209413adf6e5e.png

前端资料汇总

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。

首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。

更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点:和什么人、做什么事、给多少钱,要给这三者在自己的心里划分一个比例。
最后,祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值