- 博客(99)
- 收藏
- 关注
原创 React+TypeScript 组件库开发全攻略:集成Storybook可视化与Jest测试,一键发布至npm
平时我除了业务需求,偶尔会投入到UI组件的开发中,大多数时候只会负责自己业务场景相关或者一小部分公共组件,极少有从创建项目、集成可视化、测试到发布的整个过程的操作,这篇文章就是记录组件开发全流程,UI组件在此仅作为调试用,重点在于集成项目环境。
2024-07-21 21:13:58
659
原创 轻松实现H5页面下拉刷新:滑动触发、高度提示与数据刷新全攻略
前段时间在做小程序到H5的迁移,其中小程序中下拉刷新的功能引起了产品的注意。他说到,哎,我们迁移后的H5页面怎么没有下拉刷新,于是乎,我就急忙将这部分的内容给填上。本来是计划使用成熟的组件库来实现,尝试之后发现这些组件和我们H5页面的其他逻辑有冲突(H5还有吸顶、锚点、滑动高亮、横向滚动),小小H5页面上承载了太多的功能,兼容起来非常麻烦,想着下拉刷新功能也不复杂,干脆我自己写一个好了。
2024-06-16 19:46:16
1076
原创 抽丝剥茧:详述一次DevServer Proxy配置无效问题的细致排查过程
事情的起因是这样的,在一个已上线的项目中,其中一个包含登录和获取菜单的接口因响应时间较长,后端让我尝试未经服务转发的另一域名下的新接口,旧接口允许跨域请求,但新接口不允许本地访问(只允许发布测试/生产的域名访问)。
2024-05-12 21:27:07
1586
2
原创 构建动态交互式H5导航栏:滑动高亮、吸顶和锚点导航技巧详解
使用粘性定位 sticky 实现吸顶,IntersectionObserver 观察元素相交状态实现滑动高亮,计算高度并通过 scroll 实现吸顶。
2024-04-14 20:34:11
1285
原创 antd/fusion表格增加圈选复制功能
我们存在着大量在PC页面通过表格看数据业务场景,表格又分为两种,一种是 antd / fusion 这种基于 dom 元素的表格,另一种是通过 canvas 绘制的类似 excel 的表格。基于 dom 的表格功能丰富较为美观,能实现多表头、合并单元格和各种自定义渲染(如表格中渲染图形 / 按钮 / 进度条 / 单选框 / 输入框),以展示为主,不提供圈选、整列复制等功能。canvas 绘制的类 excel 外表朴素更为实用,大量数据渲染不卡顿,操作类似 excel,能行/列选中,圈选、复制等功能。
2023-09-24 19:00:05
376
原创 PC首页资源加载速度由8s降到2s的优化实践
我们这次主要选择的指标是 FCP、LCP。FCP 表示着用户能最快看到页面内容的时间,LCP 则是可视区域的最大内容,这两个指标代表着用户真实对于页面快和慢的体验,FCP 在 1.8 秒内,LCP 在2.5 秒内是比较好的。
2023-09-10 20:55:55
326
原创 为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)
因历史遗留原因,接手的项目没有代码提醒/格式化,包括 eslint、pretttier,也没有 commit 提交校验,如 husky、commitlint、stylelint,与其期待自己或者同事的代码写得完美无缺,不如通过一些工具来进行规范和约束。
2023-08-06 20:17:56
762
原创 GIT保存记录原理之commit对象
每一次 commit 提交都是一个 commit 对象,通过40位的哈希校验和,可以找到 tree 对象,它也是一个校验和,通过这个校验和可以找到这次提交依赖的所有文件(二进制)并还原成真实文件。
2023-06-24 20:52:30
1681
原创 关于预处理器 sass 的超全用法
和 js 中的函数类似,在 sass 中将比较复杂或者常用的内容进行封装,可以重复使用。函数的定义函数名 function-name 与 function_name 相同@return 它只允许在函数体中使用,并且每个@function必须以@return结束。当遇到@return时, 它会立即结束函数并返回其结果。函数入参可以设置默认值,也可以按参数名传值,或者通过...表示任意参数函数@function实现的某些功能混入@mixin也能实现,但函数更侧重于做一些计算。
2023-05-14 21:28:12
613
1
原创 预处理器 Less 的十个语法
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。不过浏览器只能识别 CSS 语言,所以 Less 语言直接运行在浏览器端是不被识别的,需要我们通过一些方式将其先转成 CSS,再将 CSS 资源加载到浏览器中。
2023-04-02 20:58:23
361
原创 去中心化组件共享方案 —— Webpack Module Federation(模块联邦)
如果多个应用之间希望资源共享,除了使用 npm 包的形式,基于Webpack 5 Module Federation(模块联邦)实现的EMP微前端方案也可以一试,它不限制技术栈,但依赖于 Webpack5。
2023-03-26 20:16:52
471
原创 从ABNF读懂HTTP协议格式
HTTP是互联网中应用最广泛的应用层协议之一,设计之初是提供一种发布和接收HTML页面的方法,由URI来标识具体的资源。
2022-11-27 19:48:53
491
原创 网络互连模型之物理层和数据链路层
OSI 参考模型 是 ISO 公司提出的理论知识,并不具备实际应用。在真实使用中真正得到认可的是 TCP/IP 协议,学习的时候会把【网络接口层】还原成【数据链路层】和【物理层】,因为这两层关乎通信原理,非常重要。
2022-10-09 22:43:05
1061
原创 计算机的六种连接方式
交叉线适合两台计算机直连同轴电缆半双工通信、不安全、中间断了整个瘫痪集线器一个断了不会影响其它,仍然是半双工通信且不安全网桥具有记忆功能,可以记忆计算机的IP地址交换机相当于具有集线器+多接口的网桥,但仍然不能够跨网段路由器有记忆功能、可以跨网段以上就是计算机的六种连接方式, 更多有关前端、网络协议的内容可以参考我其它的博文,持续更新中~...
2022-08-28 22:27:27
4452
2
原创 vite — 超快且方便的编译工具
vite 基于 esmodule 来处理数据,使用到工具 ESBuild,编译速度非常快css、less、typescript、react 在 vite 中可以直接使用默认配置文件 vite.config.js 可添加其它配置,如 pluginvite 提供了编译后预览的指令 npx vite preview以上就是vite 编译资源的介绍, 更多有关前端、工程化的内容可以参考我其它的博文,持续更新中~...
2022-08-14 20:02:42
2190
原创 Rollup 编译资源离不开 plugin
rollup主要用于处理esmodule的 js 资源,通过命令行可以直接执行,需要指定入口出口文件,以及编译的方式。默认不被支持的资源处理需要通过plugin,自己通过 commonjs 导出的资源使用,第三方库解析通过,处理 css 需要,vue 得依赖和,转换和压缩离不开和,最后通过和开启服务。区分环境通过配置参数。以上就是Rollup 编译资源的介绍, 更多有关前端、工程化的内容可以参考我其它的博文,持续更新中~...
2022-08-07 19:09:19
582
原创 gulp来处理html、css、js资源啦
html文件通过插件对代码压缩less文件使用插件gulp-less解析,css文件兼容性通过处理js文件使用gulp-babel进行代码转换,压缩代码配合魔法注释将资源添加到html页面中和watch为编译开启自动服务串行和并行组合任务以上就是gulp处理html、css、js资源的介绍,更多有关前端、工程化的内容可以参考我其它的博文,持续更新中~httpshttpshttpshttpshttpshttps。...
2022-07-31 21:42:06
398
原创 gulp使用指南
gulp主要以“流”的方式来处理资源,没有模块化,不适合大型项目。gulp每次处理即开启异步任务,可以并行、串行、监听资源的更新。使用插件,gulp也能实现代码转化、压缩等功能。以上就是gulp的介绍,更多有关前端、工程化的内容可以参考我其它的博文,持续更新中~httpshttpshttpshttpshttpshttpshttpshttps。...
2022-07-24 21:37:55
399
原创 一起来自定义loader吧
新建node项目,在src文件夹下的index.js中简单编写一些代码name'alice',age20,};创建loaders文件夹,在文件夹下增加用于处理loader的js文件,通过module.exports函数可以拿到需处理的文件内容,并将处理好的结果返回};在配置文件中引入自定义的loader。定义loader方式有两种通过相对路径引入(这里使用的方式)通过resolveLoader属性配置,默认会去node_modules中查询依赖。.........
2022-07-17 19:54:59
628
3
原创 通过 tree shaking 移除无用代码
tree shaking 依赖于ES Module 的静态语法分析,在项目编译时移除无用的代码以减少文件体积。在文件中,我们可能定义了变量但是暂时又没有用到,这样会造成空间的浪费。在 为 时,会默认做一些配置,将无用的代码删除。为了看到没有做处理时编译后的文件效果,在 webpack 中做如下配置。在这种配置情况下,当存在没有用到的变量时,还是照原样编译到了 js 文件中。想要移除掉 js 文件中的无用代码,开启 通过 配置这样编译后就将没有用到的变量 username 和 foo 函数都移除掉了这时候
2022-07-10 20:48:54
724
原创 压缩 js 代码就用 terser
中提供了压缩 js 代码的方式,可以移除无用代码、替换变量名等,减少编译后文件体积,提升加载速度。在 配置文件 中通过将 设置为 或者 ,会对代码进行不同的处理。可以发现,模式下编译的文件,文件及变量名被修改、空格换行被去除,即使自己没有进行配置,webpack 也会在我们设置 的模式时默认添加一些属性,比如这里js代码压缩用到的就是 。处理代码依赖的是 这个工具, 是可以直接安装并独立使用的,使用的时候有非常多的配置可以自行定义,具体可参考 官方文档其中属于 compress options以下属于 ma
2022-07-03 19:57:51
5978
原创 不要再傻傻分不清 hash、 chunkhash 和 contenthash 啦
hash、contenthash 和 chunkhash 是通过散列函数处理之后,生成的一串字符,可用于区分文件。webpack.config.js 文件中,output 中定义输出 js 文件命名,plugins 中定义的抽取 css 文件命名在 中使用 发送请求,中引入 资源编译后,虽然我们自己定义的 css 文件名为 ,但是由于它被 引入了,所以打包出来的文件名变成了 。每一次编译后,生成的文件名都一样,这样会存在一个问题,通过 webpack 编译生成的静态文件会被我们放置到服务器中,当编译后的
2022-06-19 20:35:52
1457
原创 这样拆分和压缩css代码
在【拆分】和【压缩】css代码之前,首先要配置 loader 处理不同的 css 资源,因为 webpack 没有默认可处理 css 资源的规则,具体可参考这一篇 webpack处理css/less资源loader 处理不同类型的 css 资源后通过 将css代码添加到 文件中,但此时 css 代码并没有生成单独的文件,而是被编译到了 js 文件中。所以在 html 页面中,css 代码是通过 标签创建的,而不是直接引入 css 资源地址。当 css 文件较多时,全部打包至 js 文件,会使得 js 文件体
2022-06-12 19:54:58
447
原创 cdn 引入的资源需要通过 externals 排除打包哦~
cdn 指的是通过相互连接的网络系统,使用最靠近用户的服务器将音乐、图片等资源以高效率和低成本的方式将内容传递给用户。在 webpack 中,我们可能会将引入的第三方资源会编译成单独的文件,作为静态资源放到服务器上,但有些库它本身就有 cdn 链接,通过 cdn 直接加载会使各地资源获取速度更快。在 文件中写一段简单代码,通过 发送 get 请求在 中定义 属性,将公共资源单独编译执行 后,被编译到 559.js 文件中。再将编译后的 html 文件在浏览器中打开,获取到了 get 请求的响应数据在这种
2022-06-05 21:57:07
708
原创 在webpack中这样分离环境和代码就好啦
前面的文章中,webpack.config.js 中包含本地调试和线上发布的所有配置,编译后的 bundle.js 包含所有的代码。当项目变大、代码量变多、配置增加的时候,文件的可维护性会越来越差,是时候对他们进行分离啦~环境分离环境分离主要是区分本地和生产两种环境,本地调试需要能实时看到代码变化,而生产环境需要编译成指定的文件。可以采用两种方式开发环境和生产环境分别定义配置文件,在 package.json 中定义对应的指令开发环境和生产环境共用配置文件,通过参数来区分环境配置文件分离
2022-05-29 20:06:12
236
原创 webpack dev server 与 hot module replace 提高开发效率
通过 webpack命令编译源代码时,如果我们对源代码进行了修改,需要重新执行命令才能看到编译后的效果。这样在开发中非常的影响效率,如果存在一种方式,当文件被修改时,webpack 自动监听重新编译,并反馈给开发者,这样就能更高效的进行开发。watch我们通过 webpack执行命令时,编译完成之后进程会停止,而 webpack --watch编译完成后,不会停止进程,并且当文件内容发生更改时,将重新执行编译操作。在项目中有两种配置方式package.json 中配置命令webpack.co
2022-05-22 20:02:06
585
原创 规范代码编写风格就用 eslint 和 prettier
eslint 可以用于规范我们的编码,使得项目中的代码风格一致,更利于阅读和维护,而 prettier 可以在当我们代码不符合 eslint 规范是进行部分自动修复。eslint通过 npm install eslint -D安装 eslint,然后执行 npx eslint --init初始化配置文件在执行 init 操作的时候,eslint 生成配置文件会问你一些问题想怎样来使用 eslint模块化的方式(Es module、commonjs)选择哪一种框架(React、Vue)是否需要
2022-05-15 22:22:29
963
原创 来会会babel这个重要且神奇的工具
babel 在前端工程化开发中发挥着至关重要的作用,它能将较高级的语法转成浏览器可识别的代码,无论中 es6 中 const 、promise 还是 React、TypeScript。以下babel在线工具中左侧输入代码,右侧为编译后的结果,设置需要浏览器兼容的版本后,可以看到 “const” 编译成 “var”,“箭头函数” 编译成 “普通函数”。命令行使用babel 和之前说到的 postcss 一样,可以通过命令行运行,解析文件夹或者文件。安装命令行工具所需要的依赖,npm install @
2022-05-08 21:55:40
1707
原创 26种source-map看花了眼?别急,理解这几个全弄懂
上一篇 webpack处理模块化源码 的文章中提到了 “source map”,这一篇来详细说说。有什么作用source map 用于映射编译后的代码与源码,这样如果编译后的代码出错了,可以很快速的定位到源文件的位置。我们在 format.js 文件中打印一个不存在的 hello 变量, 当没有 source map 的时候,没有办法看到报错内容在源码的哪个位置。生产环境提示报错是在编译后的 bundle.js 文件,点击该文件后,只能看到压缩和丑化之后的代码。[外链图片转存失败,源站可能有防盗链
2022-05-04 21:11:11
3420
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人