随着JavaScript的代码复杂度日益增加，为了减少开发和维护的难度，模块化的需求出现了，从1999年至今，模块化的发展走过了一些重要的阶段，本篇重点讲解这些比较突出的模块化方式。 命名空间 早期一个比较简单的模块化方式就是通过命名空间，通过约定俗成的全局变量的方式，将一些属性或者方法存放在一个大写的变量对象中，然后去使用。 var MY_MODULE = { name: "a", fn1: function() {}, fn2: function() {} } 这样一来可以减少全局作用域上的变量数量，但是这个实现的本身它还是一个对象，这个就导致它的不安全性，外...
前言 对于数组的reduce方法一直用的比较少，大多数情况下forEach\filter\map就可以满足需求，但是对于reduce一直没找到合适的使用场景，就很可惜，想用但是没用上。 最近在nest的教程中看到这么一种有趣的用法，特此分享！ 代码 在一些使用场景中，可能会使用扁平化的对象key来获取对象中的值，比如在后端中可以看到一些这样的用法： this.config.get("database.host") 意思是我需要从config配置对象中获取数据库的host字段，但是config本身是存在很多配置项的，他可能会是这样的结构： { app: { port...
防抖 防抖在日常项目开发的时候还是很重要的，用于防止函数的重复触发，节省性能开支。 比如监听用户的input输入进行api查询，由于input事件每次改变输入的内容都会触发，但是一般来说，只有最后一次input才有效，所以会经常采用防抖的形式来触发。 防抖：在一定时间内重复触发之后只会生效最后一次。 如何写一个防抖呢，我们慢慢来 < script > "use strict" const input = document.querySelector("input"); input.addEventListener("input", debounce(function() {...
踩坑指南 虽然howler.js说他可以自动感知然后自动播放，事实上没什么软用，所以我们还需要自己去配置一下触发器。监听一个全局的click事件之类的。 虽然howler.js说可以自动降级到h5播放，但是实际测试无法在安卓4.4中进行播放，但是个人测试，如果你使用一个audio元素，是可以播放的，但是这样就需要自己去手动封装一个基于audio元素的播放管理，项目赶的很，实在没有多余的时间去研究这个，特别是音效的播放，还是专业的库处理比较好，所以暂时对于安卓4.4的兼容是没法做到的。 官方对于这个问题也是很模糊，找不到解决办法。 howler.js在文档中找了半天，也没看到官方提供动态替...
基本概念 问题的起源：前后端分离 在前后端开发的时候，前端的数据基本都是通过api请求获取到的，但是后端可能在开发的时间上与前端不一致，这就导致前端常常需要等待后端提供接口，等待会耗去很多开发时间，所以我们经常做的方式就是自己模拟数据（假数据时代）。 比如写个定时器返回一个数据对象，或者使用一个json文件，去模拟请求。 但是这些其实都并不方便，每次都要自己去写一堆数据，如果是json格式还不能for循环，以及一些随机数据，最重要的是这些代码最终都得删除，因为耦合在业务代码中，而且我们的请求并不是真正的请求代码，最终在后端接口出来后我们还得改一遍代码。 难道就不能前端模拟的效果和真实请求...
//模拟异步请求 function axiosFn() { return new Promise((resolve, reject) => { const flge = Math.random(); //随机值 setTimeout(() => { //大于0.7就是成功 if (flge > 0.7) { return resolve(flge); } else { return reject(...
const div = document.querySelector("div.box"); div.addEventListener("animationstart", function() { //动画开始运行触发 }); div.addEventListener("animationiteration", function() { //动画每执行一次触发一次，适用用多次动画 }); div.addEventListener("animationend", function() { //动画结束触发 });
/* * @Author: mulingyuer * @Date: 2021-12-30 22:06:58 * @LastEditTime: 2022-01-03 05:22:30 * @LastEditors: mulingyuer * @Description: 手写promise * @FilePath: \undefinedc:\Users\13219\Desktop\promise.js * 怎么可能会有bug！！！ */ /** * @description: 自定义promise * @param {fucntion} executor 执行器函数(同...
promise如果没有指定状态，那么就一直会处于pending中，如果长时间不处理，那么这个东西会一直存在于内存中，显然是不合理的。如果是一个超多请求项目，那么我们就需要考虑下性能问题了。 promise中有一个rece方法，它接收一个promise作为值的数组，它的特性就是：哪个promise先执行，他就处理那一个，不管是resolve还是reject；在then中，他也只有一个值，不同于Promise.all方法返回的是一个数组，rece返回的值是最快完成的那个promise的返回值。 利用这个特性，我们可以制作一个超时处理。 function delayPromise(promis...
找了很久，现有的库有两个： 1. Merge npm地址： Merge 用法： import merge from 'merge'; const obj1 = { name: 2}; const obj2 = { value: 1 }; //合并 merge(obj1,obj2); console.log(obj1); //{name:2,value:1} //克隆合并-与目标对象无关联 const obj3 = merge(true,obj1,obj2); console.log(obj3); //{name:2,value:1} console.log(obj3 === o...
有时候我们在vue中进行for循环，就会涉及到绑定唯一值key的问题，但是并不是任何时候都会存在所谓的唯一值，使用index下标明显是不合适的，官方也不推荐，除非你for循环出来的列表不用变化。 所以一般常用的做法就是给for循环的对象添加一个属性，属性的值是随机的uuid或者时间戳。 这样前端问题解决了，如果遍历的数据还需要提交到后端，那么不就多了一个属性，这个属性后端不需要的。 所以，我们需要在提交数据前，对数据进行过滤。 过滤又得for循环删除？那怎么行，有没有那种通用的，简单的方法。 过滤方法 /** * @description: 过滤对象中指定的属性,也可以拿来浅拷贝 *...
不允许循环引用的深拷贝 function deepCopy(data) { const weakMap = new WeakMap(); function copy(data) { if (weakMap.has(data)) return null; //打断施法 const copyData = data instanceof Array ? [] : {}; weakMap.set(data, true); for (let [key, value] of Object.entries(data)...
前言 js有一个31k多的star的开源复制库：clipboard.js；但是一些简单复制并不想安装一个库来解决，所以就想自己写一个。 copy所需要的东西 Selection 对象 用于获取被用户选中的部分，通过toString()方法可以获取被选中的文本内容，以及js操作选中。 MDN文档：Selection execCommand 对象 用于以命令的形式来操作网页的内容，说白了就是用它来实现复制文本操作，复制的是选中的文本 MDN文档：execCommand 需要注意的是，execCommand在未来将会被遗弃，因为这个api本身是从ie浏览器那边继承的，久而久之各大浏览器都...
前言 后端返回给前端的数据，有时候会是一个多层级对象，但是我们前端使用的时候，for循环遍历渲染时，多层级对象往往需要进行单独处理，因为还需要判断这个key值是否存在，否则会报错。 强行让后端改变数据结构又好像不现实，无奈，只有自己处理了。 掘金看到一位大佬文章《【算法】JS 实现对象的扁平化》 感觉很合适，逻辑清晰。 要求 将对象中的层级扁平化，改成如下格式： // 实现一个 flatten 函数，实现如下的转换功能 const obj = { a: 1, b: [1, 2, { c: true }], c: { e: 2, f: 3 }, g: null, }; /...
我们有两种方式获取，一种是new Date()得到时间对象，一种是Date函数对象静态方法获取。 new Date()与Date的区别就是，前者是构造函数，后者是函数对象，函数对象返回的，只是我们需要的值，他不会有Date对象的内置方法（prototype），所以，它的使用更简洁明确，但是如果我们想要获取时间的年份，月份，星期几，那么new Date()才是最好的选择。 new Date() 获取 const date = new Date(); //没有传入参数获取当前本地时间 date.getTime(); //1626746413673 date.valueOf(); ...
原理也没啥好藏着掖着的，就是为了保证密码难度，开头的字符一定是满足安全需要的，比如要求大小写数字加特殊字符，那么开头四位就一定是：大写一位、小写一位、数字一位、特殊字符一位；然后剩下的随机。 /** * @description: 随机密码 * @param {*} len 密码位数 * @param {*} mode 密码难度：hide(大小写数字特殊字符)、medium(大小写数字)、low(小写数字) * @Date: 2021-07-02 15:52:32 * @Author: mulingyuer */ export const randomPass = funct...
使用canvas操作内容后，如果想保存图片之类的操作，就无可避免的要处理这一步，因为canvas导出的是base64格式的文件，如果你只做预览还好，存储的话，就要想办法了。 我的想法是转成上传文件的那种file格式。 方法如下： /** * @description: 将base64转换为文件对象 * @param {*} dataUrl base64 * @param {*} fileName 文件名 * @Date: 2021-06-30 14:33:47 * @Author: mulingyuer */ export function dataURLtoFile(dat...
预览图 类源码 /* * @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 = { ...
json在格式化对象是，如果是普通的键值对对象还是没有问题的，但是如果他的值是一个函数，在格式化之后，函数就会被剔除。 const a = { name: '我爱你', fn: function(){ console.log("我也爱你！") } }; const b = JSON.stringify(a); 当你输出变量b的时候，你得到的会是： "{\"name\":\"我爱你\"}" fn不见了！ 引用JSON.stringify()方法描述中的一段解释： undefined、任意的函数以及 symbol 值，在序列化过程中会被忽略（出现在非数组对象的属性值中...
本来是一个很简单的需求： 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.hasOwnProperty...
目前前端最佳的方案其实有两种： a元素下载 iframe 无闪下载 事实上这两种下载方式，其实都存在相同的一个问题，就是如果下载的文件是跨域的（不是同域名下的问题，或者其他原因）；并且这个文件浏览器可以直接打开的，比如：图片、文本文件。 那么浏览器会直接打开文件，并不是触发下载，而如果下载的文件是安装包，压缩包zip这些，则是触发下载。 这个问题就很头疼。 a元素下载的缺点 a元素下载，那么就必须设置download属性，这个属性可以接收一个参数，可以是带后缀的文件名，或者不带后缀。也可以为空，但是要设。 不带后缀的话文件格式就会与下载的文件保持一致，如果带了格式后缀，可能导致下载的...
造这个轮子其实也是没得办法，搜不到合适的轮子用，就只能自己干了。 使用场景 我们有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.getElementById("fileUp").value = ""; 3# 重新加载该DOM节点 <...
最近评论