的愿景很大，他们希望打破前端和后端的边界，在维持自身客户端能力优势的基础上，同时为社区的全栈框架提供基建。我非常认可他们的做法，因为打破了端的边界，才能帮助前端工程师打破职业天花板。React

作者：悟空和大王https://juejin.cn/post/7330071686489636904分享一篇前端人员比较感兴趣的话题，如何评估工时。正文看来很多小伙伴对这个问题感兴趣，大家不要忽视了压工时这个事。领导为什么会压工时？使他的KPI更好看不清楚做这个东西实际要多长时间因为第2点的原因，他也无法去争取合理时间部分人看着下属加班，有种大权在握，言出法随的畅快感码农为什么不要轻易答应压工时?无形中会打击你的自信心，当自信心全无的时候，要么是职业生涯结束，要么是变成人人都跑来拿捏一手的角色轻易妥协，会让你的说的话，可信度降低。毕竟，别人随便说一下，激一下，你就妥协了，那很容易就让人觉得，你就是随意乱说一个时间这会妨碍你对自己真实能力的认知和评估被压工时了怎么办?偶尔有少量任务，被压了少量工时，个人认为是可以接受的，毕竟不可能一切都能按规划走大量工作被压工时，那就告知延期风险，你的工作速度应该保持不变，完不成，就让项目延期。如何解决延期问题？那是领导的事情，不是一个小码农应该操心的。没怎么压工时，但把工作时间延长了？首先，工作该是什么速度，就是什么速度，不要替领导着急着赶进度其次，反馈这有延期风险，建议领导增派人手。（记得先和其他成员通个气）该提加班就提加班，调休或加班工资是你应得的，累了就调休，你是人，不是机器为什么要给自己留缓冲时间？加缓冲时间是工作不饱和？加缓冲时间不是工作不饱和8小时工作日，你不可能每分每秒都在写代码，谁也做不到。你不可能熟悉每个API，总有要你查资料的时候，而查资料，可能你查了4-5个地方，才总结出正确用法，这需要额外的时间你的工作随时可能被人打断，比如：开会，喝水，同事问你问题等等，这都会耗费你的时间你拉取代码，提交代码，思考实现方式，和业务进一步确认需求细节，和UI沟通交互细节，自测，造mock数据，这都需要时间如果没有缓冲时间，一个任务延期，可能会导致，后续N个任务都延期。即使从项目角度分析，足够的缓冲时间，有利于降低项目延期风险工作总是被人打断怎么办？比如：开会，比如插入了一个紧急工作任务，这种较长时间的打断，那就将这些被占用的时间，写进工作日志，即时向项目组反馈，要求原本的工作任务加工时或延迟开始被同事问问题。几句话能说清楚的，那不妨和他直说。几句话说不清楚的，那只能等你有空的时候，再给他解答。要优先考虑完成自己的工作任务。大方的承认自己的不足，能力多大，就做多少事，明确自己的定位可能有的小伙伴，可能被别人激一下，被人以质疑的语句问一下，后续就被人牵着鼻子走了。有很大因素是因为不敢承认某方面的工作能力暂有欠缺。其实大方的承认即可，有问题，那就暴露问题，如果项目组其他成员会，那就让他来教你，这也属于沟通协作。如果没人会，那说明这是一个需要集思广益的公共问题。可能有同学觉得自己就是个小码农甚至因为自己是外包，不敢发表自己的想法和见解，其实大可不必，只要你就事论事，有理有据，完全可以大方说出来，你不说出来，你永远只能从自己的角度看这个问题，你无法确认自己是对的还是错的。错了咱改，对了继续保持。既不贬低别人，也不看轻自己，以平常心讨论即可。明确自己的定位，就是个普通码农，普通干活的，项目延期了，天塌了也是领导想办法解决。自己不会的就反馈，别人不会自己会的，那就友好分享。不会的，不要羞于请教。干不过来了，及时告知领导，让其协调解决。坦坦荡荡，不卑不亢。前提此方法是在没有技术阻碍的前提条件下预估，如果有技术障碍，请先解决技术阻碍此方法需要根据个人实际情况调整这里以普通的以vue,element-plus,axios为基础技术的管理系统为例这些都是个人见解，欢迎在评论区提出不同观点请先以一个普通的CRUD界面，测算自己的基本编码速度为啥评估会不准确自我评估时领导给你评估时功能领导认为的领导忘记的领导认为的时间实际时间加个字段加个显示字段而已，实际只要3分钟吧码农要找到对应代码，查看代码上下文，或许还涉及样式的修改，后端接口可能还没有这个字段,

适用于包装包含多个属性或复杂数据结构的对象。其实不管是用ref还是reactive，只要在特定的场景下分情况使用他们就好了，跑步要穿运动鞋，在寝室里就给我把拖鞋穿上...结尾用

作者：滚去睡觉https://juejin.cn/post/7309443151687663668浅聊一下最近天气有点冷，给大家用vue做一个简单的天气预报小demo，记得多穿衣服哦各位！准备高德地图打开高德地图api(高德开放平台

作者：狗贼https://juejin.cn/post/7057759297811251231突然翻到在之前公司写的抽奖软件（用于公司年会）。觉得挺感慨的，TM的一共30+人，抽15左右，代码还是我写的，就是抽不中我。（真的是，涨了人品，失了智）一、效果效果如下：二、基础效果元素周期表照片墙？抽奖？写之前的那段时间，刚好逛博客，看到别个大神写的threejs版《元素周期表》，这效果大体有点近似。最重要的2块有了。然后再把元素、tip啥的改成抽奖用的照片和名字，使用CSS3DObject

作者：夜尽灬天明丶https://juejin.cn/post/7079447275755274254本文包含了在线编译，在线编辑、实用工具、可视化工具、各种前端电子书等50多个网站，快放到你的收藏夹吃灰吧如果你看到最后了，记得给我一个免费的赞哦在线编译（编辑）、playgroundJS

arr);console.log(`步骤3：把牌堆顶3张放到中间的随机位置。`);console.log(`此时序列为：${arr.join('')}\n---`);//

https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line[9]react-devtools:

设计和网站构建上的独特方法，将来我们有望看到更多的网站样式解决方案的出现。除了新的样式解决方案会不断发布之外，未来以下这些方面也值得我们期待：现有解决方案的持续更新。CSS-in-JS

前言相信做前端的同学们，应该没有人没听说过axios的鼎鼎大名吧！用了这么久的axios，是否也会好奇axios是如何实现的呢？今天就让我们走进axios的源码，学习这款神级工具是如何实现的吧！2

}在这个例子中，我们将一个包含三个键值对的数组传递给Object.fromEntries()方法，并将返回的结果存储在obj变量中。obj变量现在是一个由键值对组成的对象。2.

转自：网络我发现很多人只知道如何常规地使用promise。在js项目中，promise的使用应该是必不可少的，但我发现在同事和面试官中，很多中级以上的前端仍然坚持promiseInst.then()、promiseInst.catch()、Promise等常规用法等等。即使是

与主线程之间的通信。这可能导致消息处理延迟，潜在地减慢应用程序的速度。为了最小化这种开销，应该只在线程之间发送必要的数据，避免发送大量数据或频繁发送消息。调试工具有限与在主线程中调试代码相比，调试

设计和网站构建上的独特方法，将来我们有望看到更多的网站样式解决方案的出现。除了新的样式解决方案会不断发布之外，未来以下这些方面也值得我们期待：现有解决方案的持续更新。CSS-in-JS

作者：耀耀切克闹灬https://juejin.cn/post/7309687967063818292前言因新部门需求有一个后台管理需要一个右上角的实时的消息提醒功能，第一时间想到的就是使用WebSocket建立实时通信了，之前没整过，于是只能学习了。和原部门相比现在太忙了，快乐的日子一去不复返了。经典的加量不加薪啊！！！一.WebSocket

的库，赶快使用它来提升你的开发效率吧！(●'◡'●)更多请参考官方文档：https://valtio.pmnd.rs/docs/introduction/getting-started推荐阅读

滚动动画、手写动画、SPA页面过渡、打字动画、彩色动画、SVG动画……它们的功能实用而简单。那么，我们现在开始吧。1.Anime.js地址：https://animejs.com/Anime.js

作者：IAmorhttps://juejin.cn/post/7295343805020274698刚做完公司项目的新架构，决定使用TS来解决项目中的类型问题，但是在写接口类型的时候，发现了一个问题，就是接口类型的定义，如果是一个复杂的类型，那么就会变得非常的麻烦。每个接口的request,response不能说一点不相同，只能说完全不相同。甚至写类型的时间比写逻辑的时间都长。往往写到一半TS变成了AS。回过头来又对自己写AS的行为感到羞愧。后来聪明的我想，Java他还能不写VO类吗？他写了我能不能直接用？然后就有了这篇文章。前言如何能获取到Java的VO类呢？作为前端开发，我们能获取到的数据只有接口文档，那么我们能不能通过接口文档来生成VO类呢？答案是肯定的。获取到接口文档后，一开始甚至想自己写套转换工具。写着写着发现，这个工具的难度比写接口类型还大。于是放弃了。然后，swagger-typescript-api

作者：Shymean链接：https://www.shymean.com/article/%E5%8F%8D%E6%80%9D%E6%88%91%E5%86%99%E8%BF%87%E7%9A%84%E7%83%82%E4%BB%A3%E7%A0%81这篇博客的草稿是17年10月15号创建的了，每次写了些东西打算发布的时候，总觉得还差了什么。现在写了四五年代码了，经手了很多项目，有简单的活动页面，也有很复杂的业务逻辑，是时候反思一下我写过的烂代码了。下面是正文。感觉自己已经写了不少代码了，但每次回头看前一两个月的代码，却总觉得烂的不行。起初我以为是我没有掌握高效率编程的姿势，比如单元测试、断点调试等技术。最近看了一些书，静下来想了想：要避免写烂代码这个问题，不在于你掌握了多少编程技术，不在于你了解多少语言特性，一切都应该从“你怎么看待写代码这项工作”开始。参考：编程的智慧-王垠[1]state-of-the-art-shitcode[2]，垃圾代码书写准则关于烂代码的那些事[3]，写的非常好bug是怎样产生的[4]理想的应用框架[5]，很有意思1.

单点登录实现。3、相同域名，不同子域名下的单点登录：在浏览器端，根据同源策略，不同子域名的cookie不能共享。所以设置SSO的域名为根域名。SSO登录验证后，子域名可以访问根域名的

说回我们之前说的为公司员工创建名片需求，现在追加需求，要给不同工龄的员工，创建不同的类型名片样式//由于的工厂函数还有其他各种方法，不好直接改动原工厂函数，这时候我们可以使用装饰器模式实现class

环境变量在前端代码编写中发挥的作用后端写的接口，在开发环境、生产环境的url可能是不同的，作为前端，我们调用接口时，要判断当前是开发环境还是生产环境来选择调用不同的接口。像下面这样：import

任务执行完成之后，利用宏任务或微任务（具体取决于框架和浏览器实现）的机制进行执行，以确保代码逻辑执行完成后再去操作

作者：范天缘https://juejin.cn/post/7293463921729372201在网上找了很久都没有找到使用Three.js开发3d的免费文章或者免费视频,自己花了一点时间做了一个纯前端的项目demo。

2将不再接收新功能、更新或修复，但它仍然可在所有现有的分发渠道上使用（CDN、包管理器、Github等）。换句话说，你的应用程序会正常工作，但你会从包管理器那里收到弃用警告，提醒你Vue

作者：JiKun地址：https://juejin.cn/post/7275608678828916755本文适合对命令行工具感兴趣的小伙伴阅读一、前言什么是

来源：程序员Sunday最近有同学在面试的时候被问到了这个问题。所以我们利用这篇文章对这个问题进行下解答。背景setTimeout

作者：codinglinhttps://juejin.cn/post/7275220813619298367前言如何判断一个对象为空是我们在开发中经常会遇到的问题，今天我们来聊聊几种经常使用的方法，以及在不同的场景下我们如何去使用。1.

转自：程序员Sunday在我们去面试时，经常会遇到各种各样的奇葩问题，很多时候简直可以称之为是【奇葩分享会】。那么，咱们今天，就来看一个比较有意思的面试题【post为什么会发送两次请求？】正文一、同源策略在浏览器中，内容是很开放的，任何资源都可以接入其中，如

点击标题可跳转1、Firefox或将被淘汰2、面试官：生产环境构建时为什么要提取css文件？3、嘿，vue中keep-alive有个「大坑」你可能还不知道

}}样式先经过postcss-loader处理，然后在经过css-loader处理，最后在通过style-loader处理，以style标签的形式插入到html中生产环境module.exports

方面的任何举措都会影响企业。企业会将这一变化视为降低开发成本和缩短交付时间的机会，因为它提供了一个借口，可以从开发工作流程中移除一些测试（在极少数情况下还包括特定代码）。下图清晰展示了浏览器三巨头从

作者：wuwhshttps://juejin.cn/post/7170878262061563941背景背景是这样的，我们使用vue2开发一个在线客服使用的IM应用，基本布局是左边是访客列表，右边是访客对话，为了让对话加载更友好，我们将对话的路由使用缓存起来。但是如果将所有对话都缓存，未必会造成缓存过多卡顿的问题。自然，就使用上了提供的max属性，设置一个缓存对话内容组件上限，按照LRU算法，会销毁最旧访问的组件，保留最近使用的组件。本以为美好如期而至，直到上线后翻大车了，真实对话量大了，内存飙升卡顿。后来具体分析内存增长点，通过vue的devtool查看组件树，发现对话内容组件一直是递增，并非维持在max设置的数量上限！各位看官稍安勿躁，下面就具体分析造成这个「大坑」的原理，以及解决它的方案。情景模拟为了方便模拟背景案例，这里就用vue2简单的写一个demo。对话列表组件

它可以用来跳过屏幕外的内容渲染，对于这种有大量离屏内容的长列表，可以大大减少页面渲染时间。首先是没有添加content-visibility:

作者：盏灯https://juejin.cn/post/7275576084128350248看B站这个动画banner好几个版本了，不知道是一个月更新一次新版动画，还是多少天更新一次（没有天天去看，但估算是一月更新一版UI，以后注意观察）。刚看到的时候很感兴趣，不像视频素材或者gif素材，就放一个视频上去，或者放一个动态画上去，这个是根据鼠标动而一个小范围地有规律有弧度地动，很少看过。只是看过一些比如视觉差的类似这样的根据鼠标动而动的动画，举例说明：1、先前的github404动画图片层第轴动特效页面（最近改版了，没有动画效果了，以前我写有一篇文章就是关于github星球大战为主题的404错误页面，对鼠标哦🖱活动作出回应的相关代码，3d元素点睛）；github

作者：爱bug的小青年https://juejin.cn/post/7230026709482766373前言在最近的一年，我的工作重心逐步从一线开发人员开始往技术管理者的方向发展，在这一年的时间里，我深深的感受到执行者与管理者的不同之处，在这个过程中，需要多方面的转变才能适应这个角色。下面我将以我的个人经验和理解来总结前端组长应该如何管理团队，希望能给那些刚从开发人员往管理方向发展的小伙伴们一点参考和帮助。我认为要管理好前端团队：本质上：让团队少走弯路，并引领团队走在正确的道路上。理念上：让团队高效工作、快乐工作。实施上：要想尽办法给团队、给成员赋能。主要从下面几个维度分析：一、个人角度角色转变，开发人员

作者：程序员晚天https://juejin.cn/post/7109083708463775752背景性能优化、减少页面加载时间、提升用户体验，是前端领域的一个永恒话题。在前后端分离、异步渲染在页面中被普遍应用的背景下，大量页面在用户访问时不可避免的会出现一段短时间白屏。目前的解决方案一般为以下几种：服务端同步渲染增加页面

背景stackblitz频繁出现在React和webpack官方文档推荐之前我写过两篇文章介绍什么是stackblitz,其实本质上是属于webContainer技术,如果你没有看过之前的文章，建议你先去看看，再接着看下面的内容会更好最近的更新在关注stackblitz推特时候发现有一个小更新，叫做：vite-plugin-terminalgithub地址：https://github.com/patak-dev/vite-plugin-terminalvite的一个终端插件，使之可以运行在浏览器中。体验地址是：https://stackblitz.com/edit/vite-terminal-plugin?file=main.js赞助商里面也是包括了:尤大目前官方声明遇到的限制，一时半会还不好解决。主要有以下几个：与许多新技术一样，可能存在固有的技术限制。随着时间的推移，这些限制会随着浏览器变得更强大而得到解决和消除，但有些东西可能永远不会得到支持。Node.js

作者：小孔不菜https://juejin.cn/post/7123826435357147166实际开发工作的时候，我们都是在自己的分支开发，然后将自己的分合并到主分支，那合并分支用2种操作，这2种操作有什么区别呢？git上新建一个项目，默认是有master分支的，将项目克隆到本地，我们的准备工作就完成了同学A：执行git

获取摄像头接下来就需要用到上面提到的第二个函数，navigator.getUserMedia。这个函数接收一个对象作为参数，这个对象可以预设一些值，来作为我们请求摄像头的一些参数。这里我们的重点是

作者：慢功夫https://juejin.cn/post/7253744712409088057这篇文章主要讲如何根据注释，通过babel插件自动地，给相应函数插入埋点代码，在实现埋点逻辑和业务逻辑分离的基础上，配置更加灵活这篇文章想要达到的效果：源代码：//##箭头函数//_trackerconst

作者：Mark大熊https://juejin.cn/post/7280747572707999799前言之前整理了最近做的产品里比较典型的代码规范问题，里面有一个关于可选链运算符(?.)的规范，当时只是提了一下，今天详细说下想法，欢迎大佬参与讨论。可选链运算符(?.)，大家都很熟悉了，直接看个例子：const

这样写表示最低支持到1.83.0版本！改一下重新reload一下宿主插件，再试试命令就可以弹出啦！到此我们的插件侧项目就搭建好了，下面我们简单建一个vue项目，嵌入到侧边栏中三：新建一个Vue3

组件中使用时的异常。我们无法变异数组，之后尝试将其设置为新状态，因为数组本身是同一个对象且不会触发新的渲染。相反，我们需要先复制该数组，然后改变副本再将其设置为新状态。因此，React

下面就来看下笔者目前遇到的屎山代码的目录结构优化前目录结构viewsA.vueB.vueC.vueD.vue...mixinsbtnCodeMap.jsbtnMixins.js案例介绍下面

转自：网络前端开发工程师分了好多级别，所谓级别的差异，无非就是专业技能、思想素养、经验技巧这几个方面的差异，修炼成大神的路上，这三门功夫缺一不可。「基础能力决定了你的下限，思想素养决定了你的上限，而经验技巧则影响着你整个程序猿生涯的体验。」具体来说：专业技能专业技能就是你对主攻技术栈的掌握情况，如前端的一系列技术，JavaScript、HTML、CSS、Node、Vue等等，掌握这些基本技术，能够确保你可以应对一些日常开发工作。公司交给你一个任务，不考虑效率、质量、维护、协作等，你现在是可以把代码搞出来上线运行的，在一些要求不是很高只关注产品表现的公司，你是完全可以胜任的，东西做出来就行，没人关注你是咋做出来的。这几天刚在掘金看到了一个帖子，一个

作者：悄悄哥https://juejin.cn/post/7052570403029385253☀️前言今天给大家分享一下，小厂一线前端平时写的代码😸项目背景:react

作者：竹子爱熊猫来源：juejin.cn/post/7112826654291918855引言早期的业务都是基于单体节点部署，由于前期访问流量不大，因此单体结构也可满足需求，但随着业务增长，流量也越来越大，那么最终单台服务器受到的访问压力也会逐步增高。时间一长，单台服务器性能无法跟上业务增长，就会造成线上频繁宕机的现象发生，最终导致系统瘫痪无法继续处理用户的请求。❝从上面的描述中，主要存在两个问题：①单体结构的部署方式无法承载日益增长的业务流量。②当后端节点宕机后，整个系统会陷入瘫痪，导致整个项目不可用。❞因此在这种背景下，引入负载均衡技术可带来的收益：「系统的高可用：」

经典操作场景，专治不会合代码2、从0到1实现一个前端监控系统（附源码）3、Next.js支持在前端代码中写SQL，开倒车还是遥遥领先？

作者：小富https://blog.csdn.net/xinzhifu1/article/details/123271097git对于大家应该都不太陌生，熟练使用git已经成为程序员的一项基本技能，尽管在工作中有诸如