JavaScript
文章平均质量分 61
蚂蚁上的大象
一个大龄的前端渣渣
展开
-
javaScript中微任务宏任务详解
【代码】javaScript中微任务宏任务详解。原创 2024-04-02 12:07:09 · 895 阅读 · 0 评论 -
JavaScript获取字符串的字节长度
TextEncoder() 构造函数总是返回一个新创建的 TextEncoder 对象,该对象将生成具有 UTF-8 编码的字节流。TextEncoder 接口不继承任何属性。我们可以换一种思路,既然要求是获取字符串的字符长度,我们可以先把字符串直接转换成字节,然后直接获取字节的长度就可以了。是一个内置的API,可用于将字符串转换为字节数组。原创 2023-09-13 15:47:45 · 2246 阅读 · 0 评论 -
web浏览器打开本地exe应用
像百度网盘那样打本地exe应用的办法。我们可以通过添加注册表. 向系统添加一个类似于http的私有协议(仅本地有效),然后浏览器调用。原创 2023-08-07 14:59:25 · 4728 阅读 · 3 评论 -
Vue3.2版本组件通讯
Vue3.2组件通讯原创 2022-04-06 10:43:23 · 1855 阅读 · 0 评论 -
关于前端面试要求手写的功能函数
javaScript笔试,十一个手写函数原创 2022-03-10 14:30:43 · 1366 阅读 · 0 评论 -
JSON.stringify进阶
JSON.stringify(value[, replacer [, space]]):参数value将要序列化成 一个 JSON 字符串的值。replacer 可选如果该参数是一个函数,则在序列化过程中,被序列化的值的每个属性都会经过该函数的转换和处理;如果该参数是一个数组,则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中;如果该参数为 null 或者未提供,则对象所有的属性都会被序列化。space 可选指定缩进用的空白字符串,用于美化输出(pretty-prin原创 2021-10-13 11:19:35 · 203 阅读 · 0 评论 -
Vue3 watch与watchEffect区别与进阶
Vue3 watch与watchEffect区别watch 手动(定向)依赖特性示例watchEffect 自动依赖特性示例watchEffect 与 watch 有什么不同?watchEffect 进阶停止监听onInvalidate()watch 手动(定向)依赖watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源,并在单独的回调函数中执行副作用。默认情况下,它也是惰性的——即回调仅在侦听源发生变化时被调用。原创 2021-10-09 16:51:19 · 837 阅读 · 0 评论 -
你需要知道的30个ES6—ES12开发技巧!
又是一顿爆肝,又是一篇万字长文,重新梳理了一下ES6——ES12的常用新特性,很多特性在开发中还是很实用的,希望对你有一点点帮助!文章内容较多,建议先收藏在学习呢!ECMAScript是一种由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言,这种语言被称为 JavaScript 。简单来说,ECMAScript 是 JavaScript 的标准与规范,JavaScript 是 ECMAScript 标准的实现和扩展。自2015年开始,ECMAScript发布的版本如下:发布时间.转载 2021-09-29 16:04:20 · 288 阅读 · 0 评论 -
前端IndexedDB数据库封装
IndexedDB介绍浏览器数据库 IndexedDB IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。 IndexedDB 是一个比较复杂的 API,涉及不少概念。它把不同的实体,抽象成一个个对象接口。学习这个 API,就是学习它的各种对象接口。原创 2021-09-13 16:26:10 · 994 阅读 · 0 评论 -
2021 年全球最受欢迎的 11 个 Node.js 框架
2021 年将使用的 11 个 Node.js 框架在我们看到 2021 年最佳 Node.js 框架之前,让我们先谈谈 Node 及其在编程中的作用。Node.js 是一个开源的 JavaScript 运行时。换句话说,一个在浏览器之外运行 JavaScript 的执行环境,就像任何编程语言一样。这是一场革命,允许将世界上最著名的语言之一 (JavaScript) 用于客户端和服务器端脚本编程。自 2009 年诞生以来,Node.js 的受欢迎程度一直在稳步上升。随着 Node 开发.原创 2021-09-13 16:02:14 · 4062 阅读 · 0 评论 -
JavaScript 生成txt文件并下载到本地
function download(filename, text) { var pom = document.createElement('a'); pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); pom.setAttribute('download', filename); if (document.createEvent) { v.原创 2021-08-16 14:46:55 · 2141 阅读 · 0 评论 -
javaScript 中 reduce() 详解、示例
javaScript 中 reduce() 详解、示例定义和用法educe() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。reduce() 可以作为一个高阶函数,用于函数的 compose。注意: reduce() 对于空数组是不会执行回调函数的。语法array.reduce(function(total, currentValue, currentIndex, arr), initialValue)参数参数描述书functio原创 2021-07-01 11:13:16 · 319 阅读 · 0 评论 -
前端面试题总结(一)
Promise.all()异常处理promise.all中任何一个promise 出现错误的时候都会执行reject,导致其它正常返回的数据也无法使用。解决办法:由于Promise.all(request).then(…).catch(…) 会在所有request都resolve时才会进then方法,并且把所有结果以一个数组返回,只要有一个失败,就会进catch。而如果在单个请求中定义了catch方法,那么就不会进Promise.all的catch方法。因此,可以在单个的catch中对失败的pr原创 2020-11-19 11:54:36 · 210 阅读 · 0 评论 -
2020年前端面试题
节前公司突然决定解散技术部,整的小伙伴们手忙脚乱,怎么好好的公司就突然要解散呢!博主刚来这个公司才4个多月,被整的一脸懵逼。剩下就是一些扯皮的事,遇到这么坑的公司也是没有办法。都说金九银十,称这大好的日子赶紧去面试找个靠谱的公司吧!下面整理了一些前端面试题,希望能给在找工作的小伙伴一些帮助。基础的面试题,在这里就不一一说了,主要说一下进阶的面试题。一、Vue Key指令的作用key是为每个vnode指定唯一的id,在同级vnode的Diff过程中,可以根据key快速的进行对比,来判断是否为相同节原创 2020-10-14 12:55:50 · 271 阅读 · 0 评论 -
Vue打包优化之gizp压缩
前言:gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积。在 Vue CLI3 中webpack在打包时可以借助 compression webpack plugin 实现gzip压缩。安装插件:npm i -D compression-webpack-pluginwebpack配置在 vue.config.js 中按照如下方式进行配置const CompressionPlugin = r原创 2020-05-22 12:00:07 · 638 阅读 · 0 评论 -
Vue打包优化之路由懒加载
前言当打包构建项目时,js包会变得非常大,影响页面加载,我们把不同路由的对应组件分割成不同的代码块,然后当路由被访问的时候加载对应的组件,这样能提升访问效率。切分之后,并不是浏览器访问某个路由,才去下载对应的模块,仍然在首次访问程序时,下载所有模块,只不过每个模块分的很小,加载首页时需要的模块能够更快的下载下来,所以能够更快的显示解决方案 基础写法,没有懒加载,打包分离代码 路由懒加载,import()方法。(按需加载) vue的异步组件+webpack的ensure(原创 2020-05-14 18:20:43 · 586 阅读 · 0 评论 -
Vue的钩子函数-守卫篇
前言说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢…Vue-Router导航守卫:有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导...原创 2020-01-06 10:02:08 · 384 阅读 · 0 评论 -
前端代码优化(基础)
索引优化代码先来看一个简单的例子:需求是星期回显,传 1 回显 星期一,传 7 回显 星期日,其他类推,无效回显空字符串;类似的需求还有回显月份第一种实现方法: switch 实现function previewWeek(i){ switch(i){ case 1: return '星期一' break;...原创 2020-04-19 13:53:59 · 859 阅读 · 0 评论 -
埋点与监控
什么是埋点?百度原话:埋点分析,是网站分析的一种常用的数据采集方法其实通俗的讲前端埋点主要是为了运营以及开发人员采集用户行为数据,以及页面性能等数进行后续的数据分析,举一些例子:比如,拿到页面在各种网络下的加载时间,再比如拿到用户在某个页面的停留时间!埋点的目的是什么?在现今用户就是上帝的年代,互联网竞争如此之大的时代,有针对性的对每个用户的喜好定制不同的内容,按照用户的喜好去...原创 2020-04-19 12:48:21 · 2665 阅读 · 0 评论 -
Vue 图片加载错误处理(显示默认图片)
在Vue H5项目中,图片加载错误,需要给图片一个默认的配图,如图:如果不给默认图片的话会是这样,如图:这样是不是很丑,哈哈哈哈!那么我们应该怎么处理呢?上码:<img :src="图片地址变量" alt="" @error="imgError(图片地址变量)">imgError(图片地址变量){ 图片地址变量 = require(...原创 2020-01-20 16:51:50 · 3363 阅读 · 0 评论 -
简版仿vue双向数据绑定
简版双向数据绑定 了解Object.defineProperty(): 这个API是实现双向绑定的核心,最主要的作用是重写数据的get、set方法,现在的三大框架(vue react angular)也都是通过这个API来实现双向绑定的。使用方式:let obj = { singer: "周杰伦"};let value = "青花瓷";Object.defineProper...原创 2020-01-06 11:23:07 · 311 阅读 · 0 评论 -
Vue 配置postcss.config.js CSS处理和移动端适配方案!
今天跟大家聊了一下 vue 中的CSS 处理:postcss.config.js首先我们要了解一下什么是 postcsspostcss:它是一个利用JS插件来对CSS进行转换的工具,这些插件非常强大,强大到无所不能。拥有极高的处理性能(3倍以上的处理速度) 你既可以写正常的CSS,也可以结合LESS或者SASS一起编写 对Source Map支持更好 他的插件真的太多太强大太便利...原创 2019-11-22 18:06:46 · 33874 阅读 · 5 评论 -
JS 计算某个时间到现在时间
var day = Math.floor(new Date().getTime() / 1000) - (new Date('年-月-日 时:分:秒').getTime() / 1000),day2 = Math.floor(day / (24 * 3600)),day3 = day2 * 24 * 3600,day4 = day - day3,day5 = Math.floor(day...原创 2019-11-05 19:13:11 · 1892 阅读 · 3 评论 -
ES6系列文章 异步神器async-await
关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点,接收了这些信息后,就蒙圈了。现在才知道,async...原创 2019-10-21 18:11:08 · 341 阅读 · 0 评论 -
vue项目 使用provide、inject无闪烁刷新当前页面
解决的办法及遇到的问题:this.$router.go(0)这种方法虽然代码很少,只有一行,但是体验很差。页面会一瞬间的白屏,体验不是很好 用vue-router重新路由到当前页面,页面是不进行刷新的。 location.reload()这种也是一样,画面一闪,体验不是很好推荐解决方法:用provide/inject组合原理:允许一个祖先组件向其所有子孙后代...原创 2019-10-17 10:03:12 · 355 阅读 · 0 评论 -
常用方法总结 ——更新中
自己记录的一些小方法原创 2019-01-12 17:13:45 · 989 阅读 · 1 评论 -
iYiuMessage 消息提示组件
自己写了一个简单的消息提示组件,我管他叫iYiuMessage。先给一个Github地址:https://github.com/JensenYao/iYiuMessage初版写出来有一段时间了,一直没有时间去整理发布博客,今天来给大家介绍一下iYiuMessage。初版iYiuMessage简单的运用 prototype 来完成的第一版。它现在可以自定义 Message 信息...原创 2019-08-27 18:45:10 · 226 阅读 · 0 评论 -
keep-alive 用法 及activated,deactivated这两个生命周期函数
keep-alive Props: include- 字符串或正则表达式。只有名称匹配的组件会被缓存。 exclude- 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max- 数字。最多可以缓存多少组件实例。 用法: <keep-alive>包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和<transition>...原创 2019-08-22 12:00:18 · 6566 阅读 · 0 评论 -
postcss-px2rem-exclude打包rem影响其它项目的解决方案
在同一个VUE实例下的多个项目,比如一个是H5,另一个为Admin管理系统,那么在H5中使用了"postcss-px2rem-exclude",这样会影响到Admin页面里的样式变化,这个时候我们就需要把需要的文件在编译时打包成rem,而不需要的文件则过滤掉。emmmmmm.......找了很多方法都没能做到,最后请教了一位大神,只需要在 .postcssrc.js 文件中配置一下就好了,下面...原创 2019-08-07 16:36:28 · 4441 阅读 · 0 评论 -
面试题
谷歌面试问题问题:给定一个整数无序数组和变量 sum,如果存在数组中任意两项和使等于 sum 的值,则返回true。否则,返回false。例如,数组[3,5,1,4]和 sum = 9,函数应该返回true,因为4 + 5 = 9。解答解决这个问题的一个很好的方法是遍历数组,创建 Set保存相对差值。当我们遇到3时,我们可以把6加到Set中, 因为我们知道我们需要找到9的和。然...原创 2019-08-13 16:57:13 · 176 阅读 · 0 评论 -
JS打字特效 JS 原生代码
打字效果的带链接的新闻标题body{font-size:14px;font-weight:bold;}最新内容:var NewsTime = 2000; //每条新闻的停留时间var TextTime = 50; //新闻标题文字出现等待时间,越小越快var newsi = 0;var txti = 0;var txttimer;var newstimer;var原创 2017-03-22 20:10:26 · 1218 阅读 · 0 评论 -
微信小程序获取formId (批量获取)
针对微信小程序发送模板消息需要的formId,本人表示有的时候很头疼,所以给他家提供了一个收集formId的简单方法:<form bindsubmit="form_submit" report-submit='true'> <button form-type="submit" class='formid'></button></form&g...原创 2018-10-24 11:27:18 · 9551 阅读 · 2 评论 -
你(可能)不知道的 WEB API
简介作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多。本篇文章主要选取了几个有趣且有用的webapi进行介绍,分别介绍其用法、用处以及浏览器支持度,同时我也分别为这几个api都做了一个简单的demo(真的很简单,样式等于没有~)这几个api分别是:page lifecycle onlineState 利用deviceOrienta...原创 2019-09-04 20:10:50 · 221 阅读 · 0 评论 -
JS 冷门知识
监听网络状态navigator.onLine 方法代码如下:/* 监听网络状态 */mounted(){ let that = this; window.addEventListener('online', that.update, true); window.addEventListener('offline', that.update, true);...原创 2019-09-12 19:59:52 · 469 阅读 · 0 评论 -
JavaScript-你可能不了解的块级作用域
先来两个"栗子"尽管你可能连一行带有块级作用风格的代码都没有写过,但是你这种常见的JavaScript代码一定很熟悉:for (var i = 0; i < 5; i++) { console.log(i);}我们在for循环中直接定义了变量i,通常我们只想在循环体内部的上下文环境中使用i,但是事情并不是向着我们希望的发展,i会被隐式的绑定到外面的作用域...原创 2019-09-25 09:56:00 · 528 阅读 · 2 评论 -
requestAnimationFrame的作用及使用
我们平时实现JavaScript动画效果时离不开setInterval或者setTimeout函数,这两个函数本质上相同的。以setInterval为例,他的作用是以相同的时间间隔执行某个操作,这个时间可以自定义,利用这个特性我们就可以让然也元素跑起来。可是这个函数有个毛病,他和显示器的刷新频率无法对应。比如说显示器每100毫秒刷新一次,setInterval函数设置的间隔执行也是100毫...原创 2019-09-27 10:08:00 · 1368 阅读 · 0 评论 -
一看就懂的vue环境变量配置
这是基于cli3.x版本的环境变量配置指南。没有过多复杂的介绍,只有极简的实用配置。旨在给需要的朋友提供帮助以及自己温故知新,真正一看就会懂,懂了就能用。配置环境变量的目的项目开发过程中,至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同,若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生,我们只需做简单的配置...原创 2019-09-29 17:24:33 · 10630 阅读 · 2 评论 -
25种以上JavaScript速记编码技术
作者:Michael Wanyoike andSam Deeringhttps://www.sitepoint.com/shorthand-javascript-techniques对于任何JavaScript开发人员来说,这篇文章很值得一读。这里记录了我多年来学习的JavaScript代码简洁写法,也给大家提供一些编码上的思考和取舍。1. 三元(三目)运算符如果只想在一行中...翻译 2019-10-09 09:52:17 · 379 阅读 · 0 评论 -
vue里px转rem,适用于移动端
1.安装lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的,如果安装失败的话推荐用cnpm淘宝镜像安装npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm install lib-flexible --save2.引入lib-flexible在main....转载 2019-08-03 17:18:55 · 319 阅读 · 0 评论 -
姓名,身份证input验证过滤
在项目中总会出现一些身份校验的需求,今天跟大家说一下姓名和身份证的验证方法姓名验证:需求,可输入英文、汉字for(let i=0;i<e.length;i++){ if(/^[a-zA-Z\u4e00-\u9fa5]+$/.test(e[i])){ this.ruleForm.name= e; }else{ if(i == 0){ ...原创 2019-08-02 17:56:36 · 1611 阅读 · 0 评论