分类：JS

2021
06-04

如何使用JavaScript策略模式校验表单

概述Web项目中，登录，注册等等功能都需要表单提交，当把用户的数据提交给后台之前，前端一般要做一些力所能及的校验，比如是否填写，填写的长度，密码是否符合规范等等，前端校验可以避免提交不合规范的表单。假如我们有一个表单，校验逻辑如下：用户名不为空密码长度不低于6位手机号符合格式未使用策略模式的表单校验当没有使用策略模式时，即我们首先会想到的校验模式通常是这样的：<body><formid="registerFo... 继续阅读 >
2021
06-04

JS对象复制(深拷贝和浅拷贝)

一、浅拷贝1、Object.assign(target,source,source...)a、可支持多个对象复制b、如果source和target属性相同source会复制target的属性c、target只能为Object对象varobj={a:1,b:2}undefinedObject.assign({c:3},obj){c:3,a:1,b:2}obj{a:1,b:2}兼容性写法if(Object.assign){//兼容}else{//不兼容}2、扩展运算符（spread）支持将多个对象复制到一个对象上“varobj1={foo:"foo"};varobj2={bar:"bar"};varco... 继续阅读 >
2021
06-04

JS如何理解data URL

概述canvas有一个非常常用的方法canvas.toDataURL()，它会将canvas转化为dataURL的格式。通常情况下这个dataURL的类型为image。看看下面的例子：<canvasid="canvas"height="2"width="2"></canvas>varcanvas=document.getElementById('canvas');vardataURL=canvas.toDataURL();console.log(dataURL);/**data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASU... 继续阅读 >
2021
06-04

JS什么场景不适合箭头函数

概述这些年来，ES6将js的可用性提升到一个新的水平时:箭头函数、类等等,这些都很棒。箭头函数是最有价值的新功能之一，有很多好文章描述了它的上下文透明性和简短的语法。但每个事务都有两面。通常，新特性会带来一些混乱，其中之一就是箭头函数被误导了。本文将介绍一些场景，在这些场景中，你应该绕过箭头函数，转而使用良好的旧函数表达式或较新的简写语法。并且要注意缩短代码，因为这会影响代码的可读性。定义对象上的方法... 继续阅读 >
2021
06-04

JavaScript控制台的更多功能

概述你可能在JavaScript项目中都用了console.log。这是一种查看变量的值或程序运行中发生的事情的便捷方法。但是JavaScriptconsole对象还有许多其他的功能，可以在处理项目时提供帮助。本文将会介绍一些我的最爱，希望你在工作时记得使用它们！请注意，此处的例子适用于在浏览器中运行的JavaScript。这与在Node.js中运行的JavaScript相似，但是在Node.js中的行为可能略有不同。console.log在进入其他选项之前，让我们先回顾... 继续阅读 >
2021
06-03

JS如何为promise增加abort功能

概述Promise只有三种状态：pending、resolve、reject,一个异步的承诺一旦发出，经历等待（pending）后，最终只能为成功或者失败，中途无法取消（abort）。为promise提供abort功能的思路有两种：手动实现abort，触发取消后，异步回来的数据直接丢弃（手动实现，比较稳妥）使用原生方法AbortController中断请求（实验中的方法，有兼容性，ie不支持）手动实现abort方法有两种模式：都是依赖promise的接口间接实现promiserace... 继续阅读 >
2021
06-03

JS Object构造函数之Object.freeze

概述Object.freeze(obj)可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已经属性，不能修改该对象已有属性的可枚举性、可配置性、可写性、以及不能修改已有属性的值。此外，冻结一个对象后该对象的原型也不能被修改。freeze()返回和传入的参数是相同的对象。JavaScriptDemo:Object.freeze()constobj={prop：42}Object.freeze(obj)obj.prop=33//严格模式下会抛... 继续阅读 >
2021
06-03

JS异步堆栈追踪之为什么await胜过Promise

概述async/await和Promise的根本区别在于awaitfn()暂停当前函数的执行，而promise.then(fn)在将fn调用添加到回调链后，继续执行当前函数。constfn=()=>console.log('hello')consta=async()=>{awaitfn()//暂停fn的执行}//调用a时，才恢复fn的执行a()//"hello"constpromise=Promise.resolve()//将fn添加到回调链后，继续执行fnpromise.then(fn)//"hello"在堆栈追踪的上下文中，这种差异非常显著... 继续阅读 >
2021
06-03

10大Js图像处理库

介绍对于很多人来说，使用JavaScript来处理图像不是一件非常简单的事情，幸运的是我们可以借助第三方的库来实现我们想要的功能，本篇文章就介绍一有哪些JavaScript图片处理库可供我们选择和使用!以下排名不分先后1.Pica此插件可减小大图像的上传大小，从而节省上传时间。它可以在浏览器中调整图像大小，而不会出现像素化现象并且相当快。它会从web-workers,webassembly,createImageBitmapand纯js自动选择优秀的可用技术。... 继续阅读 >
2021
05-29

怎样用JS模拟实现枚举

前言在当前的JavaScript中，并没有枚举这个概念，在某些场景中使用枚举更能保证数据的正确性，减少数据校验过程，下面就介绍一下JavaScript如何模拟实现枚举效果。枚举主要特点枚举值不能重复不能被修改实现letdays;(function(days){days[days["Sunday"]=0]="Sunday";days[days["Monday"]=1]="Monday";days[days["Tuesday"]=2]="Tuesday";days[days["Wednesday"]=3]="Wednesday";d... 继续阅读 >
2021
05-29

js精准计算

varnumA=0.1;varnumB=0.2;alert(numA+numB);0.1+0.2=0.30000000000000004。计算精度误差问题（和二进制相关）。对于浮点数的四则运算，几乎所有的编程语言都会有类似精度误差的问题，只不过在C++/C#/Java这些语言中已经封装好了方法来避免精度的问题，而JavaScript是一门弱类型的语言，从设计思想上就没有对浮点数有个严格的数据类型，所以精度误差的问题就显得格外突出。我们先把0.1和0.2转换成二进制看看... 继续阅读 >
2021
05-29

浅谈JS包装对象

概述定义对象是JavaScript语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”（wrapper）。所谓“包装对象”，指的是与数值、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。varv1=newNumber(123);varv2=newString('abc');varv3=newBoolean(true);typeofv1/... 继续阅读 >
2021
05-29

比较node.js和Deno

前言如果你一直关注Web开发领域，那么最近可能已经听到了很多关于Deno的信息——一种新的JavaScript运行时，它可能也会被认为是Node.js的继承者。但是这意味着什么，我们需要“下一个Node.js”吗？什么是Deno？要了解发生了什么，我们首先需要看一下Deno到底是什么。就像我前面说过的那样，这是一个新的JavaScript运行时，也就是要执行JS代码的环境。它最初是由RyanDahl创造的，他在之前曾经为我们把Deno与Node.js进... 继续阅读 >
2021
05-29

如何利用js在两个html窗口间通信

场景：当A页面打开B页面，在B页面操作后，A页面需要同步变更数据时A页面,http://127.0.0.1:10001/A.htmlvardomain='http://127.0.0.1:10001';window.open('http://127.0.0.1:10001/B.html');window.addEventListener('message',function(event){if(event.origin!==domain)return;console.log('messagereceived:'+event.data,event);},false);B页面,http://127.0.0.1:10001/B.html，opener是当前窗口... 继续阅读 >
2021
05-29

js数组去重的11种方法

在实际工作或面试中，我们经常会遇到“数组去重”问题，接下来就是使用js实现的数组去重的多种方法：1.将数组的每一个元素依次与其他元素做比较，发现重复元素，删除vararr=[1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5];console.log(arr);//[1,23,1,1,1,3,23,5,6,7,9,9,8,5,5,5,5]functionnoRepeat1(arr){for(vari=0;i<arr.length-1;i++){for(varj=i+1;j<arr.length... 继续阅读 >
2021
05-28

原生js如何实现call,apply以及bind

1、实现call步骤：将函数设为对象的属性；指定this到函数，并传入给定参数执行函数；执行之后删除这个函数；如果不传入参数，默认指向window；Function.prototype.mycall=function(context,...args){//判断是否为函数，如果不是函数，则报错if(typeofthis!=="function"){thrownewError("不是函数");}context=context||window;context.fn=this;constres=cont... 继续阅读 >