JavaScript
文章平均质量分 65
js随笔
岳清流云
不积跬步无以至千里
展开
-
TS 枚举、泛型、类、Partial和Required
抽象类内部的抽象属性和抽象方法需要被继承的类来实现,但它内部的普通属性和方法则可以直接被继承使用。枚举的作用很简单,就是用来列举数据,管理一系列数据的,让数据分类更加直观和可读,利于维护。一个类继承了一个接口后,也必须将这个接口的所有属性和方法 实现 ,和抽象类性质也是一样的。泛型就是将类型也参数化,有时类型不明确,需要在用到时候才能指定,这时就可以使用泛型。它本身不能实例化,只能被继承,需要继承后的类来实现它内部的抽象属性和抽象方法。泛型用 T 代替,这个只是规范,用其他的字符代替也行,原创 2023-11-13 07:42:22 · 222 阅读 · 0 评论 -
TypeScript 接口 、类型别名
接口类型是一种自定义类型,可以让我们自定义出一种数据类型的格式,之后在声明这种类型时值的格式都必须按照接口说描述好的来定义。用type关键字可以声明类型别名,这个类型别名和接口其实有点类似,都是可以用来自定义一个类型。这里 [id:number] 代表的是下标的类型 后面代表的是值类型。这种方式声明的字段代表该字段不是必须的字段,可以不写。声明的字段代表该字段是只读,不可在改。代表返回值的类型为空,可以不返回值。用类型别名来声明一个函数的类型格式。声明一个接口是首字母应该大写。代表函数传入的参数的类型,原创 2023-11-08 08:14:00 · 77 阅读 · 0 评论 -
TypeScript 初识
并且因为ts是静态类型定义,它在你写代码的时候就会报错,而不是等到编译的时候才报错,而js是动态类型定义,你写代码的时候它是不知道这是什么类型的,要等到编译时才会知道类型,因此如果报错那就只会在运行的时候才会报错,这样就很不友好。例如下面的例子,我们直接调用number类型的toFixed方法,就会报错,因为它类型未知,并不确定是否是number类型,因此也就调用不了。ts 的关键之处就在于他的类型定义,在ts中我们给一个变量赋值了之后,他的类型就固定下来了,你可以去改它的值,但不能改变它的类型。原创 2023-11-06 07:34:10 · 59 阅读 · 0 评论 -
快速删除node_modules目录的方式
当安装了较多模块后,node_modules目录下的文件会很多,直接删除整个目录会很慢,下面介绍些快速删除node_modules目录的方法。方法一:使用rimraf模块的命令在全局安装rimraf模块,然后通过其命令来快速删除node_modules目录:npm install rimraf -grimraf node_modules方法二:使用命令来删除目录Windows下使用rmdir命令首先在cmd窗口中进入到node_modules文件夹所在的路径,接着执行命令:原创 2021-10-24 18:13:59 · 2365 阅读 · 0 评论 -
jsplumb 文档实例
https://github.com/wangduanduan/jsplumb-chinese-tutorial#211-%E9%99%90%E5%88%B6%E8%8A%82%E7%82%B9%E6%8B%96%E5%8A%A8%E5%8C%BA%E5%9F%9F转载 2021-07-23 16:35:59 · 288 阅读 · 0 评论 -
js 的 defineProperty 数据劫持
我们知道,在Vue中我们操作某个属性时vue可以实时响应,这是因为当一个vue实例被创建出来之后,它会生成一个Observer观察者实例,然后对vue中的对象属性进行遍历,通过defineProperty将它们转换为了getter和setter,当我们操作某个数据时,就会触发getter和setter,从而完成一个监听操作。下面我们详细解释一下defineProperty以及它的优劣所在:Object.defineProperty(obj,"",{})defineProperty总共有三个参数原创 2021-01-30 10:38:41 · 832 阅读 · 2 评论 -
Vue 路由机制的两种实现模式
Vue的路由机制主要是通过两种模式实现的第一种模式是hash模式 第二种是H5的history模式这是默认的hash模式的路由:改成history模式后const router = new VueRouter({ mode:"history", routes})export default routerHash模式hash模式是以url的hash值来作为路由,这也是vue的默认模式;hash模式的原理是动态的更改location.hash的值原创 2021-01-30 09:22:42 · 1430 阅读 · 0 评论 -
Js 详解事件循环 Event Loop,以及宏任务和微任务
要明白事件循环我们首先要了解渲染引擎渲染引擎是个多线程程序 它其中包含了四个线程js引擎线程 事件触发线程 定时任务线程 异步任务线程首先呢 js中包含了同步任务和异步任务两种,首先js引擎线程会创建一个执行栈,所有的同步任务都会被放到这个执行栈中来执行 同时事件触发线程管理着一个任务队列,当一个异步任务被触发后它内部的回调函数就会被放到这个任务队列中,注意此时它并不会执行这个回调函数,只是将它放入任务队列。 然后等js引擎线程中的执行栈中的同步任务执行完成之后,它就会去读取原创 2021-01-19 12:20:09 · 184 阅读 · 0 评论 -
Vue过场动画判断是进入还是退出 一行代码 完美解决
在Vue开发中 我们有时需要给场景切换加上一个过场动画 但是有一个难题 过场动画如何判断到底是进还退出的我在网上也找过很多方法,比如最常见的就是给路由的meta中加一个标识 通过标识判断大小 从而知道是退是进但是如果路由很多,怎么办,那要判断标识都是一个难题,苦思冥想许久,突然想到一个究极解决办法,我们可以通过时间来判断啊,我们在路由守卫中,每当进入一个路由之前,给他加个时间戳router.beforeEach(async (to, from, next) => { i原创 2020-12-31 15:06:49 · 351 阅读 · 1 评论 -
js 动态拼接正则表达式
在js中很多时候我们都需要使用正则 比如这里我利用正则查找字符 a 后面跟着一个或多个空格的内容,我们便可以这么做let str = "abcdefa aab bb"let reg = /a\s.*/console.log(reg.exec(str))但如果我们把条件改了,我们要查找字符b后面跟着一个或多个空格的内容,那我们不可能去再重新写一个正则这是我们便可以动态的去拼接正则,再js中不能直接使用常规的字符串拼接方式来拼接,它必须使用eval来进行拼接let str =.原创 2020-10-26 18:29:02 · 6836 阅读 · 0 评论 -
如何重置 Vue 中 data 的数据为初始状态
在vue中有时我们需要将data中的数据重置为初始状态,例如我们发布一篇文章,发布完成之后我们希望和表单双向绑定的对象重置为初始状态那么此时我们有两种办法,第一种,手动去给表单双向绑定的对象赋值为空data(){ return{ Notica:{ title:"", content:"", } ...原创 2020-04-01 15:42:32 · 4893 阅读 · 0 评论 -
关于在vue中使用amap高德地图插件出现的错误! iframe.postMessage 以及 onmessage 数据重复反馈的原因及解决办法
项目是用Vue做的 使用的是高德地图的插件需求是这样的 选择地址后,点击下面的地址列表中的某一个然后会返回这个地址的信息,例如名称,经纬度之类的,例如点击老成都返回老成都的地址信息我代码是这么写的HTML部分<iframe id="getAddress" @load="loadiframe" src="https://m.amap.com/picker/?key=...原创 2020-04-01 15:21:20 · 1198 阅读 · 0 评论 -
JavaScript中 let ,const 和 var的区别
我们以前在js中常用的声明变量的方式是var,但在es6中新增了两个新的声明变量的方式,那就是let和const1 声明的区别首先是var声明的变量var声明的变量会触发变量声明提升变量声明提升说简单点就是说用var声明的变量可以在变量声明之前使用console.log(a);//undefinedvar a = 10;console.log(a);//10//这样写不...原创 2020-01-05 09:22:11 · 157 阅读 · 0 评论 -
原生js的Ajax请求详解
Ajax是可以用来与服务器进行通讯的一种技术,它可以在不刷新页面的情况下进行异步通讯并获得返回结果。Ajax常用的请求方式有两种,GET和POST,接下来将详细给出这两种请求方式的异同,以及Ajax使用时需要注意的地方。1 GET请求get请求一般用在向服务器请求某些资源,例如请求一段文章,或者一张图片等等。下面是完整的get请求的方式 我们可以看到,在获得XMLHttpReque...原创 2019-12-22 09:13:36 · 582 阅读 · 0 评论 -
vue clie 3.0 引入全局scss报错解决,已经解决
在vue.config.js中进行配置这是以前的配置方法这样进行配置后会报错module.exports = { css: { loaderOptions: { sass: { data: `@import "@/lib/hotcss/px2rem.scss";` } } }}改成这种形式,就能正常运行,将da...原创 2019-11-07 21:11:38 · 651 阅读 · 0 评论 -
原生js手写java链表集合
链表集合是java中的多种集合之一,从名字就能听的出,这种集合它的底层实现使用了链表。链表是一种数据结构,它的排列方式很像一根链条,链表是由很多节点组成的,每个节点包含三个属性,previous,Value,nextprevious存储着上一个节点,next指向下一个节点,value存储着当前节点的数据,链表就是使用这样的方式将每个节点连接在一起,像链条一样,环环相扣使用链表...原创 2019-10-19 08:20:12 · 162 阅读 · 0 评论 -
Javascript对象浅拷贝和深拷贝
javascript 中的引用数据用赋值运算符进行赋值时复制的是变量的引用地址 这就是我们所说的浅拷贝当进行浅拷贝时,拷贝后的变量和被拷贝变量其实都是引用的是一个地址也就是说当一个改变时 另一个也会跟着改变而在拷贝基本数据类型时 例如 numbar 整形时 拷贝的变量和被拷贝的变量没有直接关系,因为此时它们的拷贝是变量的值这是拷贝基本数据类型 此时拷贝的变量...原创 2019-07-09 20:00:24 · 91 阅读 · 0 评论 -
JavaScript面试题
同源策略同源策略可以防止javascript发起跨域请求,此策略可以防止页面上的恶意脚本利用该页面的文档对象模型去访问另一个网页敏感数据跨域1 什么原因导致了跨域浏览器的同源策略导致了跨域2 跨域如何解决服务器上设置代理页面iframe嵌套通讯 window.postmessagejsonp反向代理JSONPhttps://blog.csdn.ne...原创 2019-06-24 18:07:33 · 148 阅读 · 0 评论 -
js递归实现无限极ul分类
<!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-...原创 2019-06-11 14:57:14 · 1283 阅读 · 0 评论 -
原生js编写俄罗斯方块
效果如下html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-06-06 14:43:26 · 1451 阅读 · 0 评论 -
js制作Tab选项卡组件
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/tab.css"></head>...原创 2019-06-06 14:30:04 · 540 阅读 · 0 评论 -
js制作旋转木马轮播图效果
效果如下下面贴出所有代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2019-06-06 14:19:09 · 393 阅读 · 0 评论 -
js中对数组操作的函数
<script> var a = [['hehe','haha','houhou'],['呵呵','哈哈','吼吼'],"hehe"]; var b = [1,2,3,4,5,6]; console.log(a.join("--"));//以 -- 符号将数组分割成字符串 二维数组中的一维数组不会被分割,会被当成一个项 //合并数组 合并后的数组会...原创 2019-03-23 14:35:32 · 692 阅读 · 0 评论 -
prototype与__proto__
在js中 prototype属性是只有函数才能调用到的 而 __proto__属性是只属于对象的这里我们需要明白 __proto__的属性是永远由一个对象指向另一个对象的(就是指向它们的原型对象,也就是父对象) 也就是说儿子-->爸爸-->爷爷 这也就是所谓的原型链__proto__的作用就是,当我们访问一个对象中并不存在的属性时 __proto__便会去访问这个对象的爸爸...原创 2019-03-22 10:40:48 · 133 阅读 · 0 评论 -
js在不使用indexof的情况下查找字符串
//slice有两个参数 参数1为起始位置 参数2为结束位置 用来截取字符串 截取的区域不包括结束的位置function select(a,b){ let al = a.length, bl = b.length; for(let i = 0;i<bl;i++){ if(b.slice(i,i+al)==a){ document.write("-->"+i) ...原创 2019-03-16 14:12:14 · 542 阅读 · 0 评论 -
js冒泡排序
从小到大let arr = [1,7,5,9,3,6,2,8,4];let num;for(let i=arr.length-1;i>0;i--){ for(let j=0;j<i;j++){ if(arr[j]>arr[j+1]){ num = arr[j]; arr[j]=arr[j+1]; arr[j+1]=num; } }}从...原创 2019-03-16 13:17:13 · 122 阅读 · 0 评论 -
循环中break与continue的区别
<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title></head><body><script type="text/javascript"&a原创 2019-03-14 09:57:24 · 251 阅读 · 0 评论 -
js制作3d立体旋转相册
使用js做一个3d立体旋转相册可自由拖拽源码如下<!DOCTYPE html><html><head><meta charset="utf-8"> <title>1</title> <style type="text/css"> .main{ perspective: 800p...原创 2019-05-28 17:50:53 · 2893 阅读 · 0 评论