分类：JS

2021
09-09

详解JavaScript状态容器Redux

详解JavaScript状态容器Redux 目录一、WhyRedux二、ReduxDataflow三、ThreePrinciples（三大原则）四、Redux源码解析4.1、index.js4.2、createStore.js4.3、combineReducers.js4.4、bindActionCreators.js4.5、compose.js4.6、applyMiddleware.js五、从零开始实现一个简单的Redux六、ReduxDevtools七、总结一、WhyRedux在说为什么用Redux之前，让我们先聊聊组件通信有哪些方式。常见的组件通信方式有以下几种：父子组件：props、state/callback回调... 继续阅读 >
2021
09-04

JavaScript实现贪吃蛇游戏

JavaScript实现贪吃蛇游戏 本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下通过JavaScript，我们可以实现贪吃蛇游戏，具体功能如下：（1）通过按上下左右键来改变蛇的移动方向（2）若蛇撞到自己，则游戏结束（3）蛇移动出地图边缘时，会从地图的另一边进来（4）长按方向键，蛇加速移动（5）蛇吃到食物后，重新生成食物完整代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-eq... 继续阅读 >
2021
09-04

如何使用ES6的class类继承来实现绚丽小球效果

目录介绍实现步骤创建canvas画布环境书写小球类Ball实现继承球类(Ball)的MoveBall类实例化小球index.js完整代码总结介绍本效果采用Canvas画布绘制，再利用class类继承实现，实现的效果鼠标在指定Canvas位置移动，会在当前鼠标的位置产生随机颜色的小球，之后小球会慢慢消失。效果图示实现步骤书写HTML创建canvas画布环境书写小球类Ball实现继承球类(Ball)的MoveBall类实例化小球HTML结构<!DOCTYPEhtml><h... 继续阅读 >
2021
09-04

js 数组 find,some,filter,reduce区别详解

区分清楚Array中filter、find、some、reduce这几个方法的区别，根据它们的使用场景更好的应用在日常编码中。Array.findArray.find返回一个对象（第一个满足条件的对象）后停止遍历constarrTest=[{id:1,name:"a"},{id:2,name:"b"},{id:3,name:"b"},{id:4,name:"c"}]//过滤条件functiongetName(val){returnarrTest=>arrTest.name===val}//如果我们是想找到第一个满足条件的数... 继续阅读 >
2021
09-04

如何利用原生JS实现触摸滑动监听事件

前言今天写一个小Demo，有个地方涉及到了左滑右滑的逻辑，本来想着用插件来着，但是想到自己好久没用原生JS写滑动的监听了，所以试着用原生JS来实现了一下，毕竟温故而知新嘛，同时做个记录。先把实现的效果贴出来：构思想要写出丝滑的触摸滑动事件的监听，要考虑以下3个方面的逻辑：距离：滑动距离要大于40时间：滑动时间小于在0.5秒，即500毫秒内完成手指按下，拖动，离开（避免只是手指在屏幕就触发）滑动方向：... 继续阅读 >
2021
09-04

JS如何实现页面截屏功能实例代码

"页面截屏"是前端经常遇到的需求，比如页面生成海报，弹窗图片分享等，因为浏览器没有原生的截图API，所以需要借助canvas来实现导出图片实现需求。可行性方案方案1：将DOM改写成canvas，调用canvas的toBlob或者toDataURL方法即刻上传到七牛云或服务器方案2：使用第三方库html2canvas.js实现canvas，在不更改页面已有DOM的情况下优雅生产canvas解决方案的选择方案1：需要手动计算每个DOM元素的ComputedStyle，然... 继续阅读 >
2021
08-31

使用JS实现简易计算器

使用JS实现简易计算器 使用JS完成简易计算器，供大家参考，具体内容如下要求：输入的值只能是数字，使用正则表达式onchange():值改变时执行事件onblur():鼠标移出时执行事件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>计算器</title></head><body><divstyle="text-align:... 继续阅读 >
2021
08-25

JavaScript WebAPI、DOM、事件和操作元素实例详解

JavaScript WebAPI、DOM、事件和操作元素实例详解 目录WebAPIDOMDOM树DOM获取元素方式document对象属性事件事件的使用步骤事件的类型操作元素操作元素内容操作元素属性操作元素样式排他思想H5自定义属性总结WebAPIAPI：应用程序编程接口，是一些预先定义的函数，由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能WebAP... 继续阅读 >
2021
08-23

详解JavaScript面向对象实战之封装拖拽对象

目录概述1、如何让一个DOM元素动起来2、如何获取当前浏览器支持的transform兼容写法3、如何获取元素的初始位置5、我们需要用到哪些事件？6、拖拽的原理7、我又来推荐思维导图辅助写代码了8、代码实现part1、准备工作part2、功能函数part3、声明三个事件的回调函数9、封装拖拽对象概述为了能够帮助大家了解更多的方式与进行对比，我会使用三种不同的方式来实现拖拽。不封装对象直接实现；利用原生JavaScript封装拖拽对象；... 继续阅读 >
2021
08-23

详解JavaScript堆栈与拷贝

目录一.堆栈的定义二.JS堆栈研究1、栈（stack）和堆（heap）2、基本类型和引用类型3、传值与传址三.拷贝1.浅拷贝2.深度拷贝一.堆栈的定义1.栈是一种特殊的线性表。其特殊性在于限定插入和删除数据元素的操作只能在线性表的一端进行。结论：后进先出（LastInFirstOut），简称为LIFO线性表。栈的应用有：数制转换，语法词法分析，表达式求值等2.队列(Queue)也是一种运算受限的线性表，它的运算限制与栈不同，是两头都有限制，插入... 继续阅读 >
2021
08-23

JavaScript canvas实现代码雨效果

JavaScript canvas实现代码雨效果 本文实例为大家分享了canvas实现代码雨效果的具体代码，供大家参考，具体内容如下先看效果图这个效果图是不是像极了以前电影里面的黑客技术，看起来蛮难的，其实操作起来还是挺简单的。canvas其实就是画布的意思首先我们得有一个画布<body><canvasid="canvas"></canvas></body>再设这样一个背景HTML部分<body><canvasid="canvas"></canvas><div></div></body>CSS部分<style>*{margin:0;... 继续阅读 >
2021
08-22

深入详解JS函数的柯里化

目录一、补充知识点之函数的隐式转换二、补充知识点之利用call/apply封数组的map方法三、由浅入深的柯里化四、柯里化通用式五、柯里化与bind一、补充知识点之函数的隐式转换来一个简单的思考题。functionfn(){return20;}console.log(fn+10);//输出结果是多少？稍微修改一下，再想想输出结果会是什么？functionfn(){return20;}fn.toString=function(){return10;}console.log(fn+10);//输出结果是... 继续阅读 >
2021
08-22

详解JS内存空间

目录概述一、栈与堆二、变量对象与基础数据类型三、引用数据类型与堆内存内存空间管理概述变量对象与堆内存vara=20;varb='abc';varc=true;vard={m:20}在很长一段时间里认为内存空间的概念在JS的学习中并不是那么重要。可是后我当我回过头来重新整理JS基础时，发现由于对它们的模糊认知，导致了很多东西我都理解得并不明白。比如最基本的引用数据类型和引用传递到底是怎么回事儿？比如浅复制与深复制有什么不同？还... 继续阅读 >
2021
08-22

javascript canvas实现雨滴效果

javascript canvas实现雨滴效果 本文实例为大家分享了javascriptcanvas实现雨滴效果的具体代码，供大家参考，具体内容如下先看效果看起来很炫酷，其实就是实现了雨滴的掉落还有最后的圆还是看源码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>*{margin:0;padding:0;}... 继续阅读 >
2021
08-22

用JS实现飞机大战小游戏

本文实例为大家分享了JS实现飞机大战小游戏的具体代码，供大家参考，具体内容如下小的时候玩的飞机大战感觉还蛮神奇，今天自己就学着做了一个先制作好要做好的几步以及背景样式varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");varstart=0;//开始阶段varstarting=1;//开始的加载阶段varrunning=2;//游戏阶段varpa... 继续阅读 >