- 博客(538)
- 资源 (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
321
原创 object-fit CSS 属性
总的来说，object-fit 用于控制替换元素中的内容（如图片、视频）的尺寸和适应方式，而 background-size 用于控制元素的背景图片的大小。根据具体的需求和使用场景，选择合适的属性来控制元素中的图片或背景图片的显示效果。被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。被替换的内容正好填充元素的内容框。整个对象将完全填充此框。被替换的内容在保持其宽高比的同时填充元素的整个内容框。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
2024-03-17 17:18:09
558
原创 实现一个横向的picker
Picker 选择器显示一个或多个选项集合的可滚动列表，相比于原生 picker，实现了 iOS 与 Android 端体验的一致性。要实现横向 picker，其实跟纵向 picker差不多，都支持滚动时停留在指定位置，并且支持滚动到边界支持反弹效果。
2024-03-17 12:09:24
392
原创 实现一个picker组件
Picker是指提供多个选项集合供用户选择其中一项的控件。Picker展示区域有限，部分选项会被隐藏，最好是当用户对所有选项都比较熟悉、有预期的时候，才使用Picker。
2024-03-17 10:39:58
807
原创 给你的H5页面加上惯性滚动吧！
在移动端，如果你使用过 overflow: scroll 生成一个滚动容器，会发现它的滚动是比较卡顿，呆滞的。为什么会出现这种情况呢？因为我们早已习惯了目前的主流操作系统和浏览器视窗的滚动体验，比如滚动到边缘会有回弹，手指停止滑动以后还会按惯性继续滚动一会，手指快速滑动时页面也会快速滚动。而这种原生滚动容器却没有，就会让人感到卡顿。首先，让我们来看一下它是怎样让滚动更流畅的吧。
2024-03-17 10:23:28
366
原创 前端性能指标计算FP/FCP/CLS/FID/LCP
在性能统计指标中，从用户开始访问 Web 页面的时间点到 FCP 的时间点这段时间可以被视为 无内容时间，也就是说在用户访问 Web 网页的过程中，FCP 时间点之前，用户看到的都是没有任何实际内容的屏幕，用户在这个阶段获取不到任何有用的信息。在性能统计指标中，从用户开始访问 Web 页面的时间点到 FP 的时间点这段时间可以被视为 白屏时间，也就是说在用户访问 Web 网页的过程中，FP 时间点之前，用户看到的都是没有任何内容的白色屏幕，用户在这个阶段感知不到任何有效的工作在进行。
2024-03-03 17:07:58
475
转载 PerformanceObserver来统计LCP
Largest Contentful Paint (LCP) 是一种稳定的 Core Web Vitals 指标，用于衡量感知的加载速度。 它用于标记网页加载时间轴中可能加载了网页主要内容的时间点。快速 LCP 有助于让用户确信相应网页有用。
2024-03-03 10:58:26
36
原创 PerformanceObserver来统计FP和FCP
要通过PerformanceObserver来统计首次绘制（First Paint，FP）和首次内容绘制（First Contentful Paint，FCP），可以使用以下步骤
2024-03-03 10:30:59
487
原创 CSS 显示隐藏动画（动画失效问题）
因此，你不能直接在 display: none; 和 display: block; 之间应用动画效果，因为这两个属性之间的切换是瞬间完成的，没有中间状态可以应用动画。
2024-03-02 11:18:58
787
原创 CSS 局限-contain
CSS 局限CSS 局限规范的目标在于通过允许浏览器从页面的其余部分中隔离出页面子树而改善性能。若浏览器知道页面的某一部分为独立的，则可优化渲染并改善性能。此外，此规范允许开发者标示元素究竟是否应当渲染其内容，以及在屏外时是否应当渲染其内容。由此允许用户代理在恰当的时候在元素上应用局限，并有望将布局和渲染推迟至需要时再进行。此规范定义了 CSS 属性 contain 和 content-visibility。
2023-12-04 11:19:55
516
原创 把类当做接口使用
Button和TextBox类是SelectableControl的子类（因为它们都继承自Control并有select方法），但Image和Location类并不是这样的。因为只有 Control的子类才能够拥有一个声明于Control的私有成员state，这对私有成员的兼容性是必需的。这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。
2023-09-24 10:05:13
520
原创 聊聊微前端沙箱
qiankun 是一个基于 single-spa 的微前端解决方案，它提供了沙箱隔离机制，以防止子应用之间的全局污染。qiankun 的沙箱实现主要有两种方式：Proxy 沙箱和快照沙箱。Proxy 沙箱：这是 qiankun 的默认沙箱实现方式。它使用 JavaScript 的 Proxy 对象创建一个全局对象的代理，通过这个代理隔离子应用对全局对象的影响。当子应用试图修改全局对象时，这个代理会拦截这个操作，将修改应用到代理对象上，而不是全局对象上。
2023-09-06 21:39:15
539
原创 前端网络相关的面试题
但需要注意的是，这种方式只能实现单个源的跨域，如果需要实现多个源的跨域，服务器需要动态地设置Access-Control-Allow-Origin字段。然后，服务器会发送一个HTTP响应，响应的头部包含了处理请求的结果，响应的体部则包含了请求的结果。需要注意的是，HTTP/1.1版本开始默认开启了持久连接（Persistent Connection），也就是说在一个TCP连接上可以发送多个HTTP请求，不需要每次请求都重新建立TCP连接。默认情况下，跨域请求不会发送Cookie，除非设置了这个属性。
2023-09-01 20:02:40
333
原创 单点登陆的过程
单点登录（Single Sign-On，简称SSO）是一种用户身份验证的方法，允许用户使用一组用户名和密码就可以访问该组织的所有相关系统或应用程序。这意味着用户只需要登录一次，就可以访问所有的系统，而不需要为每个系统或应用程序单独登录。单点登录的主要优点是提高了用户的便利性和生产力，因为用户不需要记住多个用户名和密码，也不需要反复登录。此外，单点登录也可以提高安全性，因为用户的凭据只在一次登录过程中被验证，减少了凭据被盗取的机会。
2023-08-28 19:47:51
85
原创 要检查一个字符串是否可以由它的一个子串重复多次构成
例如，对于字符串 “abcabcabc”，拼接后的字符串是 “abcabcabcabcabcabc”，去掉第一个和最后一个字符后的子串是 “bcabcabcabcabcab”，这个子串包含了原始字符串 “abcabcabc”，所以原始字符串 “abcabcabc” 可以由它的一个子串 “abc” 重复多次构成。这个函数首先将字符串 s 与自身拼接，然后从第二个字符开始到倒数第二个字符结束的子串中查找原始字符串 s。如果找到了，那么说明原始字符串 s 可以由它的一个子串重复多次构成。
2023-08-25 20:13:27
463
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
1416
原创 JS实现阿拉伯数字转中文
这个函数首先定义了两个数组，一个用于存储 0 到 9 的中文字符，另一个用于存储各个位的单位（如十、百、千等）。然后，它使用一个循环，从个位开始处理数字，每次处理一位。如果当前位是 0，它会检查前一位是否也是 0，如果不是，则在结果字符串中添加一个 “零”。如果当前位不是 0，它会将当前位的数字和单位添加到结果字符串中。最后，它将数字除以 10，然后继续处理下一位，直到所有的位都被处理完。注意：这个函数只能处理非负整数，并且不支持处理小数。如果你需要处理负数或小数，你可能需要对这个函数进行一些修改。
2023-08-09 16:14:48
991
1
原创 节流函数（执行最后一次）
这个函数接受两个参数，一个是要节流的函数，另一个是延迟时间（以毫秒为单位）。它返回一个新的函数，这个新的函数会检查自上次调用以来是否已经过了指定的延迟时间。如果是，则执行函数并更新最后调用的时间；如果不是，则忽略这次调用。这个版本的节流函数在每次调用时都会记录参数，并且如果在延迟时间内再次被调用，它会取消前一个调用并安排一个新的调用。这样，最后一次调用总是会被执行，即使它发生在延迟时间内。节流函数的主要目的是限制一个函数在一定时间内只能执行一次。但是这个版本的节流函数并不能保证执行最后一次调用。
2023-08-04 14:19:51
521
原创 数组全排列
这个函数的工作原理是：首先检查输入数组的长度，如果长度为1，那么只有一种排列方式，直接返回该数组。如果长度大于1，那么遍历数组，对于每个元素，将其从数组中移除，然后递归地计算剩余元素的全排列，最后将当前元素与剩余元素的全排列组合，得到所有可能的排列。全排列是指从给定集合中取出所有元素进行排列，得到所有可能的排列方式。
2023-08-04 08:16:10
159
原创 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
330
原创 快速上手dva
Dva 是一个基于 Redux、Redux-saga 和 React-router 的轻量级前端框架，由阿里巴巴团队开发。以下是 Dva 的一些优点，也是为什么许多开发者选择使用它的原因：简化 Redux 和 Redux-saga 的使用：Redux 是一个非常强大的状态管理库，但是它的使用有一定的复杂性。Dva 对 Redux 和 Redux-saga 进行了封装，使得开发者可以更简单地管理应用的状态和异步操作。
2023-07-16 19:52:30
376
原创 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
268
原创 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
726
原创 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
275
原创 dayjs中UTC和本地时间互相转换
默认情况下，Day.js 会把时间解析成本地时间。如果想使用 UTC 时间，您可以调用 dayjs.utc() 而不是 dayjs()。在 UTC 模式下，所有显示方法将会显示 UTC 时间而非本地时间。这依赖 UTC 插件，才能正常运行。
2023-07-09 10:51:13
2532
原创 dayjs 用法快速上手
Day.js 是一个轻量级的 JavaScript 日期处理库，类似于 Moment.js，但体积更小。Day.js 提供了丰富的 API 来解析、格式化和操作日期。以下是 Day.js 的一些基本使用方法：首先，确保你已经安装了 Day.js。要使用 Day.js 将时间设置为一天的开始或结束，你可以使用 startOf() 和 endOf() 方法。
2023-07-08 22:53:04
1576
转载 qiankun 微前端方案
介绍qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台，在经过一批线上应用的充分检验及打磨后，我们将其微前端内核抽取出来并开源，希望能同时帮助社区有类似需求的系统更方便的构建自己的微前端系统，同时也希望通过社区的帮助将 qiankun 打磨的更加成熟完善。目前 qiankun 已在蚂蚁内部服务了超过 2000+ 线上应用，在易用性及完备性上，绝对是值得信赖的。
2023-06-14 09:43:58
135
原创 什么是 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
855
原创 无重复字符的最长子串
我们使用两个指针表示字符串中的某个子串（或窗口）的左右边界。当我们看到第二个 w 的时，由于 w 已经在窗口内，所以我们需要收缩移动窗口，具体收缩多少，取决于之前那个 w 出现的位置和现在的子串从哪里开始。我们不妨以示例一中的字符串 abcabcbb 为例，找出从每一个字符开始的，不包含重复字符的最长子串，那么其中最长的那个字符串即为答案。暴力解法，生成子串可以用双重for循环，第一层遍历子串的起始字符，第二次遍历子串的终止字符。如果列表中没有记录，我们可以延长子串或者说扩展移动窗口，否则说明重复字符。
2023-05-12 12:05:42
82
原创 SKU（Stock Keeping Unit）是指库存量单位
在电商平台上，一个商品可能有多个颜色、尺码、款式等属性，每种属性都可以看作一个SKU，不同的SKU可能具有不同的价格和库存量。筛选SKU的过程通常是通过商品属性进行筛选，例如尺码、颜色、材质等属性。函数中，根据用户选择的尺码和颜色，通过筛选和组合这两个映射表得到匹配的SKU ID，最后将SKU ID 转换成SKU 对象返回即可。SKU计算是根据商品的属性和SKU信息，计算出所有组合的价格和库存信息的过程。因此，在尺码为S和颜色为蓝的条件下，符合条件的SKU组合有3种，对应的总价格为33，总库存为11。
2023-05-10 21:44:06
1242
原创 如何使用 Hook 进行获取数据？
当你在这两个极端之间找到平衡，然后把相关 state 组合到几个独立的 state 变量时，组件就会更加的可读。使用 Hook 进行数据获取，可以使用 useEffect 和 useState 这两个 Hook，其中 useEffect 用于在组件渲染完成后执行副作用操作，useState 用于定义组件内部状态。2、使用 useEffect Hook，在组件渲染完成后发起数据获取请求，并将获取到的数据存储到 state 中。这样，就可以通过使用 Hook 进行数据获取，并在组件中使用获取到的数据。
2023-05-07 21:51:08
498
原创 我应该使用单个还是多个 state 变量？
当你在这两个极端之间找到平衡，然后把相关 state 组合到几个独立的 state 变量时，组件就会更加的可读。注意看我们是如何做到不改动代码就把对 position 这个 state 变量的 useState 调用和相关的 effect 移动到一个自定义 Hook 的。如果你还怀念自动合并，你可以写一个自定义的 useLegacyState Hook 来合并对象 state 的更新。然而，我们推荐把 state 切分成多个 state 变量，每个变量包含的不同值会在同时发生变化。
2023-05-05 21:27:25
117
原创 同构字符串
对于 s 到 t 的映射，我们同时遍历 s 和 t ，假设当前遇到的字母分别是 x 和 y。如果 map[x] 存在，那么就判断 map[c1] 是否等于 y，也就是验证之前的映射和当前的字母是否相同。如果 map[x] 不存在，那么就将 x 映射到 y ，即 map[x] = y。如果 s 中的字符可以按某种映射关系替换得到 t ，那么这两个字符串是同构的。也就是将 egg 的 e 换成 a, g 换成 d, 就变成了 add。也就是将 add 的 a 换成 e, d 换成 g, 就变成了 egg。
2023-04-05 10:49:40
112
原创 TS获取对象属性值的类型
查看官方文档：https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html。如果想获取对象属性名的类型，可以这样。
2023-01-02 12:08:33
6244
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人