分类：JS

2021
07-01

如何理解JavaScript模块化

目录1.浏览器支持2.export导出模块3.import导入模块4.创建模块对象5.exportimport中转站6.动态加载模块1.浏览器支持使用JavaScript模块依赖于import和export，import和export的浏览器支持程度是最新的浏览器版本都是支持的，但IE和旧版本的浏览器不支持，因此若想兼容IE和旧版本的浏览器基本就不能使用了。export和import是成对出现，配合工作的JS模块化是各种JS框架学习的前提基础import和export语句... 继续阅读 >
2021
07-01

JS如何实现基于websocket的多端桥接平台

目录1.要调试什么2.websocket的特性3.建立socket连接3.1如何创建房间3.2客户端的断线重现机制3.3心跳检测4.进行接口的调试4.1接口的调试4.2历史记录的存储5.新闻客户端内jsapi的调试6.总结6.1为什么要手动输入serverId6.2如何保证一个客户端的socket请求都进入到同一个进程中6.3多进程之间的通信1.要调试什么我们主要要知道调试什么，最终回去到什么样子的结果：1.调试接口，传入接口地址，即可获取对应的... 继续阅读 >
2021
07-01

详解JS中你不知道的各种循环测速

目录前言1.for循环2.while循环和do-while循环3.forEach、map和reduce循环3.1forEach的简要介绍3.2forEach等的测速4.for-of4.1for-of的简要介绍4.2for-of的循环测速5.for-in循环6.总结前言在测试循环速度之前，我们先来创建一个有100万数据的数组：constlen=100*10000;constarr=[];for(leti=0;i<len;i++){arr.push(Math.floor(Math.random()*len));}测试环境为：1.电脑：iMac(10.13.6... 继续阅读 >
2021
07-01

JS带你深入领略Proxy的世界

目录1.Proxy的基本结构2.Proxy与Reflect3.代理数组4.代理函数5.一些简单的应用场景5.1统计函数被调用的上下文和次数5.2实现一个防抖功能5.3实现观察者模式6.Proxy与Object.defineProperty的对比6.1Object.defineProperty的优劣6.2Proxy的优劣7.总结1.Proxy的基本结构Proxy的基本使用方式：/***target:表示要代理的目标，可以是object,array,function类型*handler:是一个对象，可以编写各种代理的方... 继续阅读 >
2021
07-01

JS如何让你的移动端交互体验更加优秀

目录1.即时反馈1.1按钮的即时反馈1.2持续性的反馈1.3页面初始化1.4数据的展示2.行为跟随2.1点击按钮后呼起弹窗2.2列表中有对象变动时2.3丝滑的滑动跟随3.考虑移动设备的握持姿势3.1避免滚动穿透3.2原生select标签的使用4.良好的兜底策略4.1全屏沉浸式页面应当保持关闭操作4.2永远不要相信后台一直很稳定4.3懒加载5.总结1.即时反馈我们在玩游戏的过程中，通常都会遇到一个词：“打击感”，通俗的理解就是我们做... 继续阅读 >
2021
07-01

如何实现axios的自定义适配器adapter

目录1.适配器要实现的功能1.1promise和工具1.2响应的格式1.3超时设置1.4主动取消请求2.编写自定义适配器3.将适配器添加到axios中4.总结1.适配器要实现的功能我们在基于axios实现额外的数据模块时，应当与axios的模式进行对齐。因此在返回的数据格式上，实现的功能上尽量保持一致。1.1promise和工具所有的适配均应当实现为Promise方式。而且，有些功能的实现，axios将其下放到了适配器中自己进行实现，例如... 继续阅读 >
2021
07-01

JavaScript如何利用Promise控制并发请求个数

一、场景假设现在有这么一种场景：现有30个异步请求需要发送，但由于某些原因，我们必须将同一时刻并发请求数量控制在5个以内，同时还要尽可能快速的拿到响应结果。如图所示：上图这样的排队和并发请求的场景基本类似，窗口只有三个，人超过三个之后，后面的人只能排队了。二、串行和并行串行：一个异步请求完了之后在进行下一个请求并行：多个异步请求同时进行串行举例：varp=function(){returnnewPromi... 继续阅读 >
2021
07-01

详解操作cookie的原生方法cookieStore

目录1.平时如何操作cookie2.新方式cookieStore2.1基本方法2.2设置cookie2.3获取cookie2.4获取所有的cookie2.5删除cookie2.6监听cookie的变化3.总结1.平时如何操作cookiedocument.cookie能获取到当前域所有的cookie字符串。每个cookie用分号进行隔开：document.cookie;//"a=1;b=2;c=wenzi"操作cookie，均是在操作document.cookie。如下面就是我常用的一段代码：/***写cookies*@param{string}na... 继续阅读 >
2021
07-01

如何使用JS中的webWorker

目录一、webWorker之初体验二、webWorker之常用ＡＰＩ1、postMessage(data)2、terminate()3、message4、error三、worker上下文四、关于worker一、webWorker之初体验所以，JavaScript是单线程也是有背景的。如下：<!DOCTYPEhtml><head><title>singleThread</title><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/></head><body><script>//添加到任务队列中... 继续阅读 >
2021
07-01

js如何构造elementUI树状菜单的数据结构详解

背景说明elementUI中自带树状菜单，就是数据结构有点复杂，偏向json风格。数据库中菜单数据是二维表格，通过parentPk定义上下级，是list型。需要把list转换成tree的结构。elementUI树状菜单的数据结构每个节点有4个属性，id、label、newVal、children数组；通过children数组包含关系标示上下级。vartreeData={id:1,label:'一级1',newVal:"",children:[{id:4,label:'... 继续阅读 >
2021
07-01

JavaScript中实现new的两种方式引发的探究

JavaScript中实现new的两种方式引发的探究 前言当你new一个构造函数时发生了什么？“众所周知”的三步：创建一个空对象，将它的引用赋给this，继承函数的原型；通过this将属性和方法添加至这个对象；最后返回this指向的新对象，也就是实例。一般来说在js中大概是这样的：functionMynew(parent,...rest){letobj={};obj.__proto__=parent.prototype;letres=parent.apply(obj,rest);returntypeofres=="object"?res:obj;}上面提到的“空对象”只是简称。事... 继续阅读 >
2021
07-01

Spring Boot访问静态资源css/js,你真的懂了吗

Spring Boot访问静态资源css/js,你真的懂了吗 目录一、前言二、SpringBoot访问静态资源的默认目录2.1classpath目录下-访问默认文件夹名为static2.2ServletContext根目录下(src/main/webapp)-webapp就是默认访问文件夹三、SpringBoot访问静态资源解决方案3.1第一种方案（推荐）3.2第二种方案一、前言我们用SpringBoot搭建Web应用时（如搭建一个博客），经常需要在Html中访问一些静态资源，比如：css样式；js脚本；favicon.ico图标等；而... 继续阅读 >
2021
06-23

JS使用reduce()方法处理树形结构数据

定义reduce()方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。reduce()与forEach()、map()、filter()这些方法一样，也会对数组中的每一项进行遍历，但是reduce()可以将遍历的前一个数组项产生的结果与当前遍历项进行运算。语法array.reduce(function(prev,cur,index,array){...},init);回调函数中的参数：prev必需。表示调用回调时的返回值，或者初始值init。cur... 继续阅读 >
2021
06-23

原生js编写贪吃蛇小游戏

本文实例为大家分享了js编写贪吃蛇小游戏的具体代码，供大家参考，具体内容如下刚学完js模仿着教程，把自己写的js原生小程序。HTML部分<!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><linkrel="stylesheet"href="./css/index.css"></... 继续阅读 >
2021
06-23

原生Js实现的画廊功能

  原生Js实现画廊功能，点击图片，在下方出现相应放大图片。给a标签绑定onclick点击事件。这里上方的小图和下方将要展示大图，都是同一张图片，只是上下两个img的style中设置了不同的width和heigth。（如果不想设置width、height，另一种方法就是将a标签里src的图片存成大图，img展示的是小图。）通过Js点击事件结合css实现大图显示或隐藏，切换图片  具体如下图，代码附上第一种<htmllang="en"><head... 继续阅读 >
2021
06-23

原生Js 实现的简单无缝滚动轮播图的示例代码

  简单无缝滚动轮播图存在很多漏洞，就是后期增加图片时会很不方便，需要改动的地方也很多，耦合性也很强，只适用于一部分程序，所以我们可以通过改动图片结构和计算折算点的方式，升级代码。    原简单的滚动轮播代码<html><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-s... 继续阅读 >