javascript
文章平均质量分 62
一个写前端的
一个写前端的
展开
-
vue3.0下如何使用mapState,mapGetters和mapActions
vue3.0下如何使用mapState,mapGetters和mapActions1、新建useMapper.js2、新建useState.js3、新建useGetters.js4、新建useActions.js5、页面中使用vue2.0中使用mapState及mapActions的方式// 使用mapStatecomputed: { ...mapState({ //... }) }methods: { ...mapActions(['fnA', 'fnB'])}vue3.原创 2021-08-26 17:39:56 · 13363 阅读 · 10 评论 -
九宫格抽奖代码实现
转盘抽奖demo核心代码class Lottery { constructor(domId) { this.prizeIndexArr = [0, 1, 2, 5, 8, 7, 6, 3] // 顺时针转动对应的奖品序号 this.maxStep = this.prizeIndexArr.length * 5 // 最大滚动的格子数 this.currentIndex = -1 // 当前滚动到的格子的index this.ste原创 2021-02-03 15:41:29 · 2010 阅读 · 0 评论 -
发布者 - 订阅者模式实现跨组件通信
概念什么是发布者-订阅者模式?举个通俗易懂的例子:微博,大家都用过,我在微博上关注了某个明星,当这个明星发布了动态时,微博会通知我,我关注的这个明星发布了一条动态。这种模式其实就是发布者-订阅者模式,在发布者-订阅者模式中,发布者和订阅者并不会产生联系,而是通过中间介质来桥接两者。就像我和我关注的这个明星并不会产生联系,而是通过微博这个中间层来将明星发布的动态推送给我。我们也可以称这个中间介质为调度中心或消息代理。用过vue的朋友都知道,在vue2.0中,要实现兄弟组件间的通信,有一种方式是通过Ev原创 2021-01-14 16:46:19 · 255 阅读 · 0 评论 -
javascript队列的实际应用场景案例
概念队列是JavaScript中的一种数据结构,遵循先进先出(FIFO / First In First Out)的规则。队列可以理解为食堂排队取餐的场景,先排队的取到餐后先去吃饭。实现class Queue { constructor(items) { this.items = items || [] } // 入列 enqueue = ele => { this.items.push(ele) } // 出列原创 2020-10-27 17:37:57 · 722 阅读 · 0 评论 -
js的事件循环,了解一下?
前言JavaScript从诞生起就是一门单线程的脚本语言,单线程就意味着JavaScript代码在执行的时候,都只会有一个主线程去执行所有的任务。单线程的一个弊端在于,当线程中存在一个耗时非常长的任务时,会容易出现代码阻塞,从而导致页面出现“假死”状态。为了解决这一问题,事件循环机制(Event Loop)就诞生了。一、同步任务和异步任务JavaScript中所有的任务被分为同步任务和异步任务。同步任务:立即执行的任务异步任务:不会立即执行的任务常见的异步任务有setTimeout、原创 2020-08-01 01:05:20 · 249 阅读 · 0 评论 -
react实现转盘抽奖功能
临近618,公司产品需要做促销活动,产品经理提出新需求,要做一个转盘抽奖的功能。接到这个需求时,我的内心其实是拒绝的,奈何,身不由己。做吧!!!UI效果图如下:接到这个任务时,原本是想找个现有的插件去实现,由于需要同时开发h5和微信小程序两个端,苦苦寻觅,终找不到合适的,罢了罢了,还是自己动手,丰衣足食吧!实现原理: 通过css3的 transition 和 transform 两个属性具体实现步骤:1、首先,我们简单定义一个奖品数组,实际开发中是调后台接口获取奖品,以下是为了方便演示cons原创 2020-06-15 17:42:08 · 5269 阅读 · 3 评论 -
vue中的函数式组件
用过react的同学都知道,函数式组件在react中的应用是很流行的,那如何在vue中使用函数式组件呢?什么是函数式组件熟悉react的同学应该都知道,react中的函数式组件其实就是一个接收一些prop的函数,然后返回HTML。vue的函数式组件也是如此。特点无状态:函数式组件本身是没有状态的,也就是没有响应式数据无实例:函数式组件没有实例,也就是没有this上下文写法export default { functional: true, // Props 是可选的 props原创 2020-05-12 22:09:48 · 3779 阅读 · 0 评论 -
js中reduce()的用法
一、语法const arr = ['Jack','Petter','Mark']arr.reduce((prev,current,index,arr)=>{},initValue)prev:上一次回调的调用值,默认是initValue,如果不传initValue,则默认是数组的第一项current:当前正在处理的数组项index:当前正在处理的数组项的索引arr:原数组ini...原创 2020-04-22 16:50:18 · 2798 阅读 · 0 评论 -
浅谈js中的事件冒泡和事件捕获
浅谈js中的事件冒泡和事件捕获一、事件冒泡定义:事件从事件目标开始,逐级往上冒泡,直到最上级。举个例子来讲:页面中存在多个div嵌套,当在所有的div上都加上点击事件时,点击子级div时会依次向上触发父级的点击事件<div class="div1" onclick="alert('111')"> <div class="div2" onclick="alert(...原创 2019-11-07 12:03:16 · 189 阅读 · 0 评论 -
react hooks + canvas实现动态圆环效果
import React, { useRef, useEffect } from 'react';export default (props) => { const { canvasWidth = 160, canvasHeight = 160 } = props const canvasRef = useRef(null) useEffect(() => {...原创 2019-10-15 09:48:55 · 1131 阅读 · 0 评论 -
计算数组中个数最多的元素
计算数组中个数最多的元素let arr = ['1', '1', 2, 2, 2, 'a', 'a', 2, 4, 1, 'a', 3, 'a', 2, 'ad']// 对数组每一项转json字符串,以便比较Object和Arraylet stringifyArr = arr.map(item => { return JSON.stringify(item)})let ne...原创 2019-10-11 11:54:35 · 838 阅读 · 0 评论