- 博客(33)
- 收藏
- 关注
RSS订阅原创 tailwind 和组件库样式冲突
tailwind 在组件库样式之前引入，会导致 tailwind 样式被组件库样式覆盖，比如。是重置样式，以保证页面在不同浏览器中的一致性。如果已经有了一套自己的重置样式，可不引入。之后引入，这样可确保 tailwind 的工具类生效。然而，tailwind 后引入，它的。组件库不使用自动引入，而是手动在。组件上，flex 样式会被。，又会重置组件的库的样式。
2024-07-15 16:08:45
481
原创 两种阻止事件冒泡
都能阻止事件向祖先元素传递，有什么区别呢？一定有区别，否则不会存在两个方法。stopImmediatePropagation 能阻止目标元素的，而 stopPropagation 只是阻止事件向祖先元素传递。一个事件，就可以有多个监听器，这些监听器是按照添加的顺序执行的。
2024-07-11 09:26:50
346
原创 前端如何控制并发请求
比如接口一次返回，数据很多，让浏览器渲染卡顿甚至崩溃，这时候我们可以分批同时发出6个请求，这样就可以避免卡顿或者崩溃。关键思路，把请求方法和请求参数使用一个数组存起来，然后每次请求3个，请求完毕后再请求下一个3个。每组请求返回后，把结果保存起来，等所有请求都返回后，再把所有结果返回。等函数式循环结构，不支持等待效果，因为这些函数式循环结构是同步的，不支持等待。等命令式循环结构，想要在循环中实现等待效果，必须使用。个一组，第一组请求完毕后再请求第二组，以此类推。，实现一组请求返回，再执行第二组请求。
2024-07-08 08:41:40
1449
原创 更加优雅的下载文件 --- http header Content-Disposition 学习
Content-Disposition 在响应头中，告诉浏览器如何处理返回的内容，在表单提交中，说明表单字段信息。download 用于指定名字，如果不指定，浏览器会使用路径的最后一部分作为文件名。标签的属性，用于指定下载动作或者指定文件的名字。用在响应头中，告诉浏览器如何处理返回的内容。页面上有表单，并且我们选择的表单提交方式为。预览，返回的内容替换当前页面，可使用。作为名字，文件后缀名浏览器自动识别。下载，使用 a 访问，会把。下载，接口指定文件名字。文件名含有中文，使用。
2024-07-02 12:25:34
777
原创 编写可读性代码的艺术
在大块代码的之间写一些总结性注释，可帮助读者快速了解代码之间的联系。有如下的 html 代码：-- ...还有很多 input -->-- ...还有很多 input -->-- ...还有很多 input -->-- ...还有很多 input -->-- ...还有很多 input -->-- ...还有很多 input -->-- ...还有很多 input -->-- ...还有很多 input -->-- ...还有很多 input -->-- ...还有很多 input -->
2024-07-01 10:10:54
1525
原创 npm ci vs npm i
npm ci 保证了依赖的一致性和可预测性，适合CI/CD环境。npm install 则无法保证。取决于你的具体需求和环境。在CI/CD环境中，特别是为了保证依赖的一致性和安装的速度，推荐使用。这确保了每次安装的依赖项版本都是一致的，非常适合自动化环境。）：用于在开发环境或其他非CI/CD环境中安装依赖项。两个命令，都可安装项目的依赖。那么这两个命令有什么区别呢？在开发环境或需要灵活控制依赖版本的情况下，可以使用。文件来安装确切的依赖版本，忽略。文件会记录实际安装的依赖版本。
2024-06-30 17:37:39
557
原创 stencil 组件
/ 组件装饰器tag: 'app-input', // 名字全局唯一styleUrl: 'index.scss', // 组件的样式shadow: true, // 开启 shadow root 封装组件样式})// 直接使用属性名称作为事件名称// e.preventDefault() // 默认行为不行render() {@Component装饰器声明该类是一个组件，传递一些元数据，比如组件的标签，标签必须全局唯一，且含有-，样式，是否开启 shadow 等。tag 属性必需，
2024-06-27 14:36:17
370
原创 stencil 简介
stencil 出现的动机为何要学习 stencil 呢？stencil 是一个生成的编译器，但是其具有自己的特殊语法，使用 stencil 生成的组件可跨框架和在 html 中使用。TypeScript (依赖注入、装饰器等 angular 的一些语法)Live reload 热刷新，开发时很有用自动优化构建产物API 很小stencil 的构建产物已经做了懒加载和按需加载，所以具有较高的性能。stencil 除了创建 Web Component，还能构建 WPA 的站点。
2024-06-26 11:17:33
835
原创 常用的 js 代码片段
将秒数转换为 HH: MM: SS 格式的字符串。它通过给定的秒数加上时间戳起始点来创建一个新的 Date 对象，然后将其转换为 ISO 字符串，并提取时间部分得到结果。位运算符 (>>>) 确保了即使未找到点号 (.) ，操作也是安全的，因为在这种情况下仍然会返回一个空字符串。方法从一个元素的 class 列表中添加或移除某个 class。存在则删除，不存在则添加。函数调用可作为计算属性吗？
2024-06-25 17:01:11
406
原创 vue3 watch 最佳实践
同步的 watch 和 watchEffect，vue 会自动停止监听，异步地执行 watch 和 watchEffect 才需要开发者手动停止。4 个 watchEffect 的回调都会立即执行，2 秒后，只有第三个 watchEffect 的回调执行。监听变化，ref 比 reactive 心智负担更加小，监听 reactive 的深层次属性，需要添加。的侦听器来说，使用 watchEffect，可以消除手动维护依赖列表的负担。注意，watchEffect 不支持深度监听，需要深度监听，使用。
2024-06-24 10:55:03
1472
原创 vue 中监听生命周期事件
,添加了额外的变量onResize，感觉有点多余；监听resize的逻辑分散在不同的生命周期中，不好维护。使用监听生命周期事件// hook:lifeHook $once 只执行一次})凡在销毁时执行的操作，都可这样优化。有人说方式1的问题不大，也没有优化多少，似乎没有多少用。
2024-06-22 21:45:48
1434
2
原创 webgis 之 地图投影
投影，在数学上的含义是建立两个面之间点与点、线与线的对应关系。同样地，地图投影的定义是：建立地球椭球面(或球体表面)与地图平面之间点与点或线与线的一一对应关系。地图投影的变形通常有长度变形、面积变形和角度变形。在实际应用中，根据地图的使用目的，通常会限定某种变形。地球是一个球体，而我们的屏幕是一个平面，所以我们需要将地球投影到一个平面上，这样才能在屏幕上显示地球的数据。
2024-06-21 12:56:57
913
原创 前端项目如何检查文件命名规范
ls-lint 是一个非常快的文件和目录名称 linter，可方便约束项目目录和文件的命名。没有安装 husky ，需要安装。安装 4.3.8，5 以上版本有问题。
2024-06-20 10:35:32
498
原创 像素、像素密度、位图和矢量图
正如你所看到的，图像由无数个色块组成，它们都有着独立的颜色，类似于马赛克的效果，每一个色块被称作一个像素（Pixel），在扫描图片时我们需要选择分辨率的高低，这里的PPI（Pixel Per Inch，每英寸中的像素数量）就是代表分辨率，每英寸中的像素点越多，则代表图像越清晰，随之所产生的电子文件也越大。ppi也一样，像素不是固定大小的，它是随着密度变化而变化的，ppi越大，像素越多，图片显示越清晰。通常情况下，图像的分辨率越高，所包含的像素就越多，图像就越清晰，印刷的质量也就越好。
2024-06-19 18:06:46
988
原创 vue3中如何使用pinia -- pinia使用教程（一）
pinia 是一个 Vue3 的状态管理库，它的 API 设计和 Vuex 有很大的相似之处，但是它的实现方式和 Vuex 完全不同，它是基于 Vue3 的新特性。这种方案，也不好，要是组件挂载多次，就会创建多个 store，这个 store 也不会被销毁，但是可以手动销毁的 API。上面的 useCounter 使用选项式 api 创建，pinia 也支持组合式 api, 这和 vue3 的组合式函数非常贴近，使用上更加简单。使用一个工厂函数，组件每次挂载，都会执行工厂函数，返回一个新的 store。
2024-06-17 10:06:42
975
原创 vue2 vue3 中指令总结
使用方式vue2 指令定义方式钩子的参数指令钩子和组件生命周期的执行顺序是怎样的？vue3 中的指令定义方式hook vs 指令指令钩子函数和组件生命周期的执行顺序指令和 render 函数指令用在 jsx 上指令和 render 函数一起使用最佳实践其他问题参考小结vue 内置了一些指令，也提供了自定义指令的接口。指令的作用：可把一些可复用的逻辑封装成指令，以实现逻辑复用，尤其是需要直接操作 DOM 时，可把这些操作封装成指令，能极大提高代码复用性和可维护性。指令按照使用范围看，分为全局指令和。
2024-06-14 11:36:24
1290
1
原创 vue 中的样式
将 vue component 转为 web component，deep 样式不生效。感觉在模板语法中用 style module，不如 scoped 好，更加适合 JSX。style module 能很好做到样式隔离，原理：重写选择器，使其全局唯一。标志，可以把样式作用范围限制在组件内，即组件内部的样式不会影响外部的样式。开发体验好，使用 scss 、less 等预处理，能提高开发效率和体验。今天看看 vue 的样式解决方案，能否满足以上要求。选择器，可将父组件的样式作用到子组件内部。
2024-06-13 10:34:33
706
原创 vue 应用测试（一） --- 介绍
前端测试简介组件测试Jest 测试框架简介其他测试框架第一个测试避免误报如何组织测试代码组件挂载Vue2 组件挂载的方式Vue3 的挂载方式挂载选项如何调试测试用例参考小结软件测试：检查软件是否按照预期工作的过程。测试分类：手动测试：需要人工操作，比如点击按钮，输入文字等。自动测试：写代码测试其他代码，不需要人亲自手动测试每一个功能。端到端测试测试整个应用，从用户角度出发，浏览器自动测试整个应用是否按照预期工作。是自动执行的手动测试，加快手动测试的速度。优点：测试全面，测试结果可靠。
2024-06-12 10:20:08
1384
原创 一些 vue2 项目中遇到的问题
eslintrc.js 可以在任意目录，会从根目录开始查找，root 的值只能是true or false，用于指定在根目录找到后是否往下查找。babel.config.js 必须在项目根目录。.babelrc、.babelrc.js/json 才可以在任意目录。在一个目录里打开多个有 eslint 配置的项目，很可能出现这个问题。这个配置会让 babel 配置失效，不好。错误提示给出了解决方案，
2024-06-11 11:24:24
481
1
原创 vue 如何更好的注册全局组件
改进：把需要全局注册的组件放在数组中导出，然后 forEach 注册。在 components 目录的 index.ts 编写注册函数。在 components 的 index.js。把组件导出到 main.js，然后。，一个个注册，缺点：效率不高。
2024-06-10 11:00:00
712
1
原创 vue2中如何动态渲染组件
方法局限了在组件内部，我们可以将这个方法抽离出来，挂载到 Vue 原型上，就可以在全局调用。了解了如何通过函数调用渲染组件，可以封装一个二次确认弹窗， 用户确认后再进行下一步操作。了解了动态渲染组件的原理，我们可以通过函数调用的方式，动态地渲染组件。返回的是一个 Vue 的子类，而不是一个 Vue 的实例。既然可动态渲染一个组件，把这个过程封装成一个函数，可通过。函数传递一个回调函数，当用户点击确定时，执行回调函数。下面的代码，当用户点击按钮时，会动态渲染一个。上，这样就实现了App.vue 的渲染。
2024-06-09 11:42:38
1295
1
原创 vue2中如何使用函数式组件
vue 在 render 函数的第二个参数中提供了context，用于访问propsslotsprops: 组件 props 对象。data: 组件的数据对象，即 h 的第二个参数。listeners: 组件上监听的事件对象，在组件上监听 ` event-name ` ，listeners 对象就有 ` event-name ` 属性，值为函数，数据可通过该函数的参数抛到父组件。listeners 是 ` data.on ` 的别名。slots: 函数，返回了包含所有插槽的对象。
2024-06-08 19:46:19
1234
2
原创 vue2 中如何使用 render 改善组件
前面在 vue2中如何使用render函数 有提到，vue 官网给出的 render 函数的例子只能体现 render 函数的优雅的一方面，却不能看出其扩展性，今天就来封装一个体现其扩展性的组件。后台管理中常常有如下布局的数据展示需求：像表格又不是表格，像表单又不是表单，实际上样子像表格，呈现的数据是一个对象，和 form 的绑定的值一样，我将其称为表单式表格。样式深的列是标题，浅的列是标题对应的取值，数据往往是服务器返回的，标题往往是定宽的，取值可能各种各样，比如显示一张图片，值为 01，需要显示是与否，
2024-06-07 11:53:44
849
原创 vue2 中如何使用 render 函数编写组件
vue 提供了声明式编写 UI 的方式，即 vue 提供了对 DOM 进行描述的方式。有两种描述 DOM 的方式：模板和 render 函数。模板在编译阶段会被转成 render 函数，这一过程叫编译模板。模板可读性好，但是有时候模板并不灵活，大型的模板可读性也不好。render 函数可读性不高，但是灵活，使用 render 函数封装组件，使用得当，可提高组件的扩展性和易用性。jsx 可解决 render 函数读写性不高的问题。在 vue 的项目入口文件中，下面的代码新建一个 vue 应用的根组件，并默认命
2024-06-07 11:23:43
1481
原创 vue 路由（二）-- 进阶
这些设置，每个页面的效果都是一样的，要为不同的页面设置不同的效果，可用路由传递相应的参数来，让动态绑定到 transition 的 name 属性上。以上两种方式，params 参数的名字必须和组件中的 props 属性名字相同，如果想对 params 进行改造后传递到组件，就可将。设置成函数，在函数内获取路由中的 params 或者 query，或者其他属性值，对其进行处理后再传递给组件。和组件耦合在一起，不方便组件的复用，如果能将路由中的参数传递到组件的。，路由更新，而组件被复用时调用，可使用。
2024-06-07 11:07:38
904
原创 vue2 路由基础 -- 基础使用
（1）vue-router是Vue官方提供前端路由插件，借助它我们实现可以基于路由和组件的单页面应用。传统的页面应用采用的是后端路由，即通过超链接来实现页面切换和跳转的。而在vue-router单页面应用中，则是通过路径之间的切换（实际上就是组件的切换）。
2024-06-06 12:25:23
820
原创 vue2 组件封装
本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点：使用第三方计数库 countup.js 创建一个 组件对以上知识进行总结。在组件文件夹 下创建一个与组件名相同的文件，文件夹内必须有 , 并将组件导入到该文件中，这样方便我们引用组件。 文件夹内：使用组件时，只需这样引入：Vue 组件的三大核心属性（props、data 和样式）props 定义了组件 的数据，确定的组件的核心功能。封装组件时，props 推荐写成对象形式，方便对数据进行验证，提高了代码健壮性也
2024-06-06 12:16:56
1256
原创 vue2状态管理（三）-- 插件的使用
我们修改 state，然后刷新浏览器，状态又变化原来的了，因为 state 是存在内存中的，为了点击刷新，状态不回到原来的，就需要 Vuex 提供的插件功能，当然插件还能实现其他复杂的功能。Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。启用插件后，调用 commit 更新 state 后，会更新本地存储，即使实现浏览器，值也不会变。在学习 mutations 时，我们使用表单的值更新 state，我们这样写。使用插件本地 state 持久化。
2024-06-06 12:05:45
404
原创 vue2-状态管理（二）
提交mutation是改变你 state 的唯一方式；方法执行上：dispatch分发 action;commit提交 mutation。辅助方法的映射getters、state 映射为计算属性；actions、mutations 映射为法法。分离功能：state 保存数据；getters 是对 state 的操作；actions 要提交 mutation;mutations 改变 state。异步与同步：action 封装异步处理；
2024-06-06 12:00:39
728
原创 vue2-状态管理（一）
中，用户和组件交互时，通过组件内的方法分发（dispatch）一个动作（action，有点像事件），动作会提交（Commit）一个更改（Mutation，也类似事件），改变 State 中的数据，然后获取数据渲染到视图上。getters 是对 state 的加工，类似于组件中的 data 和计算属性的关系。子 →（$meit）父组件，即子组件自定义一个事件，在父组件中监听该事件。state 对象的属性时 Vuex 管理的状态，类似单个组建的 data。// 子组件的事件监听函数中触发一个自定义事件。
2024-06-05 10:23:10
1082
原创 你知道 npmrc 文档吗？ ---- npmrc 关键作用介绍
npmrc是 npm 的配置文件。rc 是 registry config 缩写。npm 在执行命令时，会读取里面的配置，然后执行特定的行为，通过它可改变 npm 的默认行为，比如下载精确版本的 npm 包，从某个 npm 源的下载依赖等。有4种.npmrc文件，npm 会依次读取这些文件，后面的文件会覆盖前面的文件的配置。项目级别的.npmrc文件，在文件所在的目录。用户级别的.npmrc文件，在用户的根目录。通过查看。全局级别的.npmrc文件, 在 npm 的安装目录下。通过查看。
2024-06-04 10:01:52
1171
原创 npm 语义化版本控制
为了在软件版本号中包含更多意义，反映代码所做的修改，产生了语义化版本，软件的使用者能从版本号中推测软件做的修改。npm 包使用语义化版控制，我们可安装一定版本范围的 npm 包，npm 会选择和你指定的版本相的安装。主版本号次版本号补丁版本号。有时候为了表达更加确切的版本，还会在版本号后面添加或者，来说明是预发布版本或者测试版本等。比如。安装带标签的版本希望安装带标签的版本，必须明确指定标签或者版本号，否则安装的是最新的不带标签的版本。
2024-06-03 04:35:56
792
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人