分类：js

2021
06-05

如何用JS解析剪切板里的excel内容

前言这次记录的是昨晚一个想法：把excel内容复制到剪切板并转成自己想要的json格式，核心是要把excel内容转json，这部分主要看excel的格式和json如何业务的映射，不展开。倒是通过实践，收获了剪切板的一些知识点。注：因为只是为了自己的小工具实现，不考虑兼容，在chrome下实践整个步骤是：从一封有内容的excel里，选中内容，ctrl+c复制到剪切板（刚好我的内容就是整张表，ctrl+A就可以选中内容）粘贴到web页面，js监听p... 继续阅读 >
2021
06-05

Javascript之JSBridge初探

JSBridge的起源近些年，移动端普及化越来越高，开发过程中选用Native还是H5一直是热门话题。Native和H5都有着各自的优缺点，为了满足业务的需要，公司实际项目的开发过程中往往会融合两者进行Hybrid开发。Native和H5分处两地，看起来无法联系，那么如何才能让双方协同实现功能呢？这时我们想到了Codova，Codova提供了一组与设备相关的API，是早期js调用原生代码来实现原生功能的常用方案。不过JSBridge真正在... 继续阅读 >
2021
06-05

JS装饰者模式和TypeScript装饰器

装饰者模式介绍装饰者模式（DecoratorPattern）也称为装饰器模式，在不改变对象自身的基础上，动态增加额外的职责。属于结构型模式的一种。使用装饰者模式的优点：把对象核心职责和要装饰的功能分开了。非侵入式的行为修改。举个例子来说，原本长相一般的女孩，借助美颜功能，也能拍出逆天的颜值。只要善于运用辅助的装饰功能，开启瘦脸，增大眼睛，来点磨皮后，咔嚓一拍，惊艳无比。经过这一系列叠加的装饰，你还是你，长相不增... 继续阅读 >
2021
06-05

JS彻底弄懂GMT和UTC时区

前言格林威治时间、世界时、祖鲁时间、GMT、UTC、跨时区、夏令时，这些眼花缭乱的时间术语，我们可能都不陌生，但是真正遇到问题，可能又不那么确定，不得不再去查一查，处理完可能过段时间又忘记。今天，我们彻底来梳理一下它们。一、GMT什么是GMTGMT（GreenwichMeanTime），格林威治平时（也称格林威治时间）。它规定太阳每天经过位于英国伦敦郊区的皇家格林威治天文台的时间为中午12点。GMT的历史格林威治皇家天文台为了海上... 继续阅读 >
2021
06-05

JS使用canvas技术模仿echarts柱状图

canvas画布是html5中新增的标签，可以通过js操作canvas绘图API在网页中绘制图像。百度开发了一个开源的可视化图表库ECharts，功能非常强大，可以实现折线图、柱状图、散点图、饼图、K线图、地图等多种图表。很多项目都有使用过ECharts开发过图表功能。本实例教程使用原生js教你开发一个仿ECharts的柱状图。学习本教程之前，读者需要具备html和css技能，同时需要有简单的JavaScript基础。按照ECharts的开发方法，图表都是生成在... 继续阅读 >
2021
06-05

JS ES6展开运算符的几个妙用

1.添加属性复制对象的同时，为其添加新的属性。例子中复制了user对象到userWithPass，并添加了password属性。constuser={id:110,name:'KaysonLi'}constuserWithPass={...user,password:'Password!'}user//=>{id:110,name:'KaysonLi'}userWithPass//=>{id:110,name:'KaysonLi',password:'Password!'}2.合并多个对象利用...可以合并多个对象到一个新的对象。part1和part2合并到user1：constpart... 继续阅读 >
2021
06-05

JavaScript实现简单图片切换

JavaScript实现简单图片切换 本文实例为大家分享了JavaScript实现简单图片切换的具体代码，供大家参考，具体内容如下下边给出几种方法进行图片切换：方法一（小白专用款！简单易懂）下边附上代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>图片切换2</title><styletype="text/css">*{padding:0;margin:0;}#box{border:1pxsolid#ccc;... 继续阅读 >
2021
06-05

何时使用Map来代替普通的JS对象

1.Map接受任何类型的键如前所述，如果对象的键不是string或symbol，JS将隐式地将其转换为字符串。幸运的是，map的键类型没有问题constnumbersMap=newMap();numbersMap.set(1,'one');numbersMap.set(2,'two');[...numbersMap.keys()];//=>[1,2]1和2是numbersMap中的键，这些键的类型（数字）保持不变。可以在mpa中使用任何键类型:数字、布尔值、字符串和symbol。constbooleansMap=newMap();booleansMap.set(true,... 继续阅读 >
2021
06-05

详解Js模块化的作用原理和方案

一、模块化概念将一个复杂的程序依据一定的规则(规范)封装成几个块(文件),并进行组合在一起；块的内部数据与实现是私有的,只是向外部暴露一些接口(方法)与外部其它模块通信。二、模块化作用为什么要用模块化的JavaScript？因为在实际的开发过程中，经常会遇到变量、函数、对象等名字的冲突，这样就容易造成冲突，还会造成全局变量被污染；同时，程序复杂时需要写很多代码，而且还要引入很多类库，这样稍微不注意就容易造成文件依... 继续阅读 >
2021
06-05

详解JavaScript中的执行上下文及调用堆栈

一、执行上下文是什么代码运行是在一定的环境之中运行的，这个运行环境我们就成为执行环境，也就是执行上下文，按照执行环境不同，我们可以分为三类：全局执行环境：代码首次执行时候的默认环境函数执行环境：每当执行流程进入到一个函数体内部的时候Eval执行环境：当eval函数内部的文本执行的时候二、执行上下文栈是什么既然是‘栈'，那就得符合‘栈'的特性，即数据结构是先进后出。下面我们看一段代码：functioncat(a){if(a... 继续阅读 >
2021
06-04

JS Canvas接口和动画效果大全

概述<canvas>元素用于生成图像。它本身就像一个画布，JavaScript通过操作它的API，在上面生成图像。它的底层是一个个像素，基本上<canvas>是一个可以用JavaScript操作的位图（bitmap）。它与SVG图像的区别在于，<canvas>是脚本调用各种方法生成图像，SVG则是一个XML文件，通过各种子元素生成图像。使用CanvasAPI之前，需要在网页里面新建一个<canvas>元素。<canvasid="myCanvas"width="400"height="250">你的浏览器... 继续阅读 >
2021
06-04

JavaScript实现长图滚动效果

本文实例为大家分享了JavaScript之长图滚动的具体代码，供大家参考，具体内容如下长图的滚动会涉及定时器：我们先来回顾下定时器：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>定时器回顾</title></head><body><buttonid="start">开启</button><buttonid="stop">关闭</button><scripttype="text/javascript">varstart=document.getElementById("start");varst... 继续阅读 >
2021
06-04

JS ES6异步解决方案

最初使用回调函数​由于最初js官方没有明确的规范，各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范，没有明确各个参数的意义，不便于使用。​但是node中有明确的规范​node中的的回调模式：1.所有回调函数必须有两个参数，第一个参数表示错误，第二个参数表示结果2.所有回调函数必须作为函数最后的参数3.所有回调函数不能作为属性出现es6异步处理模型Es6出现以后，官方就提出了异... 继续阅读 >
2021
06-04

聊聊JS ES6中的解构

概述es6新增了一种从数组或者对象中获取指定元素的方式，这种方式就是我们今天要说的解构。先来说说数组的解构在有解构之前呢，我们获取数组中的指定元素通常是根据索引去做的：constarr=[1,2,3];consta=arr[1];有了解构之后呢，我们便可以使用如下方式快速的去获取数组中的某个元素：constarr=[1,2,3];const[a,b,c]=arr;console.log(a);console.log(b);console.log(c);这样打印出a,b,c的值分别是：123如果我... 继续阅读 >
2021
06-04

7个你应该知道的JS原生错误类型

概述从浏览器控制台到运行Node.js的终端，我们到处都会看到错误。本文的重点是概述我们在js开发过程中可能遇到的错误类型。提示：良好的错误提示会导致快速而无痛的发展经历与缓慢而痛苦的发展经历之间的区别。在编写可重用的代码时，请确保自己在编写清晰易懂的错误处理代码。1.RangeError当数字超出允许的值范围时，将会抛出此错误。例如constl=console.logconstarr=[90,88]arr.length=90**99我们有一个数组，带有两个元... 继续阅读 >