- 博客(107)
- 收藏
- 关注
RSS订阅原创 typeof是怎么检查数据类型的
所有的数据类型值 , 在计算机底层都按照 “64位” 的二进制值进行存储的 , typeof是按照二进制值进行检测类型的。二进制的前三位是零 , 认为是对象 , 然后再去看有没有实现call方法 , 如果实现了 , 就返回。null是64个零 , 所以虽然null不是对象 , 但是。, 如果没有实现 , 则返回。场景1 : 判断当前值是不是一个对象。场景2 : 支持更多的模块导入方案。检测未被声明的变量 值是。返回的是object。
2024-03-16 23:15:39
396
原创 ios手机在app中调试h5页面
网页开发在浏览器里调试很方便，但是在移动端开发调试，例如需要在app中打开，会用到一些bridge , 这时候就不能在浏览器调试。在app调试，如果每次都要发布到测试环境才能调试，那就会浪费很多时间。
2024-03-12 23:30:42
1881
原创 Workbox使用分享
官方文档原文：Precaching!简单的来说 Workbox 是由 Google 开发的一个基于 Service Worker 的js库，提供了很多高效好用的工具和策略，其目的在于更加高效的实现应用缓存和离线优先应用（PWA），不再需要繁杂的编写SW相关的代码。
2024-03-12 23:30:28
969
原创 Ts入门到放弃
但是死板的去除指定属性某些场景可能不满足需求（后面可能会动态的想 TS 对象添加某个 k）如果我们将指定的属性（language）定义为可选，那么同样满足需求定义去除key所对应的可选类型定义去除指定的属性后的类型选取1和2的交叉类型[P in K]?: T[P];age: 21,做一个合格的Typescript工程师，感受体操的魅力！
2024-03-12 23:30:10
1343
原创 Monorepo
monorepo 是一种将多个项目代码存储在一个仓库里的软件开发策略Monorepo 能带来什么统一工作流首先是工作流的一致性，由于所有的项目放在一个仓库当中，复用起来非常方便，如果有依赖的代码变动，那么用到这个依赖的项目当中会立马感知到。并且所有的项目都是使用最新的代码，不会产生其它项目版本更新不及时的情况，对开发调试而言都带来了方便降低基建成本其次是项目基建成本的降低。
2024-03-12 23:30:01
963
原创 【性能】如何计算 Web 页面的 FP 指标
FP (First Paint) 为首次渲染的时间点，在性能统计指标中，从用户开始访问 Web 页面的时间点到 FP 的时间点这段时间可以被视为 白屏时间，也就是说在用户访问 Web 网页的过程中，FP 时间点之前，用户看到的都是没有任何内容的白色屏幕，用户在这个阶段感知不到任何有效的工作在进行。FP 指标通常会反映页面的白屏时间，而白屏时间会反映当前 Web 页面的网络加载性能情况，当加载性能非常良好的情况下，白屏的时间就会越短，用户等待内容的时间就会越短，流失的概率就会降低。
2024-03-12 23:29:54
516
原创 【性能】如何计算 Web 页面的 TTI 指标
TTI（Time To Interactive），即从页面加载开始到页面处于完全可交互状态所花费的时间。很多情况下，开发者往往只关注页面渲染相关的指标，如 FP、FCP 等，而忽视了页面的可用性指标。TTI 即是反映页面可用性的重要指标。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。
2024-03-12 23:29:46
530
原创 SingleSpa微前端基本使用以及原理
但是刚刚接触微前端 可以了解一下微前端的基础使用qiankun微前端框架已经很成熟 也是基于singleSpa来实现的。
2024-03-12 23:27:56
916
原创 unplugin-vue-components自动按需导入第三方组件
ps: 一旦用了自动导入插件 , 我们定义在components文件夹下的全局组件也可以直接使用了。当然这个插件可以解析不同的第三方组件库 比如element antv这样的都可以。比如我们想作用于element 也是可以的。然后在vite.config.ts中配置。
2023-01-27 20:30:40
1343
原创 pinia数据持久化插件
然后我们可以在对应的store中的第三个参数配置一个属性。这波就是配合本地存储和pinia完成的一个持久化。在pinia的文件中。
2023-01-14 23:53:20
292
原创 webpack环境变量的使用
如果设置 env 变量，却没有赋值，–env production 默认表示将 env.production 设置为 true。看看src/GlobalConfigs的文件目录。那环境变量具体是怎么使用的呢。
2022-09-27 11:07:10
1774
原创 webpack-merge的使用
注意，在环境特定的配置中使用 merge() 功能，可以很方便地引用 webpack.dev.js 和 webpack.prod.js 中公用的 common 配置。webpack-merge 工具提供了各种 merge(合并) 高级功能，但是在我们的用例中，无需用到这些功能。
2022-09-26 18:25:46
3887
原创 事件循环深度学习
默认情况下浏览器会为为每个标签页开启一个新的渲染进程 以保证不同的标签页之间不相互影响。默认情况下浏览器会为为每个标签页开启一个新的渲染进程 以保证不同的标签页之间不相互影响。比如qq进程崩溃了 肯定是不会影响到微信的 所以每一个进程是完全独立的。如果让渲染主线程等待这类型任务的时机达到,就会导致主线程长期处于。如果让渲染主线程等待这类型任务的时机达到,就会导致主线程长期处于。渲染主线程承担着极其重要的工作,无论如何都不能阻塞!渲染主线程承担着极其重要的工作,无论如何都不能阻塞!
2022-09-14 13:51:47
611
原创 document.load和document.ready之间的区别
如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的，但是页面中有文件就不一样了，所以还是推荐大家在工作中用ready。如果需要依赖这些外部的资源 就使用load。
2022-08-30 23:43:08
1544
转载 mac M1 nvm 安装问题
新款的mac搭载了苹果自研的芯片，放弃了intel的x86芯片，那之前的软件难免会存在兼容性问题。鄙人有幸踩了第一个坑。在通过nvm 安装不同版本的node 时，出现了问题。问题一：先说一下 nvm的安装问题，这个跟m1的兼容性无关。参考大神文章（https://www.jianshu.com/p/622ad36ee020）我在通过命令行安装nvm成功之后（curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | b
2022-06-14 22:31:08
303
原创 webpack配置缓存
文章目录为什么要设置缓存输出文件的文件名缓存第三方库将js文件放到一个文件夹中为什么要设置缓存我们使用webpack来打包我们模块化以后的应用程序 , webpack会生成一个可以部署的dist目录 , 然后我们把打包好的内容放置在这个目录里 , 将来我们把这个目录的内容部署到服务器上 , 浏览器就可以访问这个服务器上的网站和资源了而最后一步获取资源是比较耗时间的 所以浏览器会使用一个叫做缓存的技术我们可以通过命中缓存去降低网络流量 , 使网站加载速度更快然而我们在部署新版本的时候
2022-05-22 19:32:59
817
原创 webpack5代码分离优化项目加载速度
文章目录什么是代码分离代码分离的好处常用的代码分离方法入口节点分离法防止重复动态导入import动态导入 魔法注释懒加载 ( 动态导入方法的应用 )预获取/预加载模块prefetch尝试什么是代码分离代码分离是webpack的特性之一可以把代码分离到不同的bundle中 bundle就是我们打包分离出来的文件然后就可以把这些文件按需加载或者并行加载代码分离的好处可以用于获取更小的bundle 以及控制资源加载的优先级 如果使用合理 可以极大的影响首屏的加载时间常用的代码分离方法第
2022-05-22 16:47:10
281
原创 webpack5使用babel-loader ES6转化ES5
文章目录引导使用bable-loader 把ES6转化成ES5regeneratorRuntime插件引导上一篇讲解了 webpack的css抽离和压缩之前我们用了less-loader编译了less文件 用css-loader编译了css文件那么js文件需要编译吗?– 我们在页面中写一个promise定时器2秒后打印hello word打包后我们观察输出的bundle.js文件 发现我们的ES6代码 被原封不动的打包到了这个文件里这就引发了一个问题 !!!不是所有浏览器都支
2022-05-21 16:49:47
1753
原创 webpack5css抽离和压缩
文章目录引导mini-css-extract-plugin自定义打包出来的css文件路径和文件名称css压缩 `css-minimizer-webpack-plugin`引导上一篇讲解了 webpack的loader我们已经可以通过loader加载css了 但是现在的代码是和html在一起的我需要把style的代码放置到一个单独的文件里通过link去加载mini-css-extract-plugin这个功能需要一个插件npm i mini-css-extract-plugin -D–
2022-05-21 15:07:28
431
原创 webpack5 loader解析器
文章目录引导loader使用loader去加载一个css模块style-loaderloader解析css预处理器引导上一篇讲解了 webpack的asset资源模块除了资源模块 还可以通过loader来引入其他类型的文件loaderwebpack只能解析js和json这样的文件loader可以让webpack解析其他类型的文件 并且转化成模块来供我们使用使用loader去加载一个css模块如果我们不加loader去解析css 打包的时候就会报错显示识别不了css所以在项目
2022-05-21 14:29:18
262
原创 webpack5资源模块asset
文章目录引导资源模块asset module type`asset / resource 导出图片资源`修改asset/resource模块下打包后的资源路径和文件名`asset / inline 资源转化成base64``asset / source 读取资源的内容``asset通用数据类型自动转换`引导上一篇讲解了webpack搭建开发环境有一个问题 到目前为止 项目只能加载JS但是我们想混合一些其他的资源怎么办呢?– 比如images/ 字体 / 图标等资源模块asset modu
2022-05-21 01:11:38
836
原创 webpack5使用souceMap和watchMode搭建简易开发环境
文章目录引导mode(打包选项)soucre map(精准定位代码的行数)使用watch mode(观察模式)webpack-dev-server热更新webpack-devServer的原理引导上一篇讲解了 webpack的插件但是之前我们每次更新了代码 都要重新刷新浏览器看到新的效果– 很多的操作都是要自己手动去做 非常的不方便我们可以搭建一个开发环境来使开发变得更加轻松mode(打包选项)首先看到webpack.config.js里的配置我们把mode改成developmen
2022-05-20 21:17:46
258
原创 webpack5的插件plugin
文章目录引导什么是插件plugins中文文档使用HtmlWebpackPluginHtmlWebpackPlugin的options选项不同名称多次打包会生成多个html文件 如何去清理dist引导上一篇讲解了 webpack的快速打包因此衍生出了一个问题 webpack打包那么方便 能不能自动管理index.html中script的路径什么是插件webpack就像是一条生产线 要经过一系列处理流程后 才能将入口文件转化成输出的结果入口文件还可以依赖于其他两个js的模块其中被依
2022-05-20 19:19:45
322
原创 webpack5快速上手打包以及概念
文章目录安装webpack有两种方式安装在setup-app文件里面的时候安装在文件外面的时候 你在`setup-app`文件中的终端输入webpack是没用的webpack分析命令webpack帮助如何设置打包的入口的webpack配置文件怎么写安装webpack有两种方式// 全局安装(不建议 会锁定webpack的版本) npm install webpack webpack-cli --global// 项目中安装 npm install webpack webpack-cli --sa
2022-05-20 18:18:17
193
原创 如何使用http-server启用一个本地的服务
在做一个练习的时候 使用的是index.html文件然后想使用import导入一个其他的js文件调用里面的方法 进行一个本地的查看 但是打开浏览器中显示跨域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie.
2022-05-20 16:41:09
233
原创 ./node_modules/pre-commit/hook: line 49: : command not found怎么办
pre-commit是检查代码的钩子如果报错了 就去文件夹里的.git/hook里把pre-commit删除就可以了
2022-05-05 21:41:10
1003
原创 前端大屏适配方案
在每个路由主文件使用mixin混入drawMixin.js( 代码在下面 )前提 每个主文件的最外层 需要写id和refdrawMixin.js// 屏幕适配 mixin 函数// * 默认缩放值const scale = { width: '1', height: '1',}// * 设计稿尺寸（px）const baseWidth = 1920const baseHeight = 1080// * 需保持的比例（默认1.77778）const baseProp
2022-04-24 17:14:47
3554
1
原创 css设置以某个字符开头或包含某个字符的类名样式
以icon开头，包含 ’ icon’的类名[class^='icon'], [class*=' icon'] { width: 100px; height: 100px; background-color: red; }
2022-04-16 23:30:06
1471
原创 vue拖拽@drop不生效解决方式
想要一个原生可以进行拖拽 可以使用HTML5的一个属性draggable='true' <div class="widget" draggable='true'>pie</div>加上了后这个元素就开启了拖拽然后在需要放置的元素上注册一个@drop='函数'来接收拖拽的元素但是你会发现元素拖拽上去了也没有生效这是因为还需要阻止一个默认事件@dragover="e=>e.preventDefault()"加上后就可以了<div class="
2022-04-16 14:46:32
4577
4
原创 el-input-number的问题
最近在做一个表单 使用到了el-input-number发现了一个小小问题 在此记录一下 以免下次再犯就是v-model绑定了值后 输入框的默认值会为0– ( 我的默认值是空字符串 但是输入框里显示的是0 )后来发现绑定的值不能为空字符串 也不能为null–只能为undefined 这样就不会出现输入框默认值为0了但是又出现了一个问题 我的必填校验是这样写的:rules="[{ required: true, message: '请填写完整'}]"– 这样的话 就算填了数字
2022-04-12 15:03:15
2684
3
原创 vue在开发环境中配置本地hosts修改域名
修改hosts文件打开访达 按住command+shift+g搜索/private/etc/hosts然后修改hosts文件把你想要的域名设置成localhosts一样的ip修改完成后终端输入sudo vim /etc/hosts查看hosts文件设置好了后 可以ping一个这个域名 测试一下通不通如果通的话 项目启动后原本localhost:8080/的地址可以在浏览器中替换为你配置的域名:8080/...
2022-04-03 01:05:47
2904
原创 vue3获取页面横向和纵向滚动距离
创建一个hooks文件保存进去就行import { ref, onMounted, onBeforeMount } from 'vue'export function useWindowScroll () { const x = ref(0) const y = ref(0) const onScroll = () => { x.value = document.documentElement.scrollLeft y.value = document.docume.
2022-03-23 18:36:19
2703
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人