大前端学习
文章平均质量分 60
收集泛前端常用代码,包括应用场景,介绍和代码实现等。
猩猩G
我是大学生,热爱大前端技术,不断学习中。水平有限,请多指正。
展开
-
鸿蒙读取本地文件同步,异步的优化问题
在大多数场景下 , 不要使用xxxSync同步方法 , 而要使用 await xxx 方法。(不仅arkTs ,别的语言也是类似)区别在于:Sync方法会等待文件读取完成,阻塞线程。await xxx方法也会等待文件读取完成,但不会阻塞线程。原创 2024-07-14 13:39:18 · 393 阅读 · 0 评论 -
鸿蒙应用开发 Uint8Array 转 ArrayBuffer
onInterceptRequest 方法里 ,WebResourceResponse.setResponseData() 可以直接传入 Uint8Array.buffer 转换来的 ArrayBuffer , 然后可代替 $Rawfile() 方法获取的resource资源。如果 arr 为 Uint8Array类型 , 那么通过。原创 2024-05-27 16:19:40 · 990 阅读 · 1 评论 -
鸿蒙获取指定模块的resources文件夹的rawfile资源
rawfile-path 是 resources / rawfile 文件夹下的 文件路径。注意 , 获取的资源类型是 Uint8Array ,而不是 Resource。原创 2024-05-27 16:08:19 · 544 阅读 · 0 评论 -
鸿蒙使用pdf.js加载pdf的方案和其定制化
经过验证,点击pdf.js工具栏的打开按钮 ,然后通过web组件的onShowFileSelector方法可以监听到h5的input file,从而调起鸿蒙本机的文件管理器用于选择文件。这个项目的实现非常好,但是经过验证,这个基于pdf.js的项目只支持包内本地pdf和在线pdf链接。然后我首先通过runJavaScript方法调用在viewer.html的script标签里自定义的openFIle函数,企图把鸿蒙读取的文件对象直接传过去。但由于其功能和样式的自定义程度受限,所以这种方案目前的优先级不高。原创 2024-05-24 17:44:52 · 2107 阅读 · 8 评论 -
Flutter 使用 PopupRoute 实现一个高度自定义的Popup组件
Positioned widget 内部又包含一个GestureDetector,它的 child 是传入的child参数,当用户点击child时,会调用MyPopup.closePop方法关闭弹出层。Stack中包含两个子组件,一个是用户传入的child,另一个是小箭头,箭头的方向和颜色由direction和color参数决定。此组件接受三个参数:child(弹出层的内容)、right(弹出层距离屏幕右侧的距离)和top(弹出层距离屏幕顶部的距离)。这个组件需要自己手动控制箭头和矩形框的位置。原创 2024-05-17 15:44:57 · 930 阅读 · 0 评论 -
解决使用Android Studio开发 Flutter Plugin时,安卓native部分代码报错的问题。
然后在根项目编写flutter端代码,在单独的安卓项目里编写原生端代码就行了。在使用Android Studio新建Plugin项目之后。在build.gradle的添加以下代码即可。会发现安卓端的代码依赖找不到。原创 2024-04-22 09:56:33 · 351 阅读 · 2 评论 -
鸿蒙实现多行文本的展开/收起效果
然后遍历拼接每一个字符,再通过measureText api计算当前已拼接的字符串单行时的宽度。问题的关键在如何实现在Text文本后不换行再追加文本 和 点击展开后如何动态控制展开的高度,从而以相同的底部边距显示不同高度的文本。在鸿蒙应用开发中,可以给Text组件设置 width、maxLines、textOverflow来实现多行文本超过宽度显示三个点。Text组件宽度*maxLines的行数-要在文本末尾拼接的字符串(...展开)的单行计算宽度。但是问题来了,如何实现在。如果计算结果大于等于。原创 2024-04-05 15:51:47 · 721 阅读 · 2 评论 -
父元素设置了padding,单独取消一个子元素的左右边距
通常要给弹窗添加内边距padding。但是这样分隔线左右也会出现边距。需要单独取消它的边距。在开发中可能遇到这种场景,一个包括分隔线的弹窗,分隔线上方是内容,下方是按钮。此时较为方便的做法是把分隔线左右的外边距margin设置为。- (父元素左右padding值)。此时分隔线成功分隔了整个弹窗。原创 2024-03-24 14:36:37 · 364 阅读 · 1 评论 -
Js实现深拷贝
obj] 创建了一个新的数组,但是数组中的元素如果是基本类型,则新数组会拥有这些元素的独立副本;如果数组元素是引用类型,新数组则会复制这些引用(内存地址),而不是复制对象本身。所以仍需要对数组继续遍历递归。可以看到修改深拷贝的b对象并不影响原对象bbb。尽管通过newObj = [原创 2024-03-10 18:54:10 · 395 阅读 · 1 评论 -
管道函数和组合函数
是一种将多个函数从左到右串联起来执行的函数组合方式,即将前一个函数的输出作为后一个函数的输入,依次传递直至最后一个函数。然后返回接收一个参数为初始值val的函数,这个函数的返回值为对接收的函数数组funs进行reduce迭代的结果。1. 可读性强:通过管道和组合操作可以让代码看起来像是一个流畅的工作流程,更容易理解每一步骤如何影响数据流。1. 性能开销:过多的函数调用可能导致额外的性能损失,尤其是在涉及到大量数据或复杂计算的情况下。形式上类似 F( G ( H (x) ) )原创 2024-03-07 19:43:16 · 480 阅读 · 0 评论 -
列表无限滚动加载——鸿蒙实现(List组件api实现)
不同于web开发,鸿蒙开发内置了大量的官方组件和API方便开发者快速开发。所以不需要像web那样监听浏览器滚动距离。第一个api可以在滚动到底部之前触发,第二个api只能在完全滚动到底部时才触发。可根据实际业务选择,个人更推荐第一种,可提高用户体验。注意我的版本:API 9 (请以你开发时的版本为准)通过查阅官方文档,可发现两个API。原创 2024-03-01 16:05:15 · 912 阅读 · 0 评论 -
列表无限滚动加载——安卓JetPack实现(LazyColumn+LazyListState实现)
LazyListState 是 Jetpack Compose 中用于跟踪LazyColumn 或LazyRow 列表滚动状态的一个组件。通过LazyListState,可以在构建列表时传递给列表组件,然后通过访问属性来获取列表的滚动状态信息,例如列表的滚动偏移量、可见项的信息等。最后一个可见项的索引是否等于列表中最后一项的索引, 如果相等则意味着已经滚动到了列表的底部。显然跟web一样,该条件会连续多次触发,此时需要对其进行防抖优化。防抖方式已发布,这里不再赘述。原创 2024-03-01 16:01:49 · 777 阅读 · 0 评论 -
列表无限滚动加载——web实现(监听Scroll滚动距离)
这时就需要节流或者防抖了。这里选择节流的方式,通过节流,可以限制滚动事件触发请求的频率,确保在用户滚动过程中较为平滑地加载新内容,避免过于频繁地发送请求对服务器造成不必要的压力,同时也提升了用户体验。而实现无限滚动加载的方式有很多,可以通过第三方web组件库的相关api来实现,也可以通过原生js监听滚动距离来实现。在实际代码中可以把页面内容高度适度减去一定的像素,留出加载数据的提前量,避免用户滚动到底部时等待加载数据。在用户浏览网页时,滑动条滚动到底部时加载新数据是常见的业务,会给用户带来良好的体验。原创 2024-03-01 16:00:40 · 1046 阅读 · 0 评论 -
节流(Throttle)
节流是一种前端优化事件处理性能的技术,主要用于控制一段时间内某个函数的执行频率,确保该函数不会因为频繁触发而过于密集地被执行。如果事件连续快速地被触发多次,节流函数会限制执行次数,在规定的时间间隔内只执行一次。原创 2024-02-29 16:05:38 · 1552 阅读 · 0 评论 -
防抖(Debounce)
防抖是一种前端常用的优化技术,用于防止连续多次触发事件。从而减少不必要的计算、网络请求或者页面渲染,提高性能。当一个事件被触发时,防抖函数并不会立即执行,而是会等待一段指定的时间。如果在这段时间内该事件再次被触发,则会取消之前设定的执行计划,并重新开始计时。这样,只有当事件停止触发并经过了预设的时间后,才会真正执行。通过防抖,可以避免在用户快速连续地进行操作时(例如连续快速点击按钮),服务器或浏览器因为接收到过多无意义的重复请求而造成的性能瓶颈,从而提高页面性能和用户体验。原创 2024-02-29 16:05:00 · 3379 阅读 · 0 评论