写在前面 模块化开发是我们日常工作潜移默化中用到的基本技能，发展至今非常地简洁方便，但开发者们（指我自己）却很少能清晰透彻地说出它的发展背景，发展过程以及各个规范之间的区别。故笔者决定一探乾坤，深入浅出学习一下什么是前端模块化。通过本文，笔者希望各位能够收获到： 前端模块化发展的大致历史背景🌟 各个规范之间的基本特性和区别🌟🌟 着重深入ESM和CommonJs的异同、优缺点🌟🌟🌟 深耕CommonJS和ESM的特性🌟🌟🌟🌟 本文的重点会以大家熟知的CommonJS和ESM入手，深入浅出，结合示例Demo和一些小故事，希望给大家能够带到不一样的体验。 一、前端模块化背景 ...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：景明 我们以一段C代码为例，来看一下代码被编译成二进制可执行程序之后，是如何被CPU执行的。 在这段代码中，只是做了非常简单的加法操作，将x和y两个数字相加得到z，并返回结果z。 intmain(){ intx=1; inty=2; intz=x+y; returnz; } 我们知道，CPU并不能直接执行这段C代码，而是需要对其进行编译，将其转换为二进制的机器码，然后CPU才能按照顺序执行编译后的机器码。 先通过GCC编译器将这段C代码编译成二进制...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 本文作者：霜序(掘金) 前言 在我们的业务应用中越来越多的应用到编码内容，例如在API中，给到后端的SQL都是通过Base64加密的数据等等。 能够发现我们的代码中，使用的window对象上的btoa方法实现的Base64编码，那btoa具体是如何实现的呢？将在下面的内容中为大家讲解。 那我们就先从一些基础知识开始深入了解吧 什么是编码 编码，是信息从一种形式转变为另一种形式的过程，简要来说就是语言的翻译。 将机器语言(二进制)转变为自然语言。 五花八门的编...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 本文作者：木杪 有限状态机（FSM）是计算机科学中的一种数学模型，可用于表示和控制系统的行为。它由一组状态以及定义在这些状态上的转换函数组成。FSM被广泛用于计算机程序中的状态机制。 有限状态机（FSM）应用场景 在各种自动化系统的应用：例如交通信号灯、地铁站的旋转闸门、银行自动取款机等。通过对状态和转换函数的定义，可以实现对系统行为的精确控制。交通信号灯状态流转图地铁站的旋转闸门状态流转图银行自动取款机状态流转图 在编程领域的应用：例如在编写编译器和解释...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 本文作者：奇铭(掘金) 需求背景 前段时间，离线计算产品接到改造数据同步表单的需求。一方面，数据同步模块的代码可读性和可维护性比较差，相对应的，在数据同步模块开发新功能和定位问题的效率很低；另一方面，整体规划上，希望在对接新的数据源时，可以不再关心表单渲染相关问题，从数据源中心新建数据源一直到数据源在数据同步模块的应用全链路的表单都可以通过配置化的方式解决； 数据同步表单 数据同步模块整体上分为四个部分，数据来源表单，同步目标表单，字段映射组件和通道控制...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 本文作者：琉易liuxianyu.cn 页面性能对于用户体验、用户留存有着重要影响，当页面加载时间过长时，往往会伴随着一部分用户的流失，也会带来一些用户差评。性能的优劣往往是同类产品中胜出的影响因素，也是一个网站口碑的重要评判标准。 一、名称解释 前端监控一般分为合成监控和真实用户监控。 1.1、合成监控 合成监控就是模拟用户的使用场景，访问一个页面，通过一些工具和规则去检测页面，提取一些性能指标，生成一份检测报告，注重检测。 合成监控的优缺点： 优点...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 本文作者：霁明 一、背景 1、业务背景 业务中会有一些需要实现拖拽的场景，尤其是偏视觉方向以及移动端较多。拖拽在一定程度上能让交互更加便捷，能大大提升用户体验。以业务中心子产品配置功能为例，产品模块通过拖拽来调整顺序，的确会更加方便一些。 2、ReactDnD介绍 引用官网介绍：ReactDnD是一组React实用程序，可帮助您构建复杂的拖放界面，同时保持组件分离。它非常适合Trello和Storify等应用程序，在应用程序的不同部分之间拖动可以传输数据，...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 本文作者：琉易liuxianyu.cn 前段时间分享了《搭建自动化Web页面性能检测系统——设计篇》，我们提到了性能检测的一些名词和自研性能检测系统的原因，也简单介绍了一下系统的设计。在这里我们书接上篇记录下是如何实现一个性能检测系统的。 开始前欢迎大家Star：https://github.com/DTStack/yice-performance 先看下性能检测系统——易测的实现效果： 一、技术选型 服务端框架选择的是Nestjs，Web页面选择的是Vi...

什么是巡检报告 巡检报告是指对某一个系统或设备进行全面检查，并把检查结果及建议整理成报告的过程。 巡检报告通常用于评估系统或设备的运行状况与性能，以发现问题、优化系统、提高效率、降低故障率等方面提供参考。 要实现什么功能 自定义布局 现报告中的面板可进行拖拽改变布局。 在拖拽的过程中限制拖拽区域，只允许在同一父级内进行拖拽，不允许跨目录移动，不允许改变目录的级别，比如把一级目录移动到另一个一级目录内，变成二级目录 目录可收缩展开 目录支持收缩展开，收缩时隐藏所以子面板，展开时显示所以子面板 移动目录时，子面板跟随移动 改变目录后，同步更新右侧的目录面板 生成目录编号 右侧目录树 ...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 本文作者：修能 以下内容充满个人观点。◡ヽ(`Д´)ﾉ┻━┻ 前言 基于分布表单的需求，在中后台管理中是一个非常常见的需求，通常具有如下布局： 其中，自定义需求度从高到低为，正文>按钮区>步骤条。 虽然布局类似，但是实现的方式却是天差地别，这里就探究一下究竟怎么样实现可以兼具代码的可维护性和可读性呢？ 指出问题 Container 我们这里，以「指标-数据模型」的代码为例。 首先先来看看数据模型这里的代码是如何实现的？ exportdefaul...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：空山 前言 由于笔者最近在开发中遇到了一个重复渲染导致子组件状态值丢失的问题，因此关于性能优化做了以下的分析，欢迎大家的交流 我们在日常的项目开发中往往会把页面拆分成一个个的组件，通过拼装的方式来实现整体的页面效果，所以与其说去优化React，不如聚焦在现有的组件中，思考🤔如何去设计一个组件才能提高他的性能，从而提高整个项目的性能以及交互的流畅性。 回顾 在我们初学React的时候相信大家或多或少运行过这样的demo： importReact,...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：景明 升级背景 目前公司产品有关react的工具版本普遍较低，其中reactrouter版本为3.x(是的，没有看错，3.x的版本)。而最新的reactrouter已经到了6.x版本。 为了能够跟上路由的脚步，也为了使用router相关的hooks函数，一次必不可少的升级由此到来！ 版本确定 react-touter6.x版本，只对react和react-dom版本有要求，我们的项目满足条件。 "peerDependencies":{ "react"...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：霜序 前言 在前一篇文章中，我们详细的说了react-router@3.x升级到@6.x需要注意的问题以及变更的使用方式。 react-router版本更新非常快，但是它的底层实现原理确是万变不离其中，在本文中会从前端路由出发到react-router原理总结与分享。 前端路由 在Web前端单页面应用SPA(SinglePageApplication)中，路由是描述URL和UI之间的映射关系，这种映射是单向的，即URL的改变会引起UI更新，无需刷新页...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：佳岚 前言 Cookie实际上是一小段的文本信息，它产生的原因是由于HTTP协议是无状态的，所以需要通过Cookie来维持客户端与服务端之间的“会话状态”。如网络购物，能够在不同页面记录购物车信息，或者在网站不同页面共享登录状态。 Cookie的基本结构包括：名字、值、各种属性 属性 一块Cookie可能有Domain、Path、Expires、Max-Age、Secure、HttpOnly等多种属性，如 HTTP/1.1200OK Set-Cook...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：琉易liuxianyu.cn   在日常工作中，较少的能遇到一次性往页面中插入大量数据的场景，数栈的离线开发（以下简称离线）产品中，就有类似的场景。本文将分享一个实际场景中的前端开发思路，实现高效的数据渲染，提升页面性能和用户体验。 一、场景介绍   在离线的数据开发模块，用户可以在sql编辑器中编写sql，再通过整段运行/分段运行来执行sql。在点击整段运行后，运行成功日志打印后到展示结果的过程中，有一段时间页面很卡顿，主要表现为编辑器编写卡顿。 ...

我们是袋鼠云数栈UED团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：空山 什么是沙箱 沙箱即SandBox，它是一种安全机制，用于严格控制访问资源。通过在程序中创建一个独立的运行环境，把一些来源不可信、具有破坏力或者又是无法判定的恶意程序使其在该环境下运行，隔离了对外部程序的影响，这样即使发生了错误或者安全问题都不会影响到外面。我们根据实现的方案不同，SandBox可以分为两种模式： 单实例模式：全局只存在一个实例，直接代理原生的window对象，记录每个沙箱内window对象上的增删改等操作，激活某个沙箱时恢复上...