SoulReader

2023-03 项目 进度 单元测试 未开始 vue2 未开始 vue3 未开始 react 未开始

书接上回 React 多页面应用 - 路由配置 这次我们来实现一些不一样的需求，这是在日常工作中遇到的 首先我们来描述一下我们想要实现的需求 首先在这个项目中有多个项目（a,b,c,d…）,假如我只改了a项目的代码，按照我们之前的配置，发版的时候会把所有的项目都一起发上去，这样一个问题是会造成资源浪费（CDN 需要重新缓存），另一个问题是如果有修改到公共方法，会对未修改的项目造成影响，这个时候的需求是只发a项目相关的代码，其他项目的代码不会发上去。 接下来我们来看实现这个需求 实现项目单独打包在上一个项目的基础上，我们可以发现多页面打包的基础是在 打包的时候配置的多入口，那么只需要把原来的多入口变成单入口，就可以实现按需打包了 所以在上一个项目的基础上，把 config.entry 和 config.plugins 的内容单独抽离出来，然后在 overrideConfig 方法内动态传入需要打包的组件入口名称，然后根据传入的组件名称动态获取 entry 和 plugins 的内容。具体实现代码如下 12345678910111213141516171819202122232425262 ...

项目地址 创建项目1create-react-app react-multiple-page-router 打包环境配置1yarn add customize-cra react-app-rewired -D 修改 package.json 1234567891011121314151617// package.json"scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject"},// 更换为"scripts": { "start": "react-app-rewired start", &quo ...

最近忙着工作的事情，好久没有更新博客了，正好最近要做的一个功能，最后决定使用 postMessage 进行解决 具体的使用场景是我这边打开新的窗口的时候需要向新的窗口传递一些数据 首先从网上摘取一些针对 postMessage 介绍 window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。 父窗口如何传递参数打开窗口的方式有一下几种 iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames,此处暂时先介绍 window.open() 父窗口获取打开新窗口对象 1const open = window.open('http://www.ba ...

window.IntersectionObserverIntersectionObserver 提供了一种异步观察观察目标元素与其祖先元素或者顶级文档交叉状态的方法，即目标元素元素出现或者隐藏的时候就会触发 使用1var observe = new IntersectionObserver(callback， options) callback 回调函数，当我们监听的元素触发到阈值的时候会触发回调函数，callback 会有两个参数 entries 和 observer， entries 是一个数组返回触发监听的目标元素 options root root 属性是目标元素的祖先元素，如果未传入值则默认使用顶级文档视窗 rootMarign 计算交叉时添加到root边界和的矩形偏移量，所有偏移量均可用像素或者百分比 主要作用是缩小或者扩大根元素的判定范围 thresholds 一个包含阈值的列表，按照升序排列，列表中每个阈值都是监听对象的交叉区域与边界区域的比率，当监听对象的任何阈值被越过时，都会生成一个通知，如果未传入值，则默认为0 例如 [0, 0 ...

最近这一年左右经常在 b站 刷短视频，也看过多种多样的视频类型，例如分享个人生活，做饭，讲解历史等，也有男女对立，带货，以及虚假新闻等会对人的判断造成影响的短视频。最近突发感想，记录下来 短视频的崛起感兴趣的可以看一下这篇文章短视频行业是怎么火起来的？聊聊中美短视频行业的前世今生 我这边就不过多介绍了 短视频的优缺点这几年涌现出了许多家短视频平台，快手，抖音，西瓜，甚至于许多视频网站也开始向短视频平台进发，例如 b站，也开发出了短视频模式。 优点 短视频一般可能是十几秒到三四分钟不等，视频内容精炼，我们可以完全可以在空闲时间刷两到三个短视频，极大加快了我们获取新知识的速度 短视频更容易吸引人的注意力 缺点 容易沉迷，由于推送算法的影响，刷到的短视频经常都是自己喜欢看的，很容易长时间沉迷进去，从而占据人们大部分的娱乐时间 由于周围人都在刷短视频，人与人之间的交流逐渐减少，虽然之前也有类似的情况，但是短视频的更加显著一些 部分人群无法分辨高质量视频，容易被一些低质量视频或者三观不正的视频带偏，个人思想容易受到影响 为用户基数大，所以信息传递起来更快，这样就会被一部分不怀好意的人 ...

介绍Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Swiper - 是免費且最現代的移動觸摸滑塊，具有硬件加速轉換和驚人的本機行為。它旨在用於移動網站、移動網絡應用程序和移動原生/混合應用程序。 Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity. Swiper 並非與所有平台兼容，它是一種現代觸摸滑塊，僅專注於現代應用程序/平台， ...

white-sapcewhite-sapce 可以通过 nowrap 或者 wrap 来控制一行文字在超出文本框长度时是否换行 normal: 默认。空白会被浏览器忽略。 pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。 nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 pre-wrap: 保留空白符序列，但是正常地进行换行。 pre-line: 合并空白符序列，但是保留换行符。 inherit: 规定应该从父元素继承 white-space 属性的值。 word-break 可以设置文字换行时是 自动换行还是 强制换行 normal: 只在允许的断字点换行(浏览器保持默认处理) break-word: 在长单词或URL地址内部进行换行 break-all: 强制换行，会打断英文单词 文本超出隐藏123white-space: nowrap;overflow: hidden;text-overflow: hidden; 文本超出显示省略号123white-space: nowrap;overflow: hidden;t ...

产品经理（PM）也称产品企划，是指在公司中针对某一项或是某一类的产品进行规划和管理的人员，主要负责产品的研发、制造、营销、渠道等工作。产品经理是很难定义的一个角色，如果非要一句话定义，那么产品经理是为终端用户服务，负责产品整个生命周期的人。 但是事实上，部分产品并不专业，主要体现在以下几个方面 需求方面。产品主要负责编写需求文档以及原型图，方便UI,测试，开发等了解需求详细内容，但是实际上大部分产品并不会编写需求文档，可能只会有原型图，而且原型图并不完善，很多细节都没有标注，还有就是没有考虑到对程序其他功能之间的影响以及不同端之间的影响，而作为一个开发人员或者测试人员，本身无法从全局方面来分析需求，即使向产品提出遗漏的部分，但是也会有遗漏的地方，这些遗漏的地方，运气好的话可能会在开发以及测试阶段被查找出来，但是更多的时候则是会被用户发现。 任务排期。如果是一个做自营产品的公司，产品经理除了自己需要进行迭代的任务外，还需要收集市场部分，老板的需求，以及现场用户遇到的问题。然后根据任务的紧急度进行排期，而不是任务提出来了就要立即更改，打乱了原本正常的迭代流程。 但是实际上部分产品经理根本不 ...

在工作中遇到了这样的一个问题，需要在下载的图片添加一些文字描述，这些文字有一个带有圆角的矩形背景。 主要实现方式是使用 Canvas 的 lineTo 方法和 arcTo 方法通过线条绘制出一个圆角矩形 moveTo(x, y)moveTo 主要是将一个新的子路径的起始点移动到 (x, y) 坐标的方法。 它代表我们绘制的线条的起点 lineTo(x, y)lineTo 主要是从当前绘制线条终点，连接到 (x, y) 坐标，绘制的是一条直线 arcTo(x1, y1, x2, y2, r)arcTo 则是用来绘制圆弧的，将会根据 (x1, y1), (x2, y2) 点的相对位置以点 (x1, y1) 偏移半径 R 的距离画一个圆弧，这个圆弧与 (x1, y1)，(x2, y2) 的连线相切，并从切点连线到(x2,y2), 接下来上代码，可以画出一个 左上角和右下角都是圆角的矩形 12345678910111213141516171819202122const drawRoundRect = (ctx, x, y, w, h, r, color) => { var m ...