- 博客(547)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 算法题目汇总
整数反转function revese (x) { let rev = 0 while (x !== 0) { console.log(x) if (rev < Number.MIN_VALUE / 10 || rev > Number.MAX_VALUE / 10) { return 0 } let digit = x % 10 x = Math.floor(x / 10) rev = rev * 10 + digit
2021-08-08 13:33:57
330
原创 Top N（前N大或前N小）的算法问题
我们将数组中的元素依次插入到一个大小为N的最小堆中，如果堆的大小超过N，就移除堆顶元素（最小的元素）。最终，堆中存放的就是前N个最大的元素。：这个函数用于将数组分成两部分，以选择的枢轴为基准，将大于等于枢轴的元素放在左边，小于枢轴的元素放在右边。最终，堆中存放的就是前N个最大的元素。：实现了一个最小堆，包括插入元素、移除最小元素、获取堆的大小、查看堆顶元素等操作。使用优先队列（最小堆）算法找到前N个最大的元素，可以使用JavaScript中的。通过这个代码，你可以高效地找到数组中前N个最大的元素。
2024-07-15 19:53:34
423
原创 200 行 JavaScript 代码实现虚拟 DOM
在这篇文章中，我将用 200 多行 JavaScript 介绍虚拟 DOM 的完整实现。结果是一个功能齐全且性能充足的虚拟 DOM 库 ( demos )。它在 NPM 上以smvc包的形式提供。主要目标是说明 React 等工具背后的基本技术。React、Vue 和 Elm 语言都简化了交互式网页的创建，允许您描述页面的外观，而不必担心添加/删除元素。它们通过虚拟 DOM 来实现这一点。
2024-06-21 10:26:57
925
原创 从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏
v-model 可以在组件上使用以实现双向绑定。defineModel() 返回的值是一个 ref。
2024-06-13 10:31:04
298
原创 Radash 轻量级的函数工具集
Radash 是一个现代的 JavaScript 实用程序库，旨在提供高效、轻量级的函数工具集，类似于 Lodash，但更加现代化和模块化。Radash 通过提供一系列常用的工具函数，帮助开发者更轻松地处理数组、对象、函数等操作。
2024-06-09 11:43:08
337
原创 Promise.any 使用方法
是处理多个 Promise 并获取第一个成功结果的有用工具，特别是在你只关心哪个 Promise 最先成功的情况下。它与的不同之处在于，返回第一个解决或被拒绝的 Promise，而只关心第一个成功解决的 Promise。
2024-06-09 11:30:11
291
原创 error An unexpected error occurred: “expected workspace package to exist for \“webpack\““
【代码】error An unexpected error occurred: "expected workspace package to exist for \"webpack\""
2024-06-05 10:19:34
155
原创 TS枚举类型转换为联合类型
我有以下枚举(可能是const，也可以不是)，我想导出一个联合类型，类似于我硬编码为MyNewOne的类型。如何处理最新的TS？
2024-06-05 10:17:49
312
原创 给页面元素添加水印
MutationObserver 可以监控 DOM 树的变化，包括节点的添加、删除和属性的变化。当检测到水印元素被修改或删除时，可以立即恢复或重新添加水印。
2024-05-26 19:51:34
380
原创 object-fit CSS 属性
总的来说，object-fit 用于控制替换元素中的内容（如图片、视频）的尺寸和适应方式，而 background-size 用于控制元素的背景图片的大小。根据具体的需求和使用场景，选择合适的属性来控制元素中的图片或背景图片的显示效果。被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。被替换的内容正好填充元素的内容框。整个对象将完全填充此框。被替换的内容在保持其宽高比的同时填充元素的整个内容框。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
2024-03-17 17:18:09
618
原创 实现一个横向的picker
Picker 选择器显示一个或多个选项集合的可滚动列表，相比于原生 picker，实现了 iOS 与 Android 端体验的一致性。要实现横向 picker，其实跟纵向 picker差不多，都支持滚动时停留在指定位置，并且支持滚动到边界支持反弹效果。
2024-03-17 12:09:24
440
原创 实现一个picker组件
Picker是指提供多个选项集合供用户选择其中一项的控件。Picker展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用Picker。
2024-03-17 10:39:58
875
原创 给你的H5页面加上惯性滚动吧！
在移动端，如果你使用过 overflow: scroll 生成一个滚动容器，会发现它的滚动是比较卡顿，呆滞的。为什么会出现这种情况呢？因为我们早已习惯了目前的主流操作系统和浏览器视窗的滚动体验，比如滚动到边缘会有回弹，手指停止滑动以后还会按惯性继续滚动一会，手指快速滑动时页面也会快速滚动。而这种原生滚动容器却没有，就会让人感到卡顿。首先，让我们来看一下它是怎样让滚动更流畅的吧。
2024-03-17 10:23:28
433
原创 前端性能指标计算FP/FCP/CLS/FID/LCP
在性能统计指标中，从用户开始访问 Web 页面的时间点到 FCP 的时间点这段时间可以被视为 无内容时间，也就是说在用户访问 Web 网页的过程中，FCP 时间点之前，用户看到的都是没有任何实际内容的屏幕，用户在这个阶段获取不到任何有用的信息。在性能统计指标中，从用户开始访问 Web 页面的时间点到 FP 的时间点这段时间可以被视为 白屏时间，也就是说在用户访问 Web 网页的过程中，FP 时间点之前，用户看到的都是没有任何内容的白色屏幕，用户在这个阶段感知不到任何有效的工作在进行。
2024-03-03 17:07:58
726
转载 PerformanceObserver来统计LCP
Largest Contentful Paint (LCP) 是一种稳定的 Core Web Vitals 指标，用于衡量感知的加载速度。 它用于标记网页加载时间轴中可能加载了网页主要内容的时间点。快速 LCP 有助于让用户确信相应网页有用。
2024-03-03 10:58:26
113
原创 PerformanceObserver来统计FP和FCP
要通过PerformanceObserver来统计首次绘制（First Paint，FP）和首次内容绘制（First Contentful Paint，FCP），可以使用以下步骤
2024-03-03 10:30:59
585
原创 CSS 显示隐藏动画（动画失效问题）
因此，你不能直接在 display: none; 和 display: block; 之间应用动画效果，因为这两个属性之间的切换是瞬间完成的，没有中间状态可以应用动画。
2024-03-02 11:18:58
1234
原创 CSS 局限-contain
CSS 局限CSS 局限规范的目标在于通过允许浏览器从页面的其余部分中隔离出页面子树而改善性能。若浏览器知道页面的某一部分为独立的，则可优化渲染并改善性能。此外，此规范允许开发者标示元素究竟是否应当渲染其内容，以及在屏外时是否应当渲染其内容。由此允许用户代理在恰当的时候在元素上应用局限，并有望将布局和渲染推迟至需要时再进行。此规范定义了 CSS 属性 contain 和 content-visibility。
2023-12-04 11:19:55
529
原创 把类当做接口使用
Button和TextBox类是SelectableControl的子类（因为它们都继承自Control并有select方法），但Image和Location类并不是这样的。因为只有 Control的子类才能够拥有一个声明于Control的私有成员state，这对私有成员的兼容性是必需的。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。
2023-09-24 10:05:13
540
原创 聊聊微前端沙箱
qiankun 是一个基于 single-spa 的微前端解决方案，它提供了沙箱隔离机制，以防止子应用之间的全局污染。qiankun 的沙箱实现主要有两种方式：Proxy 沙箱和快照沙箱。Proxy 沙箱：这是 qiankun 的默认沙箱实现方式。它使用 JavaScript 的 Proxy 对象创建一个全局对象的代理，通过这个代理隔离子应用对全局对象的影响。当子应用试图修改全局对象时，这个代理会拦截这个操作，将修改应用到代理对象上，而不是全局对象上。
2023-09-06 21:39:15
644
原创 前端网络相关的面试题
但需要注意的是，这种方式只能实现单个源的跨域，如果需要实现多个源的跨域，服务器需要动态地设置Access-Control-Allow-Origin字段。然后，服务器会发送一个HTTP响应，响应的头部包含了处理请求的结果，响应的体部则包含了请求的结果。需要注意的是，HTTP/1.1版本开始默认开启了持久连接（Persistent Connection），也就是说在一个TCP连接上可以发送多个HTTP请求，不需要每次请求都重新建立TCP连接。默认情况下，跨域请求不会发送Cookie，除非设置了这个属性。
2023-09-01 20:02:40
345
原创 单点登陆的过程
单点登录（Single Sign-On，简称SSO）是一种用户身份验证的方法，允许用户使用一组用户名和密码就可以访问该组织的所有相关系统或应用程序。这意味着用户只需要登录一次，就可以访问所有的系统，而不需要为每个系统或应用程序单独登录。单点登录的主要优点是提高了用户的便利性和生产力，因为用户不需要记住多个用户名和密码，也不需要反复登录。此外，单点登录也可以提高安全性，因为用户的凭据只在一次登录过程中被验证，减少了凭据被盗取的机会。
2023-08-28 19:47:51
97
原创 要检查一个字符串是否可以由它的一个子串重复多次构成
例如，对于字符串 “abcabcabc”，拼接后的字符串是 “abcabcabcabcabcabc”，去掉第一个和最后一个字符后的子串是 “bcabcabcabcabcab”，这个子串包含了原始字符串 “abcabcabc”，所以原始字符串 “abcabcabc” 可以由它的一个子串 “abc” 重复多次构成。这个函数首先将字符串 s 与自身拼接，然后从第二个字符开始到倒数第二个字符结束的子串中查找原始字符串 s。如果找到了，那么说明原始字符串 s 可以由它的一个子串重复多次构成。
2023-08-25 20:13:27
497
1
原创 eslint 配置和用法
在一个使用Webpack的项目中配置ESLint，你可以按照以下步骤操作：首先，你需要在你的项目中安装ESLint和对应的Webpack loader。你可以使用npm或者yarn来安装。在你的项目根目录下打开终端，然后运行以下命令：在你的项目根目录下创建一个.eslintrc文件（或.eslintrc.js，.eslintrc.json，.eslintrc.yaml等）。这个文件将包含你的ESLint配置。这个配置文件启用了推荐的ESLint规则，并设置了解析选项以支持ES2021和模块。
2023-08-21 20:11:31
1516
原创 JS实现阿拉伯数字转中文
这个函数首先定义了两个数组，一个用于存储 0 到 9 的中文字符，另一个用于存储各个位的单位（如十、百、千等）。然后，它使用一个循环，从个位开始处理数字，每次处理一位。如果当前位是 0，它会检查前一位是否也是 0，如果不是，则在结果字符串中添加一个 “零”。如果当前位不是 0，它会将当前位的数字和单位添加到结果字符串中。最后，它将数字除以 10，然后继续处理下一位，直到所有的位都被处理完。注意：这个函数只能处理非负整数，并且不支持处理小数。如果你需要处理负数或小数，你可能需要对这个函数进行一些修改。
2023-08-09 16:14:48
1099
1
原创 节流函数（执行最后一次）
这个函数接受两个参数，一个是要节流的函数，另一个是延迟时间（以毫秒为单位）。它返回一个新的函数，这个新的函数会检查自上次调用以来是否已经过了指定的延迟时间。如果是，则执行函数并更新最后调用的时间；如果不是，则忽略这次调用。这个版本的节流函数在每次调用时都会记录参数，并且如果在延迟时间内再次被调用，它会取消前一个调用并安排一个新的调用。这样，最后一次调用总是会被执行，即使它发生在延迟时间内。节流函数的主要目的是限制一个函数在一定时间内只能执行一次。但是这个版本的节流函数并不能保证执行最后一次调用。
2023-08-04 14:19:51
635
原创 数组全排列
这个函数的工作原理是：首先检查输入数组的长度，如果长度为1，那么只有一种排列方式，直接返回该数组。如果长度大于1，那么遍历数组，对于每个元素，将其从数组中移除，然后递归地计算剩余元素的全排列，最后将当前元素与剩余元素的全排列组合，得到所有可能的排列。全排列是指从给定集合中取出所有元素进行排列，得到所有可能的排列方式。
2023-08-04 08:16:10
185
原创 dva-core 的基本用法
虽然 dva-core 提供了一种简化的方式来管理你的状态，但是它仍然是基于 Redux 的，所以你可以使用 react-redux 提供的 Provider 和 connect 等 API 来连接你的 React 组件和 Redux store。在这个例子中，我们首先创建了一个 dva-core 应用，并定义了一个 Model。总的来说，dva-core 和 dva 的主要区别在于 dva-core 不包含 react-router 和 fetch，所以它更轻量级，更适合于不需要路由和请求功能的场景。
2023-07-16 20:00:48
364
原创 快速上手dva
Dva 是一个基于 Redux、Redux-saga 和 React-router 的轻量级前端框架，由阿里巴巴团队开发。以下是 Dva 的一些优点，也是为什么许多开发者选择使用它的原因：简化 Redux 和 Redux-saga 的使用：Redux 是一个非常强大的状态管理库，但是它的使用有一定的复杂性。Dva 对 Redux 和 Redux-saga 进行了封装，使得开发者可以更简单地管理应用的状态和异步操作。
2023-07-16 19:52:30
427
原创 Redux Toolkit 是什么？
Redux Toolkit 包含：configureStore()：封装了createStore，简化配置项，提供一些现成的默认配置项。它可以自动组合 slice 的 reducer，可以添加任何 Redux 中间件，默认情况下包含 redux-thunk，并开启了 Redux DevTools 扩展。createReducer() 帮你将 action type 映射到 reducer 函数，而不是编写 switch…case 语句。
2023-07-16 12:58:06
309
原创 dva 用法快速上手
Dva 是一个基于 redux 和 redux-saga 的轻量级前端框架，它简化了 redux 和 redux-saga 的使用，并且内置了 react-router 和 fetch，所以也可以理解为一个集成了 redux、redux-saga、react-router 和 fetch 的框架。总的来说，dva-core 和 dva 的主要区别在于 dva-core 不包含 react-router 和 fetch，所以它更轻量级，更适合于不需要路由和请求功能的场景。创建一个 dva-core 应用。
2023-07-16 11:27:55
781
原创 react-native项目手机预览
拿起你的iPhone手机，安装 expo APP，https://expo.dev/client 或者到 APP store 搜索下载。下载完成之后你必须注册登录 https://expo.dev/ ，然后打开照相机，扫描二维码就可以了。使用 expo 初始化 react-native 项目，https://reactnative.cn/docs/environment-setup。执行 start 命令运行项目。
2023-07-09 17:06:10
325
原创 dayjs中UTC和本地时间互相转换
默认情况下，Day.js 会把时间解析成本地时间。如果想使用 UTC 时间，您可以调用 dayjs.utc() 而不是 dayjs()。在 UTC 模式下，所有显示方法将会显示 UTC 时间而非本地时间。这依赖 UTC 插件，才能正常运行。
2023-07-09 10:51:13
3394
原创 dayjs 用法快速上手
Day.js 是一个轻量级的 JavaScript 日期处理库，类似于 Moment.js，但体积更小。Day.js 提供了丰富的 API 来解析、格式化和操作日期。以下是 Day.js 的一些基本使用方法：首先，确保你已经安装了 Day.js。要使用 Day.js 将时间设置为一天的开始或结束，你可以使用 startOf() 和 endOf() 方法。
2023-07-08 22:53:04
1783
转载 qiankun 微前端方案
介绍qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用，在易用性及完备性上，绝对是值得信赖的。
2023-06-14 09:43:58
156
原创 什么是 CSS-in-JS?
通过 styled-components，你可以使用 ES6 的标签模板字符串语法为需要 styled 的 Component 定义一系列 CSS 属性，当该组件的 JS 代码被解析执行的时候，styled-components 会动态生成一个 CSS 选择器，并把对应的 CSS 样式通过 style 标签的形式插入到 head 标签里面。CSS-in-JS 是一种将 CSS 样式与 JavaScript 代码结合的方法，它允许开发人员在 JavaScript 组件中编写和管理 CSS 样式。
2023-05-28 10:10:50
949
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人