JS
pspxuan
这个作者很懒,什么都没留下…
展开
-
Generator 函数基本用法以及原理探究
generator 函数是 ES6 提供的一种异步编程解决方案。yield 表达式是暂停标记;函数执行到此处会暂停。一个基本的 generator 函数如下。原创 2023-01-18 16:58:28 · 237 阅读 · 0 评论 -
原型以及原型链底层探究
prototype 也是原型继承的基石,有它才有原型以及原型链;也是原型链的顶点。原创 2023-01-12 19:31:22 · 691 阅读 · 0 评论 -
js 浏览器执行过程
当浏览器引擎拿到javascript源码时,会将js代码 转为 ast 树,这个过程就是预编译的过程,当 ast 构建完毕时,则代表预编译完毕,可以开始按照 ast 执行代码。原创 2022-12-12 14:47:36 · 365 阅读 · 0 评论 -
promise 原理解析
1. 基本功能实现思路:(当前不考虑链式调用)promise 实例化时 会传入一个函数,函数有俩个参数直接执行这个函数根据这两个参数(函数),去改变函数的状态,并且储存传递的值调用方法时(.then),根据当前 promise 的状态去做不同的操作调用 .then 时,如果是 resolve 或者 reject 状态, 则直接异步执行当前传入的函数(.then中的函数);如果是 pending 状态,则当前 promise 没有执行 resolve 或者 reject 函数(可能是异步执行原创 2022-02-19 20:09:39 · 907 阅读 · 0 评论 -
el-tree组件踩坑
业务逻辑问题: tree 组件中,同一选项会出现多次,这样使用 id 指定 key 值时会出现交互问题,element 默认 key 值唯一如下解决方法:自己循环所有数据项,创建新的 key 值,例如:语文组-张三 英语组-张三等。再根据 key 值去操作 tree 中的节点是否勾选...原创 2021-11-24 17:33:08 · 305 阅读 · 0 评论 -
vue 实现基础的拖拽排序
主要使用下面三个事件绑定@dragstart=func(index, e) 开始拖元素触发,作用于拖拽元素, index为拖拽开始的位置@dragover=func(index, e) 当元素拖动到drop元素上时触发,index为拖拽结束的位置@drop=func(index, e) 当元素放下到drop元素触发,index为拖拽结束的位置我主要是使用 @dragstart 以及 @drop 这两个事件// html<li v-for="(item, in原创 2021-11-10 17:57:15 · 1320 阅读 · 0 评论 -
vscode eslint格式化配置
https://www.bilibili.com/video/BV1zq4y1p7ga?p=171原创 2021-09-12 19:31:47 · 231 阅读 · 0 评论 -
h5 唤起 app(ios,and),没下载则跳转下载链接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="utf-8"> <title>唤醒app</title> <div id="btn" style="font-size: 2.原创 2021-02-05 11:31:02 · 806 阅读 · 0 评论 -
前端获取用户 IP 地址
// 请求 soho 接口, 返回值如下: // var returnCitySN = {"cip": "120.228.1.183", "cid": "CN", "cname": "CHINA"}; <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> <script> // session储存 IP 地址,需要的时候再用 sessionStorage.setItem("userIp.原创 2020-10-15 17:43:18 · 2244 阅读 · 0 评论 -
响应式组件库
可适配移动端,纯 JS 原生编写原创 2020-08-26 21:35:32 · 310 阅读 · 0 评论 -
Typescript 简述
1. 概述Typescript 是 js 的超集(相当于 js 的扩展,并且这个扩展包含 js 的任何功能)ts 新增了 类型系统,代码更加易于维护,使用其开发大型项目更加友好Vue3 源码大部分使用 TS 重写,未来的趋势优势:类型化:开发类型化,有效避免了很多因语言本身的灵活所导致的 Bug 的出现提高代码可读增强了 API ,枚举等补充 API2.使用2.1. 原理TS => 解析 => JS => 浏览器执行 / node环境运行2.2. 安装npm原创 2020-08-11 20:41:17 · 382 阅读 · 0 评论 -
forEach 和 map
二者都是用来遍历数组的每一项,二者都不会通过处理遍历项 直接改变原数组1. forEach没有返回值,三个参数(数组项,下标,索引数组)可以通过改变 索引数组 或者 原数组 来更改数组,索引数组就是原数组的地址,可以通过改变它去改变原数组var arr = [1,2,3,4,5]arr.forEach((item, index, tempArr) => { tempArr[index] = item*10 // 等同于 arr[index] = item*10})console.l.原创 2020-06-20 20:02:01 · 571 阅读 · 0 评论 -
ES6 find / findIndex 底层详解
1.作用ES6 提供了 find 以及 findIndex 方法,可以让我们在数据中根据条件找出需要的项。二者原理相同,都接受一个回调函数。只是一个返回 符合条件的数据,一个返回符合条件的数据下标// find var a = [ { id: 1, name:'张三' }, { id: 2, name:'王五' }] var data = a.find(funct...原创 2020-04-21 16:35:07 · 685 阅读 · 1 评论 -
JavaScript 基础进阶(转载)
看了一个博主的前端基础进阶系列文章,对自己帮助很大。转载链接如下https://segmentfault.com/a/1190000012646488转载 2020-04-20 10:21:53 · 180 阅读 · 0 评论 -
Vue-cli3 项目优化
Vue 项目完成后,因导入了大量的或体积较大的依赖包以及插件,导致项目变得非常臃肿。下面通过几个方面来优化页面的用户体验以及提升页面的响应速度。1. nprogress 页面进度条效果1.1.使用效果在项目中安装使用 nprogress 依赖项,使用户获得更好的用户体验。使用后会在页面载入时出现页面顶部的进度条。效果如下:1.2.安装使用方法( vue ui 面板 )先在项目中下...原创 2020-04-10 16:27:36 · 369 阅读 · 0 评论 -
Cookies 和 Session 以及 webStorage 的作用与区别
Cookeis 和 Session 利用了浏览器的缓存机制,都可以用来保存用户的数据,得以和服务器进行交互。又因为 http 是无状态的,可以使用 Cookeis 和 Session 来保存用户的状态。1.Cookeis(保存在浏览器端)Cookies 是服务器向客户端发来的信息,以文本方式进行储存,每一次请求时携带 CookeisCookies 机制 分为两种情况:1.未设置过期时间...原创 2020-04-03 19:40:32 · 231 阅读 · 0 评论 -
鼠年学算法之 JS基础排序算法
马上就要过年了,趁着这段长假好好地研究一下基础的排序算法,先来看一张图稳定性:若是相邻的两个数字相等,排序后不会影响(交换)他们的位置不稳定性:相邻的两个数字相等,排序后有可能交换他们的位置内排序:所有排序都在内存中操作外排序:因为数据太大 ,需要把数据放在磁盘中,排序操作通过磁盘和内存的数据传输来运行时间复杂度:一个算法所耗费的时间空间复杂度:运行完一个程序所占内存的大小注意...原创 2020-01-21 13:28:28 · 287 阅读 · 0 评论 -
JS的数组方法简述
此篇博客为博主的随手笔记,写的比较简短。数组方法作用于原数组的方法:push unshiftpop shiftsortsplicereverse注意:除上述之外的方法都不会直接修改原数组1.push 和 unshift二者都是向数组添加成员push:向数组末尾添加一个或多个成员unshift:向数组头部添加一个或多个成员返回值:使用方法后数组的长度参数:想要添加的...原创 2020-01-03 15:39:17 · 123 阅读 · 0 评论 -
使selection 中的 option 标签支持事件监听
之前在学习过程中,发现 select 的 option 标签无法添加事件。查阅了一些博客资料后找到了答案。解决方法通常 option 标签不支持添加事件以及监听但若是往 select 标签中添加 size 属性,则可以解决此问题(size属性必须大于1 )下面看一看例子//HTML<select size="2" style="overflow: scroll;height: ...原创 2019-12-30 13:55:43 · 859 阅读 · 0 评论 -
JS数组去重
学习数组过程中接触到了去重的问题,下面来实现它数组去重有很多种方法,这里使用两种方法来研究1.数组去重1.1.ES6 Set数据结构Set结构 是ES6推出的新数据结构。类似与数组,下面来看一下它的特性。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。而数组去重就是利用了它的 ” 无重复值 ” 的特性来实现。let a...原创 2019-12-18 16:00:12 · 109 阅读 · 0 评论 -
JS实现冒泡排序(sort方法)
有几天没写博客,今天来写一个冒泡排序1.sort()方法arrayObject.sort(sortby) 方法用于对数组的元素进行排序。参数(可选):一个比较函数返回值:对作用数组的引用,直接改变原数组.注:若无参数,则按照字符编码的顺序进行排序下面来看一个例子let arr = [0, 2, 79, 125, 33, 5]//原数组arr.sort(function fun...原创 2019-12-17 16:29:30 · 1589 阅读 · 0 评论 -
JS深浅克隆(复制)函数的封装
在学习JS过程中,深克隆和浅克隆是我们一定会遇到的知识点,之前也学习过,但是如何去实现一个深复制和浅复制并没有去实践。今天就来剖析一下他们的概念和实现的具体操作1.浅复制简单来说就是复制该对象的指针而不是复制该对象,两个指针指向同一个地址(数据)// 方法一let obj1 = {name: "Bob"};let obj2 = obj1;console.log(obj2) // {na...原创 2019-12-13 17:27:54 · 514 阅读 · 0 评论 -
JS构造函数的封装规范
今天在学习JS过程中,了解到了JS构造函数的封装规范,下面简单记录一下1.为什么要使用构造函数进行封装?在很多企业开发中,相关技术人员可能不止你一个,可能有好几个甚至一个团队来协同进行开发,每个人各司其职,写不同的代码。那么为了各自写的功能易读写。都会吧自己写的功能封装成一个模块。这时,构造函数就起了很大的作用。2.如何进行封装?简单来说就是吧自己需要写的功能和变量,写在单独的模块里...原创 2019-12-05 15:58:21 · 861 阅读 · 1 评论 -
JS 属性描述符
属性描述符1.概述对象里目前存在的属性描述符有两种主要形式:数据描述符:是一个具有值的属性,该值可能是可写的,也可能不是可写的。存取描述符:是由getter-setter函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者。2.可选键值先来看看文档中的图片2.1数据描述符的可选键值从图中可以看到,只属于数据描述符的可选键值为 value 和 writabl...原创 2019-11-21 16:52:19 · 366 阅读 · 1 评论 -
JS可枚举属性
1.什么是枚举可枚举可以理解为是否可以被遍历被列举出来,可枚举性决定了这个属性能否被for…in查找遍历到。js中基本包装类型的原型属性是不可枚举的(不可被 for…in… 遍历),比如:Boolean,Number和String,即是基本类型,也是引用类型。基本包装类型还可以像引用类型一样访问它自带的一些方法,但是不能像引用类型那样自定义方法。var num = new Number...原创 2019-10-25 17:26:18 · 7098 阅读 · 2 评论 -
Array.prototype.push() 源码探究
在学习阮一峰老师的《ES6入门》的数组的扩展运算符时遇到了这样一串代码// ES5的 写法var arr1 = [0, 1, 2];var arr2 = [3, 4, 5];Array.prototype.push.apply(arr1, arr2);// ES6 的写法let arr1 = [0, 1, 2];let arr2 = [3, 4, 5];arr1.push(......原创 2019-10-21 21:55:43 · 673 阅读 · 0 评论 -
使用JS获取当前时间,并实时更新
话不多说,直接上代码function getDate(){ var myDate = new Date(); //实例化Date函数,获取日期等时间 console.log(myDate) //Wed Oct 16 2019 10:30:02 GMT+0800 (中国标准时间) myDate.getYear(); //获取当前年...原创 2019-10-16 10:48:36 · 3316 阅读 · 0 评论 -
关于setTimeout深度理解
这两天在学习过程中,经常用到了setTimeout( ) 方法,详细了解后发现,这个方法并不是以前想的那么简单,网上看了很多网友的实例,很受启发。下面根据实例再来重新梳理一下1.setTimeout( )基本概述setTimeou方法可以使函数按要求延迟一段时间执行,并且可以传递参数setTimeout(function/code, milliseconds, param1, param2...原创 2019-10-13 12:08:12 · 306 阅读 · 0 评论