- 博客(53)
- 收藏
- 关注
RSS订阅原创 leaflet扩展插件esri-leaflet.js
esri-leaflet.js是一个开源的JavaScript库，它允许开发者在Leaflet地图上轻松地使用Esri的服务，如ArcGIS Online和ArcGIS Server的图层。
2025-03-01 14:51:05
711
原创 Leaflet图层介绍
Leaflet是一个开源的JavaScript库，主要用于创建交互式地图。在Leaflet中，图层是一个核心概念，它允许用户在地图上添加、移除和切换不同的内容。
2025-03-01 14:46:37
830
原创 leaflet地图坐标和经纬度转换
经纬度和Leaflet地图坐标之间的转换涉及地理坐标系与投影坐标系之间的转换。Leaflet提供了简单的方法来在经纬度坐标和Leaflet坐标对象之间进行转换。对于需要将经纬度转换为特定投影坐标系的平面坐标（x, y）的情况，可以使用地图对象的project()方法。相反，可以使用地图对象的方法将平面坐标转换回经纬度坐标。在处理不同地理坐标系之间的转换时，可以使用专门的坐标转换插件。
2025-03-01 14:23:29
328
原创 OpenLayers介绍及使用示例
OpenLayers是一个强大的、开源的JavaScript地图库，专门用于在网页上显示和操作地图。它提供了丰富的功能来处理各种地图数据源，包括但不限于瓦片地图（如OpenStreetMap、Google Maps瓦片格式等）和矢量数据（如GeoJSON格式的点、线、面数据）。通过OpenLayers，开发者可以轻松地在网页上实现地图的缩放、平移、旋转等基本操作，还能够添加各种图层（如影像图层、标注图层等），并支持自定义地图样式。支持多种地图源。
2025-02-27 20:29:26
437
原创 openlayer和leaflet介绍
OpenLayers和Leaflet都是地理信息系统（GIS）和在线地图领域中非常流行的JavaScript地图库，它们都提供了丰富的功能用于创建交互式地图。
2025-02-24 09:59:41
820
原创 D3.js及实例应用
D3.js由著名的计算机科学家和数据可视化专家Mike Bostock于2011年创建。核心理念：D3.js的核心理念是利用数据来驱动文档的生成和操作，使数据可视化成为可能。它通过将数据与HTML、CSS和SVG等Web标准结合，使得数据可以以一种直观和易于理解的方式进行呈现。
2025-02-21 11:49:44
482
原创 vue3-虚拟dom优化
编译时静态分析：通过静态提升、Patch Flags、Block Tree 减少运行时计算量。智能 Diff 算法：结合 LIS 和动态标记，最小化 DOM 操作。响应式系统协同：精准追踪依赖，避免无效渲染。这些优化使得 Vue 3 在大型应用中的渲染性能接近原生 JavaScript 操作 DOM 的效率，同时保持了开发者的友好体验。
2025-02-13 14:36:50
1143
原创 webpack和vite打包原理及比较
Vite 代表了前端工具链的未来方向（原生 ESM + 按需编译），而 Webpack 依然是复杂场景的“瑞士军刀”。：通过 Loader 处理非 JS 模块（如 Babel 转译、CSS 处理）。进行打包（支持 Tree Shaking、代码分割等），输出优化后的静态文件。Webpack 将所有文件（JS、CSS、图片等）视为模块，通过。：根据依赖图和代码分割规则，生成多个代码块（Chunk）。：在打包生命周期中执行复杂任务（如代码压缩、资源优化）。：处理非 JS 文件（如 CSS → JS 模块）。
2025-02-13 10:15:23
1627
原创 vue3-响应式 shallowRef
shallowRef是Vue 3中处理大型或深层嵌套对象时的一个有用工具，它允许你创建一个只追踪顶层变化的响应式引用，从而避免了不必要的性能开销。但是，你需要谨慎使用它，确保你了解它的工作原理和限制。
2025-02-06 16:29:20
296
原创 vue3-响应式 toRefs
toRefs是Vue 3中处理响应式数据的一个强大工具，特别是在需要将响应式对象解构为单独属性时。它确保了即使解构后，这些属性仍然保持响应性，从而可以安全地在组件中使用。
2025-02-06 16:27:47
391
原创 Vue3-管理状态 effectScope
EffectScope 是 Vue 3.2 版本引入的一个新 API，它允许开发者创建一个 effect 作用域，以捕获在该作用域内创建的响应式副作用（如计算属性和侦听器）。这些副作用可以一起被处理，使得状态管理更加灵活和可控。
2025-02-06 16:13:58
791
原创 vue3-自动收集依赖 watchEffect
在 Vue 3 中，是一个用于自动追踪响应式数据变化并执行副作用的 API。与watch不同，不需要手动指定要观察的数据，而是会自动根据内部访问的响应式数据进行依赖追踪。这使得更加简洁和直观，适用于某些需要副作用的场景。
2025-02-06 15:49:43
485
原创 vue3-封装自定义 Hooks
在 Vue 3 中，setup函数是 Composition API 的核心部分，它允许你使用响应式状态和其他 Composition API 功能。然而，就像在其他框架中的组件方法或生命周期钩子中一样，setup函数内定义过多逻辑可能会使代码变得难以阅读和维护。为了解决这个问题，Vue 3 开发者通常会将相关逻辑封装成自定义的 Composition API 函数（有时也称为“自定义 Hooks”，尽管这个术语更多地在 React 社区中使用）。
2025-02-06 15:38:23
185
原创 svg和canvas比较
SVG是一种基于XML的标记语言，用于描述二维矢量图形。它是可缩放的，意味着图形可以在不损失质量的情况下被放大或缩小。SVG图像由文本描述，因此可以被搜索引擎索引，并且易于编辑和修改。
2024-12-05 19:45:48
545
原创 前端渲染模式
前端渲染模式是指在Web开发中，将应用程序的数据与模板结合，生成最终的HTML页面的过程。这个过程可以在客户端、服务端或构建时进行，具体取决于所使用的渲染模式。
2024-12-04 20:11:15
809
原创 浏览器渲染流程
网页的渲染在渲染进程里面完成，渲染进程内包括有4类线程：主线程（main）、工作线程（worker）、合成线程（compositor）、光栅化线程（raster）。在有的浏览器下，css加载会阻塞render tree的生成，造成白屏；在有的浏览器下，css加载不会阻塞render tree的生成，但是如果css放在html底部，那么会导致浏览器先渲染一次没有加载样式的网页，再渲染一次有样式的网页，造成闪跳。标签，引用了外部资源，在加载和执行外部资源的时候，可能会引发渲染管线的阻塞。
2024-12-04 20:05:15
573
原创 DOMContentloaded事件和load事件触发
具体来说，当浏览器完成HTML文档的解析，并将文档转换为一个完整的DOM树时，就会触发DOMContentloaded事件。与DOMContentloaded事件不同，load事件是在一个资源及其所有依赖资源（如图片、样式表、脚本文件等）都加载完成后触发的。因此，load事件通常用于确保页面上的所有内容都已经加载完毕，然后执行一些后续操作，如初始化动画效果、启动交互功能等。在HTML文档的解析过程中，如果遇到script脚本，就会停止页面的解析进行下载，当脚本都执行完毕后，才会继续解析页面。
2024-12-04 19:58:48
473
原创 CSS样式实现常见图形
CSS3 提供了许多强大的工具，可以用来创建多种样式和形状的图形。通过使用box-shadowclip-path和transform等属性，你可以实现圆形、椭圆形、多边形、星形等复杂的图形。以下是一些示例，展示了如何使用 CSS3 创建不同的图形。
2024-11-23 10:27:20
490
原创 JavaScript的设计模式
JavaScript设计模式是指在面向对象编程中，通过对类和对象进行抽象和泛化，提取出一些通用的设计思路和解决方案，以解决常见的软件设计问题。
2024-10-05 21:24:40
943
原创 JavaScript中this指向总结
理解this的工作原理是掌握JavaScript的关键之一，因为它直接影响到函数的执行方式和数据的访问方式。this的指向是动态的，这是由函数的调用方式决定的。通常，this指向最后调用它的对象。总结以下是一些常见的this指向的情况：在普通函数中，this指向全局对象（在浏览器中是window在对象方法中，this指向调用该方法的对象。在构造函数中，this指向新创建的对象。在箭头函数中，this持有外层作用域中的this。在事件监听函数中，this通常指向监听该事件的DOM元素。使用。
2024-10-05 20:47:23
577
原创 JavaScript作用域详解
作用域（Scope）是指在代码中定义变量时，这些变量在哪里以及在哪些地方可以被访问。作用域控制着变量的可见性和生命周期。在JavaScript中，作用域的类型主要由函数定义和代码块定义来决定。
2024-10-05 20:11:16
995
原创 JavaScript中class类介绍
在JavaScript中，class关键字自ES6（ECMAScript 2015）起被引入，作为基于原型的继承的更清晰、更易于理解的语法糖。它允许你通过类（class）和构造函数（constructor）来创建对象，并通过类的方法（methods）和属性（properties）来定义对象的行为和状态。以下是对class的详细介绍和各种示例说明。
2024-09-28 09:44:12
366
原创 videojs 播放mp4视频只有声音没有画面问题
在使用Video.js播放MP4视频时，如果遇到只有声音没有画面的情况，这通常与视频文件的编码格式、浏览器兼容性或Video.js的配置有关。以下是一些可能的解决步骤和原因分析：1. 检查视频编码MP4视频支持多种编码格式，但并非所有编码都能在所有浏览器或播放器中无缝播放。特别是，AVC（H.264）编码是广泛支持且被认为是MP4的标准编码。如果视频使用的是其他编码（如MPEG4(DivX)、MPEG4(Xvid)等），可能会出现兼容性问题。使用 H264视频编码 和 AAC音频编码示例：
2024-09-28 09:29:16
2444
原创 el-upload自定上传列表删除，上传列表已删除，提交数据仍存在问题
一定要注意，使用这个$refs.upload_attach.handleRemove(file)删除上传的文件列表，并不会主动的删除绑定的:file-list="fileList" 中fileList的数据，需要配合:on-remove="handleRemove" ，在on-remove中重新给fileList赋值，否则上传时会出现，上传列表中文件删除，提交的时候仍然存在的问题。在上述代码中，直接调用上传组件源码中的handleRemove，去删除自定义slot中的file。
2024-09-28 08:54:01
1086
原创 Web Workers的介绍
Web Workers是HTML5提供的一种浏览器内多线程解决方案，其原理是利用浏览器提供的多线程机制，将一些耗时的计算或其他阻塞UI线程的操作放到子线程中进行，从而提高Web应用程序的性能和响应速度。通过这个示例，可以看到Web Workers如何帮助开发者将计算密集型任务从主线程中分离出来，从而提高Web应用程序的性能和响应速度。以下是一个使用Web Workers进行大数组排序的示例，展示了如何在Web应用程序中创建和使用Web Workers。然后，在主线程中（例如在一个HTML文件的。
2024-09-21 10:51:03
455
原创 JS常用数组方法总结
JavaScript 数组（Array）提供了许多内置方法来处理数组元素，这些方法大致可以分为几类：添加/删除元素、遍历数组、搜索元素、转换数组、排序和归约（reduce）等。下面我将详细介绍一些常用的数组方法，并给出示例代码。
2024-09-21 10:22:27
627
原创 element-ui多个消息提示只显示最后一个
方法，它们会依次显示，直到用户关闭或它们自动消失。但是，如果你希望只保留最后一个消息提示，即每当新消息出现时，旧的消息提示应该被关闭或替换，你可以通过手动控制来实现这一行为。这里提供一个简单的示例，通过监听消息显示前的事件或使用全局变量来控制只显示最新的消息。不过，Element UI 的。API 并没有直接提供“只显示最后一个”的选项，所以我们需要借助一些额外的逻辑来实现。通过这种方式，你就可以实现只显示最后一个消息提示的功能了。消息提示时，默认情况下，如果你连续调用多个。
2024-09-21 09:55:26
714
原创 Video.js展示视频
在Vue 2中使用Video.js来展示视频是一个常见的需求，因为Video.js提供了丰富的API和灵活的自定义选项，使得在网页上嵌入和控制视频变得简单。以下是一个详细的示例，包括如何在Vue 2项目中集成Video.js，并展示一个基本的视频播放器。
2024-09-18 21:30:16
1774
1
原创 el-upload如何自定展示上传的文件
作为示例，这只是一个返回JSON数据的占位符API，并不支持文件上传。你需要将其替换为你的实际文件上传接口。在这个示例中，我将展示如何自定义每个文件的显示方式，包括文件名、文件大小、上传进度和删除操作。绑定，并且你的上传逻辑（包括删除）都通过 Element UI 的事件（如。然而，在 Element UI 的正常用法中，如果你使用了。组件支持通过插槽（slot）来自定义文件列表的展示方式。但在某些情况下，你可能需要更细粒度的控制，这时就需要手动操作了。请注意，在上面的代码中，我通过。
2024-09-18 21:14:44
2189
原创 前端防抖和节流
在前端开发中，防抖（Debouncing）和节流（Throttling）是两种常用的优化高频事件（如滚动、窗口大小调整、键盘输入等）处理函数的性能的技术。它们的主要区别在于触发事件处理的时机和频率。防抖适用于需要减少高频事件触发次数的场景，如搜索框输入。节流适用于需要控制事件处理函数执行频率的场景，如滚动监听。选择使用哪种技术取决于具体的应用场景和需求。
2024-09-15 13:50:13
436
原创 前端中常见的性能问题
在前端开发中，性能问题是一个非常重要的关注点，它直接影响到用户体验和应用的响应速度。以下是一些常见的前端性能问题及其解决方案，并附上示例代码。
2024-09-15 13:31:38
534
原创 前端常见的安全问题
XSS攻击是攻击者向Web页面注入恶意脚本，当用户浏览这些页面时，恶意脚本会在用户的浏览器中执行，从而进行各种攻击，如窃取用户的Cookie、导航到恶意网站或携带木马等。前端应用通常会将一些数据存储在用户的浏览器中，如localStorage、sessionStorage等，但这些数据可能面临泄露的风险。综上所述，前端安全涉及多个方面，需要开发者在开发过程中时刻保持警惕，采取相应的防御措施来保障应用的安全性。CSRF攻击是攻击者诱导受害者在未察觉的情况下，向被攻击网站发送伪造请求，从而执行恶意操作。
2024-09-15 13:23:24
868
原创 Cookie、sessionStorage和localStorage介绍
Cookie、sessionStorage和localStorage各有其适用场景。Cookie适用于需要在客户端和服务器之间传递的少量数据，如用户认证信息。sessionStorage适用于存储单个会话期间需要的数据，且这些数据只在当前标签页或窗口中有效。localStorage适用于需要持久化存储的数据，如用户偏好设置，这些数据跨会话存在，且在同源的所有标签页和窗口中共享。在选择使用哪种存储机制时，需要根据具体需求和数据的特点来决定。
2024-09-15 13:13:38
446
原创 前端常用的服务器推送技术
前端开发中，服务器推送技术允许服务器主动向客户端（浏览器）发送数据，而无需客户端显式请求。这种技术对于构建实时应用（如聊天应用、实时通知、实时数据仪表盘等）非常关键。以下是几种常用的服务器推送技术及其详细介绍和示例代码。
2024-09-15 13:02:12
679
原创 script标签属性介绍
2. **type**: 指定脚本的 MIME 类型。1. **src**: 指定外部 JavaScript 文件的 URL。3. **async**: 表示脚本可以异步加载，即在页面继续解析的同时下载脚本，但脚本将在文档完成解析后执行。10. **language**: 虽然 `type` 属性已经足够，但这是一个旧的属性，用于指定脚本语言。9. **nomodule**: 表示脚本仅在不支持 JavaScript 模块的浏览器中执行。5. **charset**: 指定脚本文件的字符集。
2024-09-15 12:56:25
603
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人