我们有两种方式获取，一种是new Date()得到时间对象，一种是Date函数对象静态方法获取。new Date()与Date的区别就是，前者是构造函数，后者是函数对象，函数对象返回的，只是我们需要的值，他不会有Date对象的内置方法（prototype），所以，它的使用更简洁明确，但是如果我们想要获取时间的年份，月份，星期几，那么new Date()才是最好的选择。new Date() 获取const date = new Date(); //没有传入参数获取当前本地时间 date.getTime(); //1626746413673 date.valueOf(); //1...

原理也没啥好藏着掖着的，就是为了保证密码难度，开头的字符一定是满足安全需要的，比如要求大小写数字加特殊字符，那么开头四位就一定是：大写一位、小写一位、数字一位、特殊字符一位；然后剩下的随机。/** * @description: 随机密码 * @param {*} len 密码位数 * @param {*} mode 密码难度：hide(大小写数字特殊字符)、medium(大小写数字)、low(小写数字) * @Date: 2021-07-02 15:52:32 * @Author: mulingyuer */ export const randomPass = functi...

使用canvas操作内容后，如果想保存图片之类的操作，就无可避免的要处理这一步，因为canvas导出的是base64格式的文件，如果你只做预览还好，存储的话，就要想办法了。我的想法是转成上传文件的那种file格式。方法如下：/** * @description: 将base64转换为文件对象 * @param {*} dataUrl base64 * @param {*} fileName 文件名 * @Date: 2021-06-30 14:33:47 * @Author: mulingyuer */ export function dataURLtoFile(dataUr...

预览图类源码/* * @Author: mulingyuer * @Date: 2021-06-21 11:29:12 * @LastEditTime: 2021-06-21 18:39:31 * @LastEditors: mulingyuer * @Description: canvas * @FilePath: \form-create\src\utils\canvas.js * 怎么可能会有bug！！！ */ class Chart { constructor(options) { const defaultOptions = { el:...

json在格式化对象是，如果是普通的键值对对象还是没有问题的，但是如果他的值是一个函数，在格式化之后，函数就会被剔除。const a = { name: '我爱你', fn: function(){ console.log("我也爱你！") } }; const b = JSON.stringify(a);当你输出变量b的时候，你得到的会是："{\"name\":\"我爱你\"}"fn不见了！引用JSON.stringify()方法描述中的一段解释：undefined、任意的函数以及 s...

本来是一个很简单的需求：const a = { b:1 }本来我的需求是判断，这个a对象里面b是否存在，但是b的值不确定，他可能是布尔值false，也可能是数字0，或者是空字符。那么if(a.b)就不太行了，一般来说，老前端一般都是用in 操作符。"b" in a; //true但是es6后，一般来说，不建议这样使用的，同时不建议的还有delete操作符。于是问了下群友，因为我记得es6有那么一个方法，可以判断一个对象的属性是否存在，并且不会去查prototype上的内容。但是我忘了啥名字来着！const a = { b:1 } a.hasOwnPrope...

目前前端最佳的方案其实有两种：a元素下载iframe 无闪下载事实上这两种下载方式，其实都存在相同的一个问题，就是如果下载的文件是跨域的（不是同域名下的问题，或者其他原因）；并且这个文件浏览器可以直接打开的，比如：图片、文本文件。那么浏览器会直接打开文件，并不是触发下载，而如果下载的文件是安装包，压缩包zip这些，则是触发下载。这个问题就很头疼。a元素下载的缺点a元素下载，那么就必须设置download属性，这个属性可以接收一个参数，可以是带后缀的文件名，或者不带后缀。也可以为空，但是要设。不带后缀的话文件格式就会与下载的文件保持一致，如果带了格式后缀，可能导致下载的jpg文件，你设置为...

造这个轮子其实也是没得办法，搜不到合适的轮子用，就只能自己干了。使用场景我们有N个异步任务promise，他们没有顺序关系，谁先触发都无所谓，但是我们只关心一点，如果某一个任务出错，后续就不要运行了，只有全部都success完成，那么才运行成功后的处理方式then。当然，我们肯定不能使用Promise.all运行N个任务，这等于是同步触发了，如果我有2000个任务，难道你也一口气发2000个任务，那这就不现实了，所以这里我们要引入线程概念，一个进程可以有多个线程，那么进程就是管理器，线程就是我们一次可以发多少个请求。线程是可以配置的，我们可以指定触发多少个线程，当1个线程完成后，我们要填...

今天就遇到了这个需求，当我上传文件超时或者失败后，再选择同一个文件上传，是不会触发change事件的，所以失败或者成功后我们需要重置下元素。<form action="" id="uploads"> <input type="file" id="fileUp"/> </form>1# 将整个form表单重置 $("#uploads")[0].reset(); //重置 2# 将当前input标签的value值设为空 document.getElem...

typeof无法准确的判断object类型，instanceof判断起来还需要new出对象，想来想去最稳的就是Object.prototype.toString.call，于是乎组合一下：//判断数据类型 function getType(value) { let type = typeof value; if (type !== "object") { return type; } return Object.prototype.toString.call(value).slice(8, -1).toLowerCase...

应狗群友的要求，写一个网站已经运行了多少时间的代码，本来php就完事了，非要js的。无奈总结了下百度上的一些方法，写了一个稍微花了点心思的方法，使用很简单，new出这个函数，在使用init初始化方法，传入参数即可，完全不需要jq。事先声明：本方法没有考虑到闰年平年月份统一30天计算所以时间上可能不是很准确，但是相对准确，233有能力完全可以自定义，我都有注释，中文友好满分。不多说，上代码function WebsiteElapsedTime() { //初始化 this.init = function({ id = "", ...

快速了解axios常用功能，适用于对axios有一定使用经验的人。常用请求方法的参数axios.get(url, config);get方法支持两个参数，第一个是url，第二个是{}键值对配置对象。axios.post(url, data, config);post方法支持三个参数：请求地址，上传的数据{}，{}键值对配置对象。当然还有一些其他请求类型，可以查看官方文档，这两种常用。除了.xxx方法使用协议，还可以直接传入配置对象的形式使用。axios({ method:'get', url:'xxxx', })这种方式比较适合封装使用。适用度广泛一些。一些常用的config配置...

群友今天让我帮忙改一下他站点下载音频文件的方法，为此有了这篇心得。首先当我通过api请求后端时，后端返回的其实是一个键值对对象，里面并没有实际的文件，只有一个url下载地址。https://xxxxxxasdasdas.mp3大概是这么一个地址段，可能会更长一些，总体是差不多。当时我想得挺简单，我直接就将这个url地址赋值给a元素href，然后a.click触发下载，但是实际上并不会下载，谷歌浏览直接就给你打开这个文件了。如果需要a链接下载这个文件，我们需要先将文件下载下来，然后本地转成url地址，再赋值给a元素，再click即可。于是代码如下：//我的下载方法 function myD...

之前写过一片使用fetch下载文件的方法，但是如果后端返回一个错误对象，使用response.blob()会将这个错误对象直接转为blob对象，然后被转为文件下载下来。但实际上我们是要区分处理的，比如是文件流我们就下载文件，是错误对象，我们就进行错误提示和抛出错误。所以这里，我主要分享下我对错误处理的思路。基础知识首先，在fetch第一个then回调中，我们可以对response对象进行三种方法操作：response.text 返回的是一个纯文本 是一个promise对象response.json 返回的是一个对象（json/array） 是一个promise对象response.b...

之前研究了下axios的取消请求操作，也配合vue写了篇文章笔记，现在考虑下资源请求了。当vue页面在切换的时候，一般不同的页面有不同的api请求，也有一些资源的请求下载，比如图片，视频...；当资源文件很大，而服务器带宽不足，并且多个页面同时打开，很容易造成服务器的堵塞。而正因为堵塞，页面的资源一直卡在下载中，加上单页app的效果，我们可能会切换其他页面浏览，但是由于上一个路由页的资源已经在加载中了，即便我们切换了页面，资源还是处于下载中的。所以我们要解决这个问题。怎么办？window.stop();这个方法会直接结束当前页面的所有请求，类似于我们点击了浏览器的x按钮，不进行加载了。目...

className方式我自己之前学es5的时候，老师教我们是用的是className属性，他是dom的一个属性，返回元素的class值，兼容性可以说是通杀吧，所有浏览器都是支持的，但是，他是一个string操作。document.getElementById('myid').className; 他会返回一个string的值(空的话返回empty string，empty string===“”,length为0)，而class的设置，他是需要空格的：class="class1 class2"，当我们添加一个新的class时就不得不考虑空格的问题：document.g...

这个方法太常用了，写个笔记 //获取顶部距离 function getTop(element) { let realTop = element.offsetTop; let parent = element.offsetParent; while (parent !== null) { realTop += parent.offsetTop; parent = parent.offsetParent; } return realTop; },接收原生dom对象

最近有这么一个需求，就是后端api地址返回一个文件，这个文件是已经格式化好的，比如表格.xlsx，或者是其他文件zip这些。但是后端他加了鉴权，所以如果直接a链接访问这个接口，我们无法在头信息上添加token字段，于是这个请求被作为无效。然后我使用了axios的请求，结果返回的内容，转换为blob对象后，下载完文件就被破坏了，无法打开。这里我贴一下之前的代码。api().then(res=>{ let blob = new Blob([err]); let a = document.createElement("a"); a.href = URL.c...

js里面的防抖动，就是当一个函数不断被触发，但是实际有效值是最后一次的时候，为了节省资源，提高性能，让这个函数只触发最后一次。比如常见的resize事件，scroll事件，非常典型的一个重复触发，有效的是最后一次。那么怎么做呢？function debounce(fn, delay) { // 维护一个 timer let timer = null; return function() { // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量 let context = this; let args = arguments;...

最近有一个地方需要计算过期时间，然后返回天数，但是我用diff计算，得到的结果就是和后端算的相差一天。//后端返回的时间 const endTime = "2021-12-04"; //前端获取当前时间 const startTime = Date.now(); //或者new Date().getTime() //计算结果 const day = moment(endTime).diff(startTime,"days");得到的结果，永远是差一天的结果。比如今天是时间是：2020-12-08 10:46:00，转为时间戳为：160739556...

直接把饿了么的返回顶部动画提取出来了，直接上代码//返回顶部函数 const cubic = (value) => Math.pow(value, 3); const easeInOutCubic = (value) => value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2; const el = document.documentElement; export const goScroll = function() { const beginTime = Date.n...

包含数字、字符、特殊字符，6-16位/(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9])[\S]{6,16}$/提示信息：密码为6-16位，必须包含数字和字母和至少一个特殊字符!@-_=<>#*%+&^$

阻止双击选中文本个人有两种实现方式，可以根据实际环境进行操作。使用非文本元素如果我们对一个div元素双击，你会发现，他的文本会被选中，如果不想被选中，只能通过css的方式来进行操作，但是，css一旦设置，就永远不能选中了，也许，我们只是希望在双击时不选择，用户滑动选择时已经可以选中文字。css阻止选中.no-select { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-sel...

函数注释的一个常用的格式：/** * @description: 函数描述 * @param {类型} 参数 描述 * @return {类型} 描述 */description 就是函数的说明，干什么用的param 是函数的参数； {}里面表示这个参数是什么类型，后面接参数名称，描述，参数有多少个，@param就有多少个return 表示要输出的内容，一般可以省略不写，也可以写，和param 差不多示例/** * @description: 测试函数 * @param {*} a 任何类型参数 * @param {*} b 用来xxx * @return {*} 返回空...

今天遇到一个问题，就是在使用mock模拟本地api请求的时候，因为做了一个全局配置文件，配置文件里面有一个devUrl属性，这个属性是本地的url地址，所以我就想着，让mock那边自动将devUrl和api地址进行拼接。但是api地址段不一定只是字符，有可能是正则。所以，我们需要进行拼接正则。知识点1.如何获取正则的匹配的那段文本?也就是/[a-z]/ig中我们怎么拿到[a-z]，因为这个内容是自定义的，你不知道他会是什么内容。这里我们就需要了解到reg对象的source属性：RegExpObject.sourcesource就可以直接返回给我们模式匹配所用的文本/[a-z]/ig.so...