世界和平��-CSDN博客

原创前端滚动分页

而当我们在移动端中，分页组件就显得有点不符合逻辑和正常的交互体验，所以滚动分页常常成为我们的一种选择，即页面滚动到底部时才能加载更多数据，以免一次加载太多数据造成性能问题。因此需要将滚动分页做成可复用易维护的模块，以提高效率。使用了窗口的滚动事件会对浏览器或者程序运行载体有一定的性能影响，如果导致页面卡顿的情况，我们可以通过使用防抖和节流，减少对页面滚动的监听频率。1、常规的实现方案，监听滚动事件，判断页面滚动距离和窗口大小，距离顶部位置的高度，根据判断生成下一组数据并插入，直至数据量为空。

2023-11-05 22:25:33 600

原创关于Babylon.js的一些了解

谈到babylon.js就不得不提到three.js。在3D Web开发领域，Babylon.js和Three.js被视为两种最流行的JavaScript库，用于创建引人入胜的3D体验。它们都提供了强大的功能和活跃的社区，但它们具有不同的优点和缺点。在这篇综合比较中，我们将深入探讨Babylon.js和Three.js之间的核心差异。Babylon.js和Three.js都是JavaScript库，可以让开发者在浏览器中创建3D图形和交互式Web体验。

2023-10-29 21:29:13 419

原创 localforage-本地存储的优化方案

前端本地化存储算是一个老生常谈的话题了，我们对于 cookies、Web Storage（sessionStorage、localStorage）的使用已经非常熟悉，在面试与实际操作之中也会经常遇到相关的问题，但这些本地化存储的方式还存在一些缺陷，比较明显的缺点如下：存储量小：即使是web storage的存储量最大也只有 5M存取不方便：存入的内容会经过序列化，当存入非字符串的时候，取值的时候需要通过反序列化。

2023-10-22 21:06:51 442

原创 JS数组方法总结

接收两个参数，第一个为回调函数，回调函数有四个参数，第一个参数为上一次回调函数return的结果，首次默认为第二个参数值，如果没有第二个参数值，则默认当前数组下标为0的参数，第二个参数为当前元素，第三个为当前索引值，第四个为数组本身，reduce的第二个参数指定一个默认值，可选。可以选择删除数组中的某一个值，也可以在数组中的某个位置添加一些数据，接收可选参数，三个或以上的参数，第一个为截取的索引位置number类型，第二个截取的个数number类型，第三个或更多实在截取位置添加的参数，可以是任何类型。

2023-10-15 21:30:29 153

原创 Vue项目中可能存在的问题和解决方案

相比其他的框架来说，Vue中更容易产出不合格代码；因为Vue中的options就是一个大对象，导致js本身的很多检测都失效了，比如一个函数没有用到的话会“变灰”，template中代码提示比较少，较多的mixins等等；遇到不合格代码，大多数人第一反应就是这谁写的代码这么差，其实大多数公司大多数人至少曾经都写过一些不合格代码，有不合格代码很正常，问题在于怎么快速梳理出业务逻辑，防止在迭代新需求时引发bug，在富有余力的情况下可以进行局部重构，渐进式优化屎山代码；

2023-09-17 22:00:56 499 1

原创 Vue3的新特性总结

首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法。

2023-09-10 18:48:50 439 1

原创 CSS中的一些强大的属性和实用技巧

不知道大家平时业务开发中有没有碰到像上图一样的吸顶的需求：标题在滚动的时候，会一直贴着最顶上。这种场景实际上很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。如果让大家自己动手做的话，是不是会用 js 结合 css 来实现呢？以前确实是这样的，直到后来 position 属性新增了一个属性值 sticky ，前端程序员才迎来了小春天。</</</</</

2023-09-03 20:19:30 76

原创 Vue状态管理之Pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。简洁而强大的 API：Pinia.js 提供简洁而强大的 API，使得状态管理变得更加直观和易于理解。它采用类似于 Vuex 的概念，通过定义和使用 store 实例进行状态的管理和共享。

2023-08-27 22:37:42 175

原创 Cesium之水流模型

Cesium之水流模型

2023-08-20 22:06:02 1354 4

原创关于Cesium的常见需求整理之点位和弹窗（点位弹窗）

①在Cesium中，每个自定义的地图元素被视为一个entity对象，如果我们要添加点位到地图上，那就必须先创建一个entity对象。以上代码我们创建了一个entity对象，只需要给予一个坐标参数就可以创建成功。②但是，仅仅只是一个坐标点在一般情况下是没办法满足我们的需求的，大多数时候我们都需要为我们的点位添加一个icon图标或者点位作为指示。这里就需要用到它另外一个参数，billboard。③有时候我们还想在点位图标下方添加简短的文本名称，这个时候可以使用label这个参数④至此，常用的点位设置已经完

2023-08-13 19:56:19 2308 19

原创前端中的浅拷贝和深拷贝

JS的浅拷贝与深拷贝主要是作用于多层级数组或对象中。浅拷贝是只复制创建数组或对象的第一层，其他层级和原数组或对象拥有相同地址值，因此修改浅拷贝的数组或对象的深层的数值就会影响原数组或对象的值。而深拷贝则是拷贝一个全新的数组或对象，每一个层级都在堆内存中开辟了新的空间，和原数组或对象相互不影响。

2023-07-30 23:37:15 232

原创关于vue3为何要使用Vite，什么是vite

vite是新一代前端构建工具，能够显著提升前端开发体验。他是使用rollup打包你的代码，是开箱即用的，同时也提供了丰富的插件api,带来了高度的可扩展性。可以构建vue，react 等项目。

2023-07-23 23:15:51 1562

原创如何在苹果商店发布App？

众所周知，苹果对于自家产品的安全问题十分重视，他们有严格的一套审核标准和流程，当我们想要在苹果商店发布一款App的时候就需要经过重重艰难险阻，克服不少繁杂的问题去完成这项工作。另外有一点需要注意的是，发布苹果App需要一个苹果开发者账号，年费￥688，首先请准备好该账号后才可以发布，同时以下讲解是基于mac环境下的发布，没有mac环境无法将app打包文件-ipa文件上传到商店管理中心。讲到这里可以得出，需要以下这些条件才可以发布App：①Ipa文件②mac环境（或者第三方上传ipa平台）

2023-07-09 22:47:09 459

原创如何在小程序中引入使用vant框架

在微信小程序的原生组件较少的背景下，通常我们在开发微信小程序的时候则往往会使用该框架作为主体的UI框架进行开发，省时省力，大大缩短了开发的周期。由于小程序的环境和普通的Vue项目大不相同，所以想要在小程序中引入vant框架并不能直接用npm去直接构建，它稍微会更麻烦些，所以接下来的内容会详细介绍一下如何在微信小程序中引入使用Vant。关于这个文件的修改，主要是看我们用的小程序模板，不同模板生成的文件目录不一样，新版的一些模板目录可能会导致小程序找不到我们的npm包位置，所以需要对这个文件做一些调整。

2023-07-01 22:02:02 9289 5

原创在Vue项目中使用openlayers开发GIS项目

说起点位不得不提到feature对象,feature可以理解成是我们自定义在地图上添加的元素,所以要把点位信息赋予给feature,然后再把feature添加到地图上。地图的初始化完成后，它只是一个具备了地图API的容器，在页面上的显示依然是一片空白，这个时候我们就需要为它添加图层，展示我们所需要的地图，这里以天地图图层作为例子。地图上添加了各种各样的元素之后,我们还想要能够地图根据我们的反馈,给我们展示对应的信息,此时需要添加可以跟地图交互的代码。

2023-06-25 22:05:53 1320

原创如何正确地使用ES6提高我们的代码质量（二）

有时候我们要把某个变量的传到对象中，总是声明重复含义的变量名，这样对代码阅读性会产生一定的影响，用以下这种方式即可避免。通过这样的方式可以把一个已经存在的对象在声明新变量的时候展开，从而构建出一个全新的，符合我们需要的对象。深度解构，跟前面的一个例子是一样的，这里与函数的默认参数结合，实现了更好的默认对象参数的声明方式。等同于削弱了apply的作用，减少一些不太便捷的方式，新增了一种更新更优的解决方案。这个API可以根据数组对象中参数的值为条件，提取符合条件的对象元素。多层解构，层层嵌套。

2023-06-18 20:24:06 200

原创 Vue项目中通过插件pxtorem实现大屏响应式

因为设计图一般是给一个固定的尺寸，所有元素都统一以px为单位提供，所以一般情况下我们为了尽可能还原设计图，都一一对应地按同样的数值去实现页面，最后为了高效率自动化地将对应的px都转化为rem，所以我们必须使用这款插件。rem单位代表的是根节点的font-size大小，所以当我们在页面上使用rem去替代px的时候，就可以通过修改根节点font-size的值，动态地让页面上的元素根据不同浏览器宽高下去实现变化。作用：根据浏览器的可视窗口大小，动态地去设置根节点font-size的值，也就是rem的基准值。

2023-06-04 19:31:57 2830

原创如何正确地使用ES6提高我们的代码质量

相信每个前端工程师，或者了解前端的人都知道ES6。它是js的一次巨变，它为我们开发js前端项目的时候带来了许多更好的去书写代码的方式。但是很多时候我们可能都没有过度地去关注优化代码这一块内容，哪怕有也只是注意到了一些比较大众化，比较常见的东西，比如let和const、箭头函数、解构赋值……。这一篇文章将会简单直观，清晰明了地阐述ES6的一些变革和它们的真正使用方式。

2023-05-28 21:25:14 397