JavaScript
文章平均质量分 70
淘淘是只狗
努力码代码,给我的淘淘挣狗粮
展开
-
前端基础知识练习题---Promise + async/await 练习题
前端基础知识练习题原创 2021-12-12 10:15:44 · 1438 阅读 · 0 评论 -
前端基础知识练习题---原型链
前端基础知识练习题原创 2021-12-12 10:09:41 · 389 阅读 · 0 评论 -
前端基础知识练习题---闭包
前端基础知识练习题原创 2021-12-12 10:05:11 · 312 阅读 · 0 评论 -
前端基础知识练习题---This 练习题
前端基础练习题之 This原创 2021-12-12 10:01:23 · 1120 阅读 · 0 评论 -
推荐前端知识点好文
This《2w字大章 38道面试题》彻底理清JS中this指向问题 Promise/async/Generator9k字 | Promise/async/Generator实现原理解析 【建议星星】要就来45道Promise面试题一次爽到底(1.1w字用心整理)原创 2021-12-05 07:58:03 · 633 阅读 · 0 评论 -
JavaScript设计模式 ---- 从买房子看(发布-订阅者)模式
不论是在程序世界里还是现实生活中,发布—订阅模式的应用都非常之广泛。举个例子????:玛卡巴卡在网上看上一个小推车,但联系到卖家后,发现小推车卖光了,但是玛卡巴卡对这个小推又非常喜欢,所以就联系卖家,问卖家什么时候有货,卖家告诉她,要等一个星期后才有货,卖家告诉玛卡巴卡,要是你喜欢的话,你可以收藏我们的店铺,等有货的时候再通知你,所以玛卡巴卡收藏了此店铺。唔西迪西和依古比古看了图片之后,也喜欢这个小推车,也收藏了该店铺;等来货的时候就依次会通知他们。你看这是一个典型的发布订阅模式,卖家是属于发布者,玛原创 2021-11-28 11:12:30 · 336 阅读 · 0 评论 -
forEach中return有效果吗?如何中断forEach循环?
在forEach中用return不会返回,函数会继续执行。arr.forEach(callback[, thisArg]),callback会接收到三个参数:currentValue、index、array。var ary = ["JavaScript", "Java", "CoffeeScript", "TypeScript"];ary.forEach(function (value, index, _ary) { console.log(value); return value ===原创 2021-11-27 18:25:08 · 3145 阅读 · 0 评论 -
Vue 项目中配置 service worker
使用 vue-cli 创建项目,在配置项中选择 PWA。脚手架就会搭好基本的框架。这个时候不做任何的额外配置也是正常使用。当然,只有打包之后在线上,猜可以看到效果。根目录下新建 server.jsvar express = require('express');var app = express();const hostname = 'localhost';const port = 3838;app.use(express.static('./dist'));app.listen(por.原创 2021-11-14 15:42:08 · 3552 阅读 · 0 评论 -
setTimeout() 和 setIntervale() 小结
setTimeout() JavaScript语言是单线程语言,它有一个叫做执行队列的东西来决定代码的执行顺序,而定时器的作用是:在特定的时间后将代码插入到执行队列。这里要特别理解:定时器setTimeout(function, Interval)这里的Interval是指当Interval个单位时间过去之后将代码function插入到执行队列中,而不是过去Interval个单位时间之后执行function代码。也就说明代码的执行的时间将大于等于Interval。使用 setTimeo原创 2021-10-13 17:03:35 · 186 阅读 · 0 评论 -
JavaScript 中的集合
对于任何 JavaScript 程序来说,对数据的结构化组合和访问都是一个关键部分。这个语言从一开始到现在,创建数据结构的主要机制一直都是数组和对象。当然,基于它们已经建立了很多作为用户库的高级数据结构。1.TypedArrayTypedArray 对象描述底层的二进制数据缓冲的阵列状的图。没有命名的TypedArray全局属性,也没有直接可见的TypedArray构造函数。相反,有许多不同的全局属性,其值是特定元素类型的类型化数组构造函数。new TypedArray(); // new in原创 2021-10-05 16:35:19 · 473 阅读 · 0 评论 -
来一个前端闭包知识点
什么是闭包MDN 对闭包的定义为:闭包是指那些能够访问自由变量的函数。自由变量:是指在函数中使用的,但既不是函数参数也不是函数的局部变量的变量。闭包共有两部分组成:闭包 = 函数 + 函数能够访问的自由变量。闭包是指有权访问另外一个函数作用域中的变量的函数。闭包是一种特殊的对象,它由两部分组成:执行上下文(代号 A),以及在该执行上下文中创建的函数 (代号 B),当 B 执行时,如果访问了 A 中变量对象的值,那么闭包就会产生,且在 Chrome 中使用这个执行上下文 A 的函数名代指闭包。fu.原创 2021-09-27 10:32:08 · 239 阅读 · 0 评论 -
OJ输入练习(JS 版)
OJ 练习写这一篇的目的是因为我没有参加算法比赛的经验,平常练习也是在 LeetCode 上,使用都是核心代码模式。其实现在想想还挺简单的。系统输入的是一个字符串,那我们需要的可能是其中的数字,所以第一步就是需要对字符串进行切割成为字符串数组,第二步就是对其中的每一个元素使用 parseInt 做数字转换处理。最好的是我们封装一个函数,这样将取到的参数传入其中。如何,就可以像使用核心代码模式一样编写了。https://ac.nowcoder.com/acm/contest/5657/Alet l原创 2021-09-21 16:18:56 · 637 阅读 · 0 评论 -
优雅的函数式编程----JavaScript 的链式调用
1. 使用场景使用数组 API 处理数据[].map().filter().reduce()JQuery 方法$('text').css('color', 'pink').show()Loadsh 方法_([1, 2, 3]) .map((n) => n * n) .tap(console.log) .thru((n) => n.reverse()) .value()等等。。。。。2. 函数调用一般函数的调用方式:let f = { name: 'd原创 2021-09-09 20:28:43 · 1044 阅读 · 0 评论 -
JS 基本数据类型之 BigInt 的知识点
概念BigInt 是一种内置对象,它提供了一种方法来表示大于 253 - 1的整数。BigInt 可以表示任意大的整数。如何创建 BigInt ?可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ,如:120n,或者调用函数BigInt()。const theBiggestInt = 9007199254740991n;const alsoHuge = BigInt(9007199254740991);console.log(theBiggestInt, alsoHuge);//原创 2021-08-25 10:38:41 · 4956 阅读 · 0 评论 -
原生 JavaScript + Vue + React 三种方案实现放大镜效果
电商类的网站为了让顾客更加清晰的看见商品图片,一般会提供放大镜效果。今天我们就使用三种方法来实现一下这个效果说是三种,其实就一种,框架就是在原生的基础上适配一下语法我主要是为了方便使用框架的同学啥?为啥没有 angular,因为我不会不皮了,正文开始????????????????获取页面元素let smallImg = document.getElementById("smallImg");let smallDiv = document.getElementById("sma原创 2021-07-06 10:01:15 · 758 阅读 · 1 评论 -
HTML5 的 video 标签,实现简易播放器
前置知识点:HTML <video> 元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放。currentTime:读取CurentTime返回一个双精度浮点值,指示以秒为单位的媒体的当前播放位置。如果video尚未开始播放,则会在开始播放后返回偏移量。通过CurentTime将当前播放位置设置为给定时间,会在加载媒体时将媒体查找到该位置(从指定的位置开始播放)。duration(只读):一个双精度浮点值,它指示媒体的持续时间(总长度),以秒为单位,在..原创 2021-06-04 13:29:11 · 1552 阅读 · 0 评论 -
详解 JSON.stringify 和 JSON.parse
历史????: 2006 年,Douglas Crockford 在国际互联网工程任务组(IETF,The Internet Engineering Task Force) 制定了 JavaScript 对象简谱(JSON,JavaScript Object Notation)标准,即 RFC 4627。但实际上,JSON 早在 2001 年就开始使用了。JSON 是 JavaScript 的严格子集,利用 JavaScript 中的几种模式来表示结构 化数据。Crockford 将 JSON 作为替代原创 2021-05-25 13:52:40 · 470 阅读 · 1 评论 -
V8引擎的垃圾回收机制
在服务端,资源向来寸土寸金,要为海量用户服务,就得使一切资源都要高效循环利用。V8 的垃圾回收机制与内存限制JavaScript 的垃圾回收由垃圾回收机制进行自动内存管理,使得开发者不需要在编写代码的过程中时刻关注内存的分配和释放问题。对于性能敏感的服务端程序,内存管理的好坏,垃圾回收状态是否优良,都会对服务构成影响。在 Node 中,这一切都与 Node 的 JavaScript 执行引擎 V8 息息相关。Node 与 V8V8 出现后,JavaScript 一改之前作为脚本语言性能底下的形象.原创 2021-05-12 11:05:28 · 592 阅读 · 1 评论 -
JavaScript 入门基础之自己实现一个类似 Set 的数据结构
基本的数据结构function Set() { // collection 变量用来存储集合中的元素 var collection = []; // 当集合中存在 element 元素时返回 true 否则返回 false this.has = function(element) { return (collection.indexOf(element) !== -1); }; // 该方法会返回集合内所有元素 this.values原创 2021-04-09 09:35:22 · 264 阅读 · 0 评论 -
JS正则表达式入门
文章目录正则表达式1. 使用测试方法2. 匹配文字字符串3. 同时用多种模式匹配文字字符串4. 匹配时忽略大小写5. 提取匹配项6. 全局匹配7. 用通配符.匹配任何内容8. 将单个字符与多种可能性匹配9. 匹配字母表中的字母10. 匹配字母表中的数字和字母11. 匹配单个未指定的字符12. 匹配出现一次或多次的字符13. 匹配出现零次或多次的字符14. 用惰性匹配来查找字符15. 在狩猎中找到一个或多个罪犯16. 匹配字符串的开头17. 匹配字符串的末尾18. 匹配所有的字母和数字19. 匹配除了字母和数原创 2021-04-02 21:45:26 · 1507 阅读 · 0 评论 -
超好用的原生 JS + Canvas 进行图片压缩
<!DOCTYPE html><html><head></head><body> <input type="file" id="upload"> <p id="p"></p> <script> const ACCEPT = ['image/jpg', 'image/png', 'image/jpeg', 'image/webp']; // 限定图片文件类型 c.原创 2021-01-03 17:06:54 · 156 阅读 · 0 评论 -
HTML5 新特性drag API 实现图片拖拽功能(原生JS,Vue, React)
拖拽事件在IE4的时候,Js就可以实现拖放功能了,当时只支持拖放图像和一些文本。后来随着IE版本的更新,拖放事件也在慢慢完善,HTML5就以IE的拖放功能制定了该规范,Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。 默认情况下,网页中的图像、链接和文本是可以拖动的,而其余的元素若想要被拖动,必须将 draggable 属性设置为true,这是HTML5规定的新属性,用于设置元素是否能被拖动。因此,图像、链接、文本的 draggable 属性默认为 true,.原创 2020-12-25 13:23:25 · 2769 阅读 · 0 评论 -
从 B 站的秋季主题中学习 “图层组合动画”
原文链接:https://github.com/a1029563229/blogs/blob/master/BestPractices/bilibili/Banner.md从 B 站的秋季主题中学习 “图层组合动画”众所周知,B 站 是个适合学习的好网站,我们团队的小伙伴也是经常上 B站 学习。某一天在 B站 学习的时候,发现 B站 已经开启了秋季主题,并且在头图的这个交互上还内有乾坤。随着我们的鼠标变换位置,头图也跟随着我们的鼠标位置进行变换,配上秋季主题,显得特别治愈。(如下图)那接下来我们直转载 2020-12-25 12:47:49 · 107 阅读 · 0 评论 -
用 Canvas 编织璀璨星空图
原文链接:https://www.jianshu.com/p/f5c0f9c4bc39用 Canvas 编织璀璨星空图GitHub项目: CyandevToys / ParticleWeb是不是还蛮酷的呢?本文我们就来一点一点分析怎么实现它!分析首先我们看看这个效果具体有那些要点。首先,这么炫酷的效果肯定是要用到 Canvas 了,每个星星可以看作为一个粒子,因此,整个效果实际上就是粒子系统了。此外,我们可以发现每个粒子之间是相互连接的,只不过离的近的粒子之间的连线较粗且透明度较低,而离的远的则相转载 2020-12-23 21:51:55 · 253 阅读 · 0 评论 -
入门 RESTful
REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,什么鬼?其实网上 RESTful 的文章有挺多的,不过有些讲的糊里糊涂的,而且很大部分都忽略了 HATEOAS。就面向资源呗,不加动词咯,还能咋滴,我加动词不也能用吗?为啥这叫架构?软件架构是有关软件整体结构与组件的抽象描述,用于指导大型软件系统各个方面的设计。RESTful 哪有什么组件和结构之间的玩意?个人只能理解成 RESTful 风格的 API 设计 RESTfu原创 2020-12-23 21:48:44 · 180 阅读 · 0 评论 -
原生JS实现登录后复制文字
<html><head> <title>Get selected text with JavaScript</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://s3.pstatp.com/cdn/expire-1-M..原创 2020-12-20 20:59:48 · 635 阅读 · 0 评论 -
JavaScript 应不应该加分号
学前端两年了,这个问题其实之前没有纠结过。因为之前写原生 JS 的时候,确实没有碰到过这个问题。后来使用 Vue 开发的时候,eslint 的配置里面通常都是加分号报警告的,所以一直以来都是省略分号。最近在复习前端知识,突然之间的报错,让我有点措不及防。let x0 = 0 (function autorun1() { let x1 = 1 (function autorun2() { let x2 = 2 (function autor原创 2020-12-06 08:14:59 · 485 阅读 · 0 评论 -
canvas 基本知识点详解与案例分析---你确定不来看一下?
这次我整了个静态页面,大家就直接体会体会。代码写多了。容易烦, 随手画画,解解压<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <原创 2020-11-29 13:51:45 · 370 阅读 · 1 评论 -
简陋版 MVVM 原理实现
笔者也是第一次学习这个原理,听不懂的东西还挺多的,所以代码能用的就用,视频文章尾部自取。视频中所讲的代码,大致如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</原创 2020-11-19 21:39:10 · 289 阅读 · 0 评论 -
原生 JS 实现视频弹幕功能
效果还行吧,大概就不到 150 行代码即可。快点学起来吧<!DOCTYPE html><html><head> <title>视频弹幕</title> <style> * { padding: 0; margin: 0; } /* 通过标签名称设置样式 */ body { background: rgb(245, 245, 245); .原创 2020-11-19 21:32:46 · 825 阅读 · 0 评论 -
前端老土告白页面
为啥说老土,因为我觉得老土。作为一名 20 岁的小姑凉,感觉这页面确实老土。(虽然我写不出来,但这依然不妨碍我觉得它老土)这是我刚刚学习前端的时候收集,因为我喜欢花里胡哨的页面。今天整理文件夹的时候发现的。各位觉得有用的,就自取吧。(看看就好,千万别用。忠告哈~~~~)链接:https://pan.baidu.com/s/1pGuEbsRLq1mv0YHqLcKSIw提取码:nqrq...原创 2020-11-18 11:15:40 · 365 阅读 · 0 评论 -
原生JS实现打砖块,贪吃蛇,弹球小游戏
来来来,先上效果图话不多说,放代码1.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-11-18 09:32:23 · 445 阅读 · 2 评论 -
正则神器any-rule
正则神器:https://github.com/any86/any-rule火车车次/^[GCDZTSPKXLY1-9]\d{1,4}$/手机机身码(IMEI)/^\d{15,17}$/必须带端口号的网址(或ip)/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/网址(url,支持端口和"?+参数"和"#+参数)/^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]原创 2020-11-05 16:45:26 · 757 阅读 · 0 评论 -
初识 WebSocket,建立简易聊天室
新建 index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h.原创 2020-10-19 08:23:36 · 339 阅读 · 0 评论 -
纯 CSS,原生 JavaScript,jQuery,Vue,React 实现轮播图, 一篇文章帮你全部搞定
平常开始都是使用组件库进行开发,里面的轮播图都是组件库封装好的,今天我们就来自己实现一个轮播图。体验一下原生开发,操作 dom 带来的快落吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=0">原创 2020-10-15 19:56:54 · 560 阅读 · 0 评论 -
原生JS实现简单富文本编辑器
<!doctype html><html><head> <title>Rich Text Editor</title> <script type="text/javascript"> var oDoc, sDefTxt; function initDoc() { oDoc = document.getElementById("textBox"); sDefTxt = oDoc.inn原创 2020-09-23 21:50:34 · 2251 阅读 · 0 评论 -
JavaScript 实现抽奖程序
function draw (first = 1, second = 3, third = 5) { let firstPrize = ['1A', '1B', '1C', '1D', '1E'] let secondPrize = ['2A', '2B', '2C', '2D', '2E', '2F', '2G', '2H', '2I'] let thirdPrize = ['3A', '3B', '3C', '3D', '3E', '3F', '3G', '3K', '3O', '3P']原创 2020-09-11 08:10:44 · 768 阅读 · 0 评论 -
前端使用 easyMock 和 Mock.js 实现模拟数据
通常的开发都是前后端分离的,而前端的小伙伴需要一些数据来开发页面,这时我们可以使用 mock 进行数据的模拟。使用的方法也很简单。登录 easy-mock 官网 https://www.easy-mock.com/login注册自己的账号点击创建之后的新项目创建你需要的接口这里可以使用 Mock.js 的规则填写,使得接口的创建更加方便快捷Mock.js 官网 http://mockjs.com/例如这样填写{ "code": 0, "result": { "p原创 2020-09-08 09:01:00 · 645 阅读 · 0 评论 -
reveal.js 入门使用方法
程序员做PPT不需要 PowerPoint,reveal.js是能够让我们很轻易地使用 HTML 创建一个漂亮的演示文稿的插件1. 上官网 https://revealjs.com/2. 下载 https://github.com/hakimel/reveal.js/releases我下载的是最新版(4.0.2)解压到相对应的文件夹,3. 新建一个文件夹,将 dist,plugin 文件夹移过去。新建 index.html,因为要用到图片比较多,可以在根目录下新建一个 img 文件夹。之后的目录原创 2020-07-15 08:22:20 · 7451 阅读 · 2 评论 -
我可以自己 New 一个对象吗?
1.原创 2020-05-01 15:49:37 · 362 阅读 · 0 评论