JS
文章平均质量分 75
记得抬头微笑
记得抬头微笑
展开
-
前端实现登录拼图验证
不知各位朋友现在在 web 端进行登录的时候有没有注意一个变化,以前登录的时候是直接账号密码通过就可以直接登录,再后来图形验证码,数字结果运算验证,到现在的拼图验证。这一系列的转变都是为了防止机器操作,但对于我们来说,有亿点麻烦,但也没办法呀。今天我们也一起实现一个拼图验证。原创 2023-01-17 15:17:17 · 8400 阅读 · 5 评论 -
Vue 实现拖拽模块(五) - 下 预览元件
本文主要介绍了预览元件数据,并根据配置事件去触发逻辑,具体如下:原创 2023-01-04 10:55:20 · 645 阅读 · 0 评论 -
Vue 实现拖拽模块(五) - 上 定义元件的触发事件
本文主要介绍了选中元件后配置元件的事件,同时支持配置触发方式、事件类型、事件参数(演示参数,可拓展...)原创 2023-01-03 15:47:49 · 1114 阅读 · 2 评论 -
Vue 实现拖拽模块(三)自定义拖拽组件的样式
本文主要介绍了 Vue 自定义拖拽组件的样式,元件支持通过右侧的属性样式配置元件的样式原创 2022-12-09 16:13:06 · 4103 阅读 · 3 评论 -
Vue 实现拖拽模块(二)自定义拖拽组件位置
上文介绍了 [拖拽添加组件](https://blog.csdn.net/qq_40146638/article/details/127686169) 的简单实现,本文将继续给大家分享如何自定义拖拽组件位置的简单实现,文中通过示例代码介绍,感兴趣的小伙伴们可以了解一下原创 2022-11-17 11:40:16 · 5883 阅读 · 7 评论 -
原生实现滑块解锁功能(简易版本)
本文实例为大家分享了 js 实现简单滑动解锁功能,供大家参考,具体内容有解锁功能、重置功能、进度条功能、结果提示功能、随机生成滑块位置。原创 2022-10-13 15:07:31 · 1397 阅读 · 0 评论 -
JS 获取图片的实际大小
根据图片链接获取图片大小,width/heightlet image = new Image() image.onload = function() { let width = image.width let height = image.height let fileSize = image.fileSize console.log(image)原创 2022-07-25 18:02:21 · 5622 阅读 · 0 评论 -
【初 / 中级前端面经】中小型公司面试时都会问些什么?
面经原创 2022-07-21 15:47:07 · 659 阅读 · 0 评论 -
使用 Fragment ,实现 Vue 的模板编译
Vue会把用户在template标签中写的内容进行编译,找出原生的html和非原生的html内容,经过处理生成Fragment,而Fragment会经过patch过程从而得到将渲染的视图中的Fragment,最后根据Fragment创建真实的DOM节点并插入到视图中,最终完成视图的渲染更新。AFragment是原生JS的一种创建文档片段的方法,如果我们对根元素中的每个元素做逐个处理的话,这会引起很大的性能问题,会多次触发浏览器的回流和重绘。......原创 2022-07-18 16:13:18 · 749 阅读 · 0 评论 -
Object.defineProperty 的用法
Object.definePropety() 的使用以及二次封装原创 2022-07-09 15:51:26 · 736 阅读 · 0 评论 -
彻底掌握 Promise - 原生 Promise.catch 的实现(七)
@[TOC](彻底掌握 Promise - 原生 Promise.catch 的实现(七))前言在之前的文章中我们实现了简易版本的 Promise 以及它的大部分原生方法提示:以下是本篇文章正文内容,下面案例可供参考Promise.catch 方法实现起来比较容易理解,所以本文中的描述可能较少Promise.catch 的实现在 Promise 内部使用 static 关键字定义一个静态方法catch 方法接收一个失败的函数作为参数创建一个 Promise 对象,调用失败的 r原创 2022-05-17 11:30:12 · 536 阅读 · 0 评论 -
彻底掌握 Promise - 原生 Promise.finally 的实现(六)
目录前言一、finally的使用方法具体使用方法执行结果二、实现原理三、具体实现总结前言在 [\[ 彻底掌握 Promise - 原生 Promise.all 的实现(四)\]](https://blog.csdn.net/qq_40146638/article/details/123813571) 中我们已经实现了 Promise 的 all 方法,下面这篇文章,主要讲述 Promise.finally 方法的实现。finally()方法返回一个Promise。在promise结束时,无论结果是原创 2022-04-22 11:47:46 · 3426 阅读 · 0 评论 -
彻底掌握 Promise - 原生 Promise.resolve 的实现(五)
目录前言一、resolve 的使用方法语法参数返回值示例1: 普通类型的调用示例1:执行结果示例2: 传入一个 Promise 对象示例2:执行结果二、实现原理三、具体实现总结前言在 [\[ 彻底掌握 Promise - 原生 Promise.all 的实现(四)\]](https://blog.csdn.net/qq_40146638/article/details/123813571) 中我们已经实现了 Promise 的 all 方法,下面这篇文章,主要讲述 Promise.resolve 方法原创 2022-04-18 16:17:51 · 1912 阅读 · 2 评论 -
彻底掌握 Promise - 原生 Promise.all 的实现(四)
在 Promise 中内置了一些静态方法可以供我们更好的去处理异步操作,比如Promise.all语法 Promise 接收一个可迭代对象作为参数,也就是 Array、Set的数据结构,并且只返回一个Promise 的实例,返回结果是一个数组,数组包含了所有的回调结果。说明 此方法在集合多个 promise 的返回结果时很有用。 完成(Fulfillment): 如果传入的可迭代对象为空,Promise.all会同步......原创 2022-03-29 11:31:53 · 1351 阅读 · 0 评论 -
彻底掌握 Promise - 原生 Promise 的实现(三) 将then方法的回调函数变成可选参数
在 [ 彻底掌握 Promise-原生Promise的实现(二) ] 中我们在 Promise 简易版本的基础上,实现了 Promise 的链式调用和 Promise 执行过程中对函数执行的异常情况的处理。下面我们思考一个问题:如果 Promise 一直调用 then 方法不给他传递任何的回调函数的话,那么我们通过 resolve / reject 传入的值,会被第一个 then 方法获取到? 还是会被最后一个 then 方法获取到这个 resolve 中返回的值呢?......原创 2022-03-25 16:20:10 · 557 阅读 · 0 评论 -
彻底掌握 Promise-原生Promise的实现(二) Promise的链式调用
在 彻底掌握 Promise- 原生 Promise 的实现(一)已经初步实现了 promise 的简易版本,这距离实现完整版本的 Promise 还有一段距离,下面我们将在简易版本的基础上增加Promise 的链式调用 异步情况下 Promise 的链式调用 处理函数执行的异常情况以下代码都是对简易版本 Promise 去实现的,所以这里只显示变更的地方,完整版本在文末贴出Promise 的链式调用 下面我们依然还是通过逆解析的方式去通过 Promise 的链式调用的用法.....原创 2022-03-23 16:26:29 · 6032 阅读 · 0 评论 -
彻底掌握Promise-原生Promise的实现(一) Promise 的简易版本
Promise简介 在ES6(ES2015)正式发布时中,Promise被列为正式规范,作为ES6中最重要的特性之一。 Promise的出现主要是为了解决回调地狱问题,通过调用.then方法逐层去向下调用 Promise 对象有以下两个特点:1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:pending: 初始状态,不是成功或失败状态。 fulfilled: 意味着操作成功完成。 reject......原创 2022-03-21 16:58:47 · 787 阅读 · 4 评论 -
JS中的浅克隆与深克隆
JS中的克隆原创 2020-10-15 16:04:37 · 453 阅读 · 4 评论 -
ES6的reduce用法
1. 求和数组(基本用法)let list = '12345'.split('')const total = list.reduce((val, oldVal) => val + oldVal)console..log(total) // 152. 去重数组原创 2020-08-24 18:27:51 · 7239 阅读 · 0 评论 -
JS的变量声明方式以及区别类型
目录 JS的数据类型 JS的变量JS的数据类型1.String(字符串)2.Number(数值)3.undefined(表示未找到)4.null(空值)5.Boolean(布尔值 true/false)6.Object(对象)7.Symbol(ES6新增 表示一个唯一的值/标识)JS的变量声明方式变量的概念:变量是存储数...原创 2020-06-22 17:55:54 · 335 阅读 · 0 评论 -
JS通过原型链检测变量所属类型
1.Object.prototype.toString.call(a) // 所有类型都能判断 返回值为 [object type]Object.prototype.toString.call('An') // "[object String]"Object.prototype.toString.call(1) // "[object Number]"Object.prototype.t...原创 2020-06-22 17:54:24 · 330 阅读 · 0 评论 -
Vue在同一个页面的组件中向页面的URL增加参数
动态改变Vue中url的参数原创 2020-06-22 17:51:02 · 4441 阅读 · 1 评论 -
原生JS数组去重的多种方式
数组去重的方法原创 2020-01-08 15:26:44 · 517 阅读 · 0 评论 -
多维数组去重排序的简单方法
多维数组指的就是一个数组中包含多个数组原创 2020-01-07 10:22:26 · 766 阅读 · 0 评论 -
JS变量的多种声明方式和区别
JS变量的声明变量的概念:变量是存储数据值的容器。原创 2019-12-26 15:45:06 · 2668 阅读 · 0 评论 -
JS字符串的常用方法
常用字符串的方法1.str.charAt(1) 从一个字符串中返回指定位置处的字符let str = 'hello world'charAt()从一个字符串中返回指定位置处的字符 参数1: 下标 返回值: 下标位置处的字符 超出字符串长度返回空字符str.charAt(1) // String e // 从下标为1的位置返回它的值2.str.ch...原创 2019-12-24 18:40:31 · 191 阅读 · 0 评论 -
原生JS数组的常用方法 + 参数和返回值详细解释
JS中数组的常用方法包括ES6新增的方法原创 2019-12-24 16:47:25 · 621 阅读 · 0 评论 -
前端页面展示SQL语句或其他代码语句
今天接到一个有关于需要在前端展示SQL语句的需求,在网上找了好半天,本来我都打算使用txstarea来进行展示了。还是功夫不负有心人,终于被我找见了,感谢各位互联网大佬的无私贡献。实现效果功能涵盖大部分语言,应该是可以满足大部分需要在前端展示代码的功能需求。具体实现1.首先下载使用NPM包npm i vue-codemirror -S2.封装组件<templa...转载 2019-11-05 18:29:39 · 3883 阅读 · 3 评论 -
引入iconfont字体的使用方法
1.iconfont字体图标相对于图片来说的话,iconfont字体更容易控制、更小、更快加载。2.首先去iconfont(阿里巴巴矢量图)找到自己想要的图标,下载代码后再项目中引用这个iconfont包3.使用iconfont字体图标 1.打开解压后的iconfont字体图标库,打开demo_index.html文件复制 和 ...原创 2019-09-30 16:31:06 · 750 阅读 · 0 评论 -
ES7Array.includes与Arrary.indexOf的对比
ES7新增了includes()的方法 它的用法基本与indexOf()类似但是他们的区别在与返回值的不同let arr = [1, 3, 5, 7]console.log(arr.includes(1)) // 返回值为trueconsole.log(arr.indexOf(1)) // 返回值为下标当我们需要返回一个Boolean值对值的下标不是那么在意的情况下,可以尝试使用...原创 2019-09-09 14:52:07 · 346 阅读 · 0 评论 -
原生JS点击弹出窗以外的内容让元素隐藏
在工作中我们可能会遇到原生手写的Model,我们希望他的表现状态为点击除它的空白处让它消失(隐藏)。这里提供两个思路来解决这个对应的问题 1.首先如果的全屏的Model我会推荐你直接使用click方法写在父组件上面,这样来操作它的表现状态 2.如果是非全屏Model而我们想要它的表现状态为点击它之外的所有地方都希望能够关闭这个Model,我们可以用以下代码进行是实现 ...原创 2019-08-12 14:57:40 · 697 阅读 · 0 评论 -
input输入框正则验证大全
输入大小写字母、数字、下划线:<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"> 输入小写字母、数字、下划线:<input type="text" onkeyup="this.value=this.value.replace(/[^a-z0-9_]/g,'');"&...转载 2019-06-06 16:53:19 · 1056 阅读 · 0 评论