分类：Js

2020
09-28

JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

本文实例讲述了JS表单验证插件之数据与逻辑分离操作。分享给大家供大家参考，具体如下：之前已经写过一个表单验证插件了，为什么还会重复造轮子呢？第一个问题是代码结构比较乱，虽然通过原型继承的写法将处理分层，但业务逻辑和数据结构混杂在一起，导致第二个问题——可扩展性和灵活性差。认真分析表单验证的过程，可以分为两步：怎么验证和如何验证。怎么验证是数据层面的问题，如何验证是业务逻辑层面的问题。点击：这里查看... 继续阅读 >
2020
09-28

JS深入学习之数组对象排序操作示例

本文实例讲述了JS深入学习之数组对象排序功能。分享给大家供大家参考，具体如下：JavaScript实现多维数组、对象数组排序，其实用的就是原生的sort()方法，用于对数组的元素进行排序。sort()方法用于对数组的元素进行排序。语法如下：arrayObject.sort(sortby)返回值为对数组的引用。请注意，数组在原数组上进行排序，不生成副本。如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编... 继续阅读 >
2020
09-28

JS XMLHttpRequest原理与使用方法深入详解

本文实例讲述了JSXMLHttpRequest原理与使用方法。分享给大家供大家参考，具体如下：你真的会使用XMLHttpRequest吗？看到标题时，有些同学可能会想：“我已经用xhr成功地发过很多个Ajax请求了，对它的基本操作已经算挺熟练了。”我之前的想法和你们一样，直到最近我使用xhr时踩了不少坑儿，我才突然发现其实自己并不够了解xhr，我知道的只是最最基本的使用。于是我决定好好地研究一番xhr的真面目，可拜读了不少博客后都不甚满意，... 继续阅读 >
2020
09-28

JS使用正则表达式实现常用的表单验证功能分析

本文实例讲述了JS使用正则表达式实现常用的表单验证功能。分享给大家供大家参考，具体如下：表单验证是一个网站或应用的重点，一条合适的错误提示不仅可以减少无效信息录入，更会给用户留下良好的使用体验。但表单设计千差万别，用户输入更不可控。一方面，我们要减少出错提示（这会引起用户反感），而另一方面，我们则希望得到足够多的有效信息。鱼和熊掌如何兼得？写一个简单的表单验证:https://www.jb51.net/article/185782.htm... 继续阅读 >
2020
09-28

JS判断浏览器类型与操作系统的方法分析

本文实例讲述了JS判断浏览器类型与操作系统的方法。分享给大家供大家参考，具体如下：navigator.userAgent:userAgent属性是一个只读的字符串，声明了浏览器用于HTTP请求的用户代理头的值。navigator.platform:platform属性是一个只读的字符串，声明了运行浏览器的操作系统和（或）硬件平台。判断浏览器类型IE浏览器ie=ua.match(/MSIE\s([\d\.]+)/)||ua.match(/(?:trident)(?:.*rv:([\w.]+))?/i),IE浏... 继续阅读 >
2020
09-28

js this 绑定机制深入详解

本文实例讲述了jsthis绑定机制。分享给大家供大家参考，具体如下：函数调用位置与词法作用域相反的是，this的指向由函数运行时决定，它是动态的，随着函数调用位置变化而变化。要理解this，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）。只有仔细分析调用位置才能回答这个问题：这个this到底引用的是什么？functionbaz(){//当前调用栈是：baz//因此，当前调用位置是全局作用域console.lo... 继续阅读 >
2020
09-28

JS 图片压缩原理与实现方法详解

本文实例讲述了JS图片压缩原理与实现方法。分享给大家供大家参考，具体如下：前言说起图片压缩，大家想到的或者平时用到的很多工具都可以实现，例如，客户端类的有图片压缩工具PPDuck3，JS实现类的有插件compression.js，亦或是在线处理类的OSS上传，文件上传后，在访问文件时中也有图片的压缩配置选项，不过，能不能自己撸一套JS实现的图片压缩代码呢？当然可以，那我们先来理一下思路。压缩思路涉及到JS的图片压缩，... 继续阅读 >
2020
09-28

JS数组Reduce方法功能与用法实例详解

本文实例讲述了JS数组Reduce方法功能与用法。分享给大家供大家参考，具体如下：概述一直以来都在函数式编程的大门之外徘徊，要入门的话首先得熟悉各种高阶函数，数组的reduce方法就是其中之一。reduce方法将会对数组元素从左到右依次执行reducer函数，然后返回一个累计的值。举个形象的例子：你要组装一台电脑，买了主板、CPU、显卡、内存、硬盘、电源...这些零件是组装电脑的必要条件。装的过程可以简单概括为拆掉每个零件的包装... 继续阅读 >
2020
09-28

JS数组push、unshift、pop、shift方法的实现与使用方法示例

本文实例讲述了JS数组push、unshift、pop、shift方法的实现与使用方法。分享给大家供大家参考，具体如下：尾部添加(push)push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。从解释中可以看出，push方法只要将要添加的元素依次放到数组的最后即可，不会改变原有数组元素的索引。所以循环参数列表，将新元素依次放到数组的最后即可。Array.prototype._push=function(...value){for(vari=0;i<arguments... 继续阅读 >
2020
09-28

JS实现手写 forEach算法示例

本文实例讲述了JS实现手写forEach算法。分享给大家供大家参考，具体如下：手写forEachforEach()方法对数组的每个元素执行一次提供的函数arr.forEach(callback(currentValue[,index[,array]])[,thisArg]);callbackcurrentValue数组中正在处理的当前元素。index可选数组中正在处理的当前元素的索引。array可选forEach()方法正在操作的数组。thisArg可选可选参数。当执行回调函数c... 继续阅读 >
2020
09-28

JavaScript禁止右击保存图片,禁止拖拽图片的实现代码

下面先看下js禁止右击保存图片。禁止鼠标右键保存图片<imgsrc=""oncontextmenu="returnfalse;">禁止鼠标拖动图片<imgsrc=""ondragstart="returnfalse;">文字禁止鼠标选中<ponselectstart="returnfalse;">文字禁止鼠标选中</p>禁止复制文本<ponselect="document.selection.empty();">文字禁止鼠标选中</p>jquery禁止文本复制和拷贝$(document).bind("contextmenucopyselectstart",function(){returnfalse;});jquer... 继续阅读 >
2020
09-28

JavaScript 禁止用户保存图片的实现代码

添加事件禁止选择、拖拽、右键（简单的禁止用户保存图片，但无法阻止用户打开控制台查看，或是直接抓包）将之转换为canvas（让浏览器认为不是图片以此禁止用户对之进行图片的操作，但无法阻止抓包）禁止用户使用控制台查看源码（阻止浏览器打开控制台，但无法阻止抓包）传输图片使用自定义格式（可以阻止抓包，但需要后台配合）注：以下内容使用react+ts实现添加事件禁止选择、拖拽、右键简而言之，这是一种简单有效的方式，能... 继续阅读 >
2020
09-28

JS求解两数之和算法详解

本文实例讲述了JS求解两数之和算法。分享给大家供大家参考，具体如下：题目描述给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。:::tip给定nums=[2,7,11,15],target=9因为nums[0]+nums[1]=2+7=9所以返回[0,1]:::解法利用Map记录数组元素值和对应的下标，对于一个数nums[i]，判断target-nums[i]是否存在MapvartwoSum=... 继续阅读 >
2020
09-28

JS 创建对象的模式实例小结

本文实例总结了JS创建对象的模式。分享给大家供大家参考，具体如下：1.工厂模式抽象了创建具体对象的过程，创建了一种函数，封装特定的接口创建对象的细节。新建一个对象定义属性和方法return刚新建的对象functioncreatePerson(name,age,job){varobj=newObject();obj.name=name;obj.age=age;obj.job=job;obj.sayHi=function(){congsole.log(this.name);};returnobj;}varperson1=createPerson(... 继续阅读 >
2020
09-28

js最全的数组的降维5种办法(小结)

业务开发中，二维数组、多维数组转为一维数组这种需求是少不了的，有些多维数组里面可能嵌套会更深，数组降维就是来解决此问题的1、数组字符串化letarr=[[222,333,444],[55,66,77],{a:1}]arr+='';arr=arr.split(',');console.log(arr);//["222","333","444","55","66","77","[objectObject]"]所有的元素会转换为字符串，且元素为对象类型会被转换为 "[objectObject]" ，对于同一种类型数字或... 继续阅读 >
2020
09-28

JS数组降维的实现Array.prototype.concat.apply([], arr)

把多维数组（尤其是二维数组）转化为一维数组是业务开发中的常用逻辑，最近跟着黄轶老师学习Vue2.6.1.1版本源码时,看到源码对二维数组降维的代码,所以这里来写一篇,记录一下,加强印象二维数组降为一维数组循环降维letchildren=[1,2,3,[4,5,6],7,8,[9,10]];functionsimpleNormalizeChildren(children){letreduce=[];for(leti=0;i<children.length;i++){if(Array.isArray(children[i])){for(let... 继续阅读 >