4 天前 / 携程技术
作者简介 工业聚，携程高级前端开发专家，react-lite, react-imvc, farrow 等开源项目作者。 兰迪咚，携程高级前端开发专家，对开发框架及前端性能优化有浓厚兴趣。 一、前言过去两三年，携程度假前端团队一直在实践基于 GraphQL/Node.js 的 BFF (Backend for Frontend) 方案，在度假 BU 多端产品线中广泛落地。最终该方案不仅有效支撑前端团队面向多端开发 BFF 服务的需要，而且逐步承担更多功能，特别在性能优化等方面带来显著优势。
9 天前 / 冷星1024
关注公众号前端界，回复“加群” 加入我们一起学习，天天进步前言前几天空闲时间抓取了牛客最新的笔试题和面试题，想做一下数据统计，展望一下面试中 JavaScript 的平凡考点和火爆考点，给未来自己的学习指引一下方向。 不多说了，进入题海吧。 emo3.jpg 单选题 JS 基础 js 概念与类型检测以下不属于 typeof 运算符返回值的是？A."string" B."function" C."object" D."null" 执行以下代码，错误的输出结果是 A. 输入：typeof {"x":1}输出："object" B. 输入：typeof 1 输出："number" C. 输入：typeof [{x:1}]输出："array" D. 输入：typeof NaN 输出："n...
11 天前 / 冷星1024
给团队封装一个简单统一的日志管理工具 / 模块，来替换掉项目中野蛮生长的 console.log()吧！ 大厂技术高级前端Node 进阶 点击上方程序员成长指北，关注公众号 回复 1，加入高级 Node 交流群 一、问题背景 在项目中，我们会频繁用到 console.log() 来输出一些关键信息到控制台中，有助于开发调试，以及问题的排查，待项目上线后，这些调试日志又得及时清除。 同时在前端质量要求下，我们会做“前端埋点”，用于远程上报一些关键行为信息，用于在出问题时还原用户的操作路径，复现 BUG，从而解决问题，而各种各样的上报若是能在业务开发中抹平差异...
13 天前 / 冷星1024
前言 各位要懂得保护自己。今日前端早读课文章由腾讯 @camdyzeng 分享。 @camdyzeng：腾讯 CSIG 前端开发高级工程师。团队主要致力于前端相关技术的研究和在腾讯业务的应用，团队内部每周有内部分享会，有兴趣的读者可以加入我们或者参与一起讨论。邮箱：[email protected]。 正文从这开始~~ 关于 CSRF 你想知道的都在这里了。 CSRF（Cross-site request forgery）简称：跨站请求伪造，学习 CSRF 攻击原理和防护方法是我们团队新成员的必修课，通常我都是先让新同学自己研究自己讲，然后我再通过其中细节再给他们讲一遍，讲的次数多了...
15 天前 / 北鱼扶摇
点击蓝字“逻魔代码”，关注，置顶公众号 技术干货，及时送达！ CommonJS 关注公众号 逻魔代码 ，及时获取更多技术干货！ 作为一个脚本语言，js 设计之初仅仅是为了解决基础的表单验证、页面交互功能，所有的路由系统、存储系统，硬件交互接口基本上都交由其他语言 / 编程接口实现，没有命名空间的内置处理，更不存在模块化的概念。2005 年随着 ajax 被广泛的应用，前端开发（更准确说 js）进入了一个飞速发展的阶段，展现出了成为一门非常有潜力的语言；伴随着应用规模、业务复杂度、代码量的增长...
17 天前 / 冷星1024
前言一个合理的动画是良好用户体验中必不可少的一部分。我们平常是怎样写动画的？CSS 中的 animation 和 transition，还有 requestAnimationFrame？相信大家写动画的时候心里也是在万马奔腾。今天我们从一个另辟蹊径的角度来探索一个动画实现。 示例请看下面的示例： 这是一个可添加的数字的随机乱序列表。首先想一想，我们第一直觉可能会这样做：将这些数字的 DOM 节点用绝对定位来布局，数字变化后计算 top、left 的值，再配合 transition 实现该动画。
18 天前 / HueiFeng
毕业后就投身于前端行业，这期间做过业务，做过基建，大前端技术体系下的各个子方向基本都实践过。回过头来看，与刚进入前端行业时相比，对前端行业的认识更清晰了，但也发现困惑更多了，追求的东西好像变了，欠缺的东西变多了。 我认为的工作是什么样的？ 起初以为工作是生活的小部分，后来发现工作是生活的大部分，工作不顺影响生活，影响自己，我们应该更认真的去对待工作。 佛陀传中记录了一个故事叫《看顾水牛经》，我觉得它很好的表达了好的工作方式是什么样的。 “什么才是一个好的牧童应该知道和做到的。
19 天前 / 冷星1024
本文适合项目需要接入错误监控的小伙伴阅读 欢迎关注前端早茶，与广东靓仔携手共同进阶～ 作者：广东靓仔一、前言场景：我们的项目在本地测试时没有问题，but 在线上运行就遇到各种奇奇怪怪的问题。相信不少小伙伴应该都遇到过这样的情况，为了减少对用户的影响，引入一个线上监控系统是必不可少的。 方案：对于一些大型的团队，往往会自研一套监控系统。如果团队资源有限引入个第三方的异常监控系统也是一个不错的方案。 常用的有：博睿、神策、sentry 本文我们分享下 sentry。
27 天前 / 冷星1024
简述前端包管理工具机制和相关实践 npm 依赖管理机制区别于 Python 的包管理工具 pip 的全局安装，npm 会安装依赖包到当前项目目录，使不同项目的依赖更成体系，这样做的好处是减轻了包作者的 API 兼容性压力；但是缺陷是如果两个项目依赖了一个相同的库，一般这个库会在这两个项目中各安装一次，即相同的依赖包会被多次安装。 我们先通过一张流程图 ( 源自掘金)来了解下 npm install 的整体流程 可以看到执行 npm install 后依次会进行以下流程 检查 package-lock.json 通过和 package.json 对比确定是否远程获取包信息扁平化构建依赖树添加缓存下载包并解...
29 天前 / 冷星1024
来源：https://css-tricks.com/comparing-the-new-generation-of-build-tools/ 在过去的一年里，出现了一批新的开发者工具，它们正在紧跟过去几年主导前端开发的工具，包括webpack、Babel、Rollup、Parcel、create-react-app。 这些新的工具并不是为了完成完全相同的功能而设计的，每个工具都有不同的目标和功能。尽管存在差异，但这些工具有一个共同的目标：改善开发者体验。 概览 esbuildSnowpackVitewmrFeature comparisonWrapping up 具体来说，我想对每一个进行评估，概述它们的作用，为什么我们需要它们，以及它们的使用案例。
34 天前 / refined-x
前端周刊：2022-8 期 前端开发为什么视频网站的视频链接地址是 blob？很详细的讲解了如何实现视频流式传输，还能防盗链 实时 html5 的 mp3 播放。再次体验数据格式 arraybuffer。音频防盗链 前端工具箱 -css 动画缓动函数预览及生成 css 动画缓动函数预览及生成 前端工具箱 -CSS3 渐变背景代码生成工具 CSS3 渐变背景代码生成工具 leetcode 中文版 leetcode 中文版 基于 howler.js 写了个音频播放器组件"本组件采用 Web Components 组件开发，使用的时候引入一个 JS...
34 天前 / 冷星1024
跑步本身就是一件孤独的事，他人再分享再加油，要跑到终点也只能倚仗自己的体力和意志，就像生活本来的样子。 关注并将「趣谈前端」设为星标 每早 08:30 按时推送技术干货 / 优秀开源 / 技术思维 hi, 大家好， 我是徐小夕， 周末博学不打烊， 今天我们来分享点轻松且有用的知识。 作为一名前端工程师， 没有个自己的网站怎么行， 接下来我就来带大家介绍一下如何从零到一， 配置并部署自己的网站到服务器。
40 天前 / 桃源小盼聊技术
范围说明：一般指页面或模块 提交信息示例：12feat( 顶栏):增加用户头像 refactor( 底栏):函数 set 重命名为 setTitle 优秀的提交信息，能让我们查看历史提交时，能更容易和更快速的理解做了什么。如果每次提交都写 fix bug，相当于没写。 提交原子性代码提交的原子性，是指一个提交包含一个不可分割的特性、修复或者优化，同时这个提交要尽可能小。 1. 以单一职责原则提交改动建议：独立的功能点、模块、组件或修复 bug 等。 2. 每次提交保证可运行没有人希望拉取了你的代码后运行报错。
40 天前 / 冷星1024
大厂技术坚持周更精选好文 什么是虫洞状态管理模式？ 您可以逃脱的最小state共享量是多少？ 保持你的state。尽可能靠近使用它的地方。 如果有一个组件关心这个问题，使用它。如果有几个组件在意，就用props分享一下。如果很多组件都关心，把它放在context中。 Context就像一个虫洞。它使您的组件树弯曲，因此相距很远的部分可以接触。 利用自定义hooks使这变得容易。 一个例子构建一个点击计数器。虫洞状态管理模式最好通过示例来解释 CodeSandbox( 示例代码) https://codesandbox.io/s/wormhole-state-pattern-5-j4w5efile=/src/App.js 步骤 1 我们从use...