分类：JS

2021
11-19

JavaScript实现网页版五子棋游戏

JavaScript实现网页版五子棋游戏 本文实例为大家分享了JavaScript实现网页版五子棋游戏的具体代码，供大家参考，具体内容如下学习js的第三天，跟着老师完成的五子棋小游戏，记录学习成果欢迎大佬们一起分享经验，批评指正。本程序主要通过三部分实现：1.棋盘绘制2.鼠标交互3.输赢判断<!DOCTYPEhtml><html><head><title>canvastest</title></head><body><h1>canvas</h1><canvasid="canvas"width="400"height="400"></canvas><scri... 继续阅读 >
2021
11-16

js实现0ms延时定时器的几种方式

目录queueMicrotaskasync/awaitMessageChannel最后附录这两天看到一篇介绍《如何实现准时的setTimeout？》的文章，文章起源于一道面试题：有什么办法让setTimeout准时呀？具体文章内容可查看附录【1】，看完之后，引起了我对setTimeout这个函数的探究兴趣，因此在MDN上重新查阅了相关文档，其中提到【最小延时>=4ms】的一点，因此使用setTimeout不能实现0ms延时的定时器，如果要实现的话，提供了一个参考链接【2】，作者的实现思... 继续阅读 >
2021
11-14

JavaScript canvas实现俄罗斯方块游戏

JavaScript canvas实现俄罗斯方块游戏 俄罗斯方块是个很经典的小游戏，也尝试写了一下。不过我想用尽量简洁逻辑清晰的代码实现。不用过多的代码记录下落方块的模型，或者记录每一个下落方块的x,y。想了下面的思路，然后发现这样很写很简明。俄罗斯方块的7种基本模型：要记录这些模型有很多种办法，可以用记录其相对位置，记录每一个方块的x,y坐标等。自己想了一种思路来记录这7种模型，很简洁，在写左移，右移，旋转功能的时候也方便使用。下面这个数组记录了这些模型。... 继续阅读 >
2021
11-14

JavaScript css3实现简单视频弹幕功能

JavaScript css3实现简单视频弹幕功能 本文尝试写了一个demo模拟了最简单的视频弹幕功能。思路：设置一个<div>和所播放的video的大小一致，把这个div标签蒙在video上面用于放置弹幕。在video的右边放一个<ul>列表用于显示弹幕列表。屏幕上面的弹幕，把内容放在<span>标签里面，一般一行字都是从左边飞到右边，为了简单起见，这个移动就用了CSS3的transition属性。position设置为absolute,那么就用的transition过度left属性，实现弹幕的移动。当然要注意设置其父元素... 继续阅读 >
2021
11-14

JavaScript分页组件使用方法详解

JavaScript分页组件使用方法详解 分页组件是web开发中常见的组件，请完成pagination函数，在id为jsPagination的DOM元素中完成分页的显示部分，需求如下1、最多连续显示5页，居中高亮显示current页（如demo1所示)2、total为0时，隐藏整个元素（如demo2所示）3、如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素（如demo3所示）4、当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)5、total、current均为正整数，1... 继续阅读 >
2021
11-05

js实现axios限制请求队列

目录背景是：会造成什么情况呢？背景是：在实际开发中，可能会遇到网络问题或者查询量比较大的情况，上一个请求还没有完成，用户就发起了下一个请求。会造成什么情况呢？但是同一个请求多次发送到服务器，无疑是对服务器的一种压力，所以需要在已经优化服务器过查询速度后，以及用户网络情况比较差的条件下，在前端进行请求限制。axios自带的cancelToken可以帮我们实现这个需求，并且提供给了我们一个现成的apiaxios.CancelToken... 继续阅读 >
2021
11-01

js判断移动端横竖屏视口检测实现的几种方法

目录1、不同视口的获取方法2、JavaScript检测横竖屏3、CSS检测横竖屏4、meta标签属性设置5、meta标签属性设置设置刘海屏&底部小黑条1、不同视口的获取方法//获取视觉视口大小（包括垂直滚动条）letiw=window.innerWidth,ih=window.innerHeight;console.log(iw,ih);//获取视觉视口大小（内容区域大小，包括侧边栏、窗口镶边和调整窗口大小的边框）letow=window.outerWidth,oh=window.outerHeight;console.log(ow,oh... 继续阅读 >
2021
10-25

js与css的阻塞问题详析

目录DOMContentLoaded和loadjs阻塞了什么css阻塞了什么优化总结DOMContentLoaded和load我们先了解两个事件，有助于后面的分析。load事件：load应该仅用于检测一个完全加载的页面当一个资源及其依赖资源已完成加载时，将触发load事件。也就是说，页面的html、css、js、图片等资源都已经加载完之后才会触发load事件。DOMContentLoaded事件：当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需... 继续阅读 >
2021
10-20

利用JavaScript差集实现一个对比小工具

前言在工作中需要每周统计人员提交材料情况又不想一个一个复制黏贴查找只好写一个小工具帮自己查找谁没提交材料先把页面搞一搞<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>textarea{/*border:none;*/width:49%;... 继续阅读 >
2021
10-20

JavaScript中的AOP编程的基本实现

AOP简介AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来，这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。把这些功能抽离出来之后，再通过“动态织入”的方式掺入业务逻辑模块中。面向切面编程给我们提供了一个方法，让我们可以在不修改目标逻辑的情况下，将代码注入到现有的函数或对象中。虽然不是必须的，但注入的代码意味着具有横切关注点，比如添加日志功能、调试元数据或其它... 继续阅读 >
2021
10-20

JavaScript中new操作符的原理示例详解

new的用处new的作用是通过构造函数来创建一个实例对象，该实例与原型和构造函数之间的关系如下图所示：先来总结一下创建一个空对象空对象的内部属性__proto__赋值为构造函数的prototype属性将构造函数的this指向空对象执行构造函数内部代码返回该新对象详细说明执行new操作时会依次经过以下步骤：1、创建一个空对象空对象是Object的实例，即{}。letobj={}2、空对象的内部属性__proto__赋... 继续阅读 >
2021
10-15

关于var在for循环遇到的问题解决

前言var是ES5定义变量的一种声明方式，一直听说var声明变量，存在循环变量泄漏为全局变量问题，但总是想不明白这个“全局”有什么影响，还有，到底什么时候输出的结果是递增/减的值，什么时候输出一样的值，也不清楚。问题复现for(vari=1;i<=5;i++){setTimeout(functiontimer(){console.log(i)},i*1000)}预期效果：12345打印结果：66666解决方式闭包for(vari=1;i<=5;i++){(function(j){... 继续阅读 >
2021
10-15

JS实现数组过滤从简单到多条件筛选

目录单条件单数据筛选单条件多数据筛选多条件单数据筛选多条件多数据筛选知识点1:Object.key()获取数组索引或者对象属性知识点2:js里的falsy知识点3:Array.every与Array.some的区别知识点4:数组的深拷贝与浅拷贝想一想：递归算法的优化在上家公司工作的时候，有一个需求是在前端部分完成筛选功能，一次拿到所有数据，然后根据条件筛选。通常情况下筛选是后台给接口，在数据量不大的情况下，也有人可能会遇到前端筛选这样的... 继续阅读 >
2021
10-13

JavaScript中变量提升和函数提升实例详解

js执行词法分析阶段：包括分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的js代码转成可以执行的代码。执行阶段变量提升只有声明被提升，初始化不会被提升声明会被提升到当前作用域的顶端🌰1:console.log(num)varnumnum=6预编译之后varnumconsole.log(num)//undefinednum=6🌰2:num=6console.log(num)varnum预编译之后varnumnum=6console.log(num)//6... 继续阅读 >
2021
10-12

浅谈前端JS沙箱实现的几种方式

目录前言iframe实现沙箱diff方式实现沙箱基于代理(Proxy)实现单实例沙箱基于代理(Proxy)实现多实例沙箱结束语参考前言在微前端领域当中，沙箱是很重要的一件事情。像微前端框架single-spa没有实现js沙箱，我们在构建大型微前端应用的时候，很容易造成一些变量的冲突，对应用的可靠性面临巨大的风险。在微前端当中，有一些全局对象在所有的应用中需要共享，如document,location,等对象。子应用开发的过程中可能是多个团队在做，很难... 继续阅读 >