ES6的代理模式 语法1const proxy = new Proxy(target, handle) target: 使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理 handle: 一个通常以函数作为属性的对象,用来定制拦截行为 123456789// 例子let obj = {}let proxyObj = new Proxy(obj, 2022-09-13 前端基础 javaScript
vue组合式API相关知识 setupsetup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点 它在创建组件实例,初始化props后调用,从生命周期的角度看,他会在beforeCreate钩子之前被调用 setup会返回一个对象,该对象属性会被合并到组件模板渲染的上下文中。(ref定义的数据会自动解开,无需.value引用) setup(props, context){},接收prop 2022-09-11 日常开发 vue
微信小程序内嵌H5页面,完成微信支付闭环 前言本文介绍如何在小程序中内嵌H5,并完成微信支付的整个流程闭环。我们知道微信H5支付是通过生成特定的支付链接,并跳转到这个链接去完成支付操作的。但在微信小程序中对于内嵌的页面域名具有白名单限制,如果支付链接是第三方的无法做加白处理。 这个时候我们就得换个思路了,该怎么解决呢?咱们往下看。 实现过程小程序入口在微信小程序中新建一个页面,使用web-view组件作为内嵌H5的入口,由于后续支付需要用 2022-09-06 日常开发 微信小程序
长列表优化之虚拟列表 前言虚拟列表是前端长列表优化的一个解决方案,就是将一个需要渲染所以列表项的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样。 使用场景: 在移动端使用下拉加载数据的时候,随着不断从服务端拉取数据,数据列表内容越来越多,导致创建了很多的节点,这个时候vue的diff就需要对比很多次,造成性能消耗和内存占用。 长列表渲染大量节点导致的问题: 占用大量 GPU 资源, 2022-09-01 日常开发 性能优化
了解pinia,它vuex相比有什么不同? Pinia 与vuex都是vue的全局状态管理器,可以说pinia就是vuex5,接下来本文通过vue3的形式来对比一下这两个全局状态管理器有何不同点。 安装12345// vuexnpm i vuex -S// pinia npm i pinia -S 挂载两个状态管理器都需要在main.js中挂载到vue实例上 vuex的挂载过程在src下新建store/index.js目录 1234567 2022-08-26 日常开发 javaScript vuex pinia
前端项目代码提交规范化实践 commitizen规范提交信12// 全局安装commitizenyarn global add commitizen 12// 初始化commitizen init cz-conventional-changelog --save --save-exact 执行后在package.json下会生成以下配置 12345678{ ... "config": { "co 2022-08-19 日常开发 工程化
日常手写代码练习 1、setTimeout模拟实现setInterval题目:使用setInterval 用来实现循环定时调用 可能会存在一定的问题 能用 setTimeout 解决吗? 123456789101112131415function mySetInterval(fn, time) { let timer = null function interval() { fn() t 2022-08-19 日常开发 javaScript
低代码可视化拖拽编辑器实现方案 前言随着业务不断发展,低代码、无代码平台越来越常见,它降低开发门槛、快速响应业务需求、提升开发效率。零开发经验的业务人员通过可视化拖拽等方式,即可快速搭建各种应用。本文主要是讲解低代码可视化拖拽平台前端展示层面的实现逻辑和方案,对于后端逻辑、数据库设计、以及自动化部署等暂时没有涉及。 编码水平一般,提供给小伙伴们一些思路或学习参考。源码地址 效果展示 展示区划分首先我们需要先清晰我们要实现的UI展 2022-08-11 日常开发 低代码
setup语法糖以及pinia的使用 vue3 compositionAPI 相关 (vue3.2 setup语法糖)1、文件结构 vue2中限制template只能有一个根元素,vue3没有限制 2、data123456789101112131415161718<script setup> import { reactive, ref, toRefs } from 'vue' 2022-05-10 前端基础 javaScript vue
前端性能优化 加载优化 减少HTTP请求:尽量减少页面的请求数(首次加载同时请求数不能超过4个) 合并CSS和JS 使用CSS精灵图 缓存资源 使用缓存可减少向服务器的请求数,节省加载时间,所有静态资源都要在服务器端设置缓存 缓存一切可缓存的资源 使用长缓存 使用外联的样式和脚本 压缩代码 减少资源大小可加快网页显示速度,对代码进行压缩,并在服务器端设置GZip 压缩代码(多余的缩进、空格和换 2022-05-06 性能优化 页面加载优化