
js
无声的code
指尖下的代码,头顶上的星空
展开
-
简谈promise和async、await的区别
1、pomise2、async,await原创 2023-03-22 00:19:54 · 303 阅读 · 0 评论 -
在 Vue 里如何优雅的清除一个定时器?
前言清除定时器,相信有相当一部分人是这么写的:export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer)原创 2021-07-22 16:53:22 · 4435 阅读 · 1 评论 -
简单理解原型和原型链
1.JS中每个函数都存在有一个原型对象属性prototype。并且所有函数的默认原型都是Object的实例2.原型链,简单理解就是原型组成的链,对象的__proto__它的是原型,而原型也是一个对象,也有__proto__属性,原型的__proto__又是原型的原型,就这样可以一直通过__proto__想上找...原创 2021-07-12 08:33:15 · 503 阅读 · 0 评论 -
promise的内部实现原理及常见问题
优点1.Promise 是一种封装和组合未来值得易于复用机制,实现关注点分离、异步流程控制、异常冒泡、串行/并行控制等2.Promise会做出正确延时或异步操作,会解决callback处理异步回调可能产生的调用过早,调用过晚、调用次数过多过少、吞掉可能出现的错误或异常问题等,只接受首次 resolve(…)或 reject(…) 决议,本身状态转变后不会再变,所有通过 then(…) 注册的回调总是依次异步调用,所有异常总会被捕获抛出then 回调异步执行1)Promise 实例化时传入的函数会立即原创 2021-06-16 13:52:20 · 315 阅读 · 0 评论 -
同步与异步的详细区别
简单介绍:同步(Synchronization):任务顺序执行,在上一个任务未执行完成之前下一个任务等待执行。异步(Asynchronous ): CUP暂时搁置当前任务,等到主线程任务执行完成,再来响应该任务。运行机制:所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。主线程之外,还存在一个“任务队列”(task queue),只要异步任务有了运行结果,就在“任务队列”中放置一个事件。一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任原创 2021-06-16 11:20:03 · 1465 阅读 · 0 评论 -
eventBus实现源码
class EventBus{ constructor(){ this.event=Object.create(null); }; //注册事件 on(name,fn){ if(!this.event[name]){ //一个事件可能有多个监听者 this.event[name]=[]; }; ...原创 2020-11-19 14:48:53 · 141 阅读 · 0 评论 -
nexttick的实现方式
1.先判断Promise2.在判断MutationObserver3.在判断setImmediate4.最后setTimeout如果以上都不支持就只能用setTimeout来完成异步执行了延迟调用优先级如下:Promise > MutationObserver > setImmediate > setTimeout每次event loop的最后,会有一个UI render,也就是更新DOM只要让nextTick里的代码放在UI render步骤后面执行,就能访问到更新后的DO原创 2020-11-19 14:35:43 · 511 阅读 · 0 评论 -
es6 class实现方法
//转义前 class Parent{ constructor(name,age){ this.name = name this.age = age } //类公有方法 sayName(){ console.log(this.name) } //静态方法 static sayhi(){ console.log(this.name) } } //经过babel官网转义后 var Parent = .原创 2020-11-19 14:17:19 · 382 阅读 · 0 评论 -
forEach实现原理
1.forEach为es6新增的辅助迭代器,作用是对调用者的元素进行遍历并进行相关操作;2.仅能被数组或者使用document.querySelectorAll获取到的类数组进行调用;3.第一个参数为回调函数,其接收的参数依次为当前元素(必填),当前元素的索引值(可选),当前对象所属的数组对象;第二个参数可以限定回调函数内this的指向;4.在回调函数内部无法使用break来跳出循环,也不能使用return来返回外层函数 Array.prototype.forEach = function(call原创 2020-11-18 08:42:40 · 1245 阅读 · 0 评论 -
new操作符,做了哪些事情
1.创建一个新对象2.将构造函数的this指向这个新对象 – call,apply皆可3.原型链继承4.返回新对象原创 2020-11-18 08:32:29 · 415 阅读 · 0 评论 -
vue中 axios怎么封装?
import axios from 'axios'axios.defaults.baseURL = ...axios.defaults.timeout = 10000;axios.defaults.headers.post['Content-Type'] = 'application/json';//请求拦截axios.interceptors.request.use(config => { //可在此处登入 return config;}, error => { r原创 2020-09-16 08:25:32 · 206 阅读 · 0 评论 -
vue管理系统,后台权限的控制
权限被管理员修改后立即生效对于权限控制,需求大致为如下:1.对于大模块的限制,比如需要通过路由跳转的模块,这时需要进行路由拦截2. 对于小功能的限制,比如一个按钮,如果没有特定权限,那么这个按钮就不显示安全行考虑将存储放在localStorage中来实现长久存储,这种实现方式是很不可取的,因为hacker可以通过手动更改存储的信息来实现获取特定权限,甚至系统都没有做路由拦截,如果知道模块的路由,可以直接通过输入路由信息来直接跳转到特定模块。权限被管理员修改后立即生效我的做法是,获取到权限列表后原创 2020-09-08 10:20:45 · 288 阅读 · 0 评论 -
js数据类型
js的数据类型的转换在 JS 中类型转换只有三种情况,分别是:1.转换为布尔值2.转换为数字(调用Number,parseInt()和parseFloat())3.转换为字符串(调用toString()或者String()方法)JS中数据类型的判断(typeof,instanceof,constructor,Object.prototype.toString.call())...原创 2020-06-30 09:32:05 · 103 阅读 · 0 评论 -
ES6常用单容易被忽略的方法
1.has(1)has方法用来拦截HasProperty操作(注意不是HasOwnProperty,即has方法不判断一个属性是对象自身的属性,还是继承的属性。),即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是in运算符。可以接受两个参数,分别是目标对象、需查询的属性名。(2)用于隐藏某些属性// 隐藏_开头的属性var handler = { has (target, key) { if (key[0] === '_') { return false;原创 2020-06-28 17:08:29 · 640 阅读 · 0 评论 -
js中如何准确判断一个变量的类型?
JS基础变量类型在JS中,有6种基本数据类型和一种复杂数据类型,基本数据类型有:undefined,Null,Boolean,Number和String,es6中,还有Symbol;复杂数据类型有:Array,Function,date等等typeof判断变量类型typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回object。instanceof检查ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与原创 2020-05-20 11:23:20 · 1259 阅读 · 0 评论 -
了解前端监控和埋点(持续更新中,,,)
基本概念:前端埋点主要是为了运营以及开发人员采集用户行为数据,以及页面性能等数进行后续的数据分析。埋点的目的:在现今用户就是上帝的年代,互联网竞争如此之大的时代,有针对性的对每个用户的喜好定制不同的内容,按照用户的喜好去决定产品迭代方向已经成为各个互联网公司必须要专注去做的事情,于是埋点便成为了获取信息必不可少的一种方式。性能监控有针对性的对每个用户的喜好定制不同的内容,按照用户的喜好去...原创 2020-04-18 13:48:14 · 1029 阅读 · 0 评论 -
VUE 遇到"Cannot read property '__ob__' of undefined" 的解决办法!
记不清第n次遇到这个错误了,但是脑子就是不好用,记不住解决办法啊,每次都要找好久才能找到错误,网上还一篇篇的全是错误答案…所以写篇随笔,记录下,方便大家也方便我自己。网上有人说是组件循环了多次一直没有销毁会产生这个错误,经测试发现并不是这个原因(也许是我测试的有问题?),遇到这个问题很简单,就是脚手架中 数据要这么写data(){ return {} }往出现上述错误的问题,都是你...原创 2020-04-16 17:49:29 · 1362 阅读 · 0 评论 -
JavaScript之Array 中every,some,map,filter, reduce
1.every和someevery表示数组中的每一项都必须通过才会返回truesome表示只要数组元素某一项满足即可var arr = [1, 2, 3, 4, 5, 6, 7,8, 9];var a = arr.every(item=> item > 6);console.log(a); // falsevar b = arr.some(item=> item &...原创 2020-03-27 14:35:01 · 292 阅读 · 0 评论 -
vue高频面试题
1.v-if 与v-showv-if初始渲染初始值为 false 组件不会渲染,生命周期钩子不会执行,v-if 的渲染是惰性的。初始值为 true 时,组件会进行渲染,并依次执行 beforeCreate,created,beforeMount,mounted 钩子。切换false => true依次执行 beforeCreate,created,beforeMount,mou...原创 2020-03-03 21:26:13 · 259 阅读 · 0 评论 -
js 数组常用知识
1.es5 es6数组去重排序方法一(es5):简单的循环套循环遍历对比 function way1(arr){ var arr1 = [arr[0]]; for(var i = 1;i<arr.length;i++){ var repeat = false; for(var j = 0;j<arr1...原创 2020-03-06 14:52:46 · 124 阅读 · 0 评论 -
前端跨域的解决方法
跨域解决方案1、 通过jsonp跨域2、 document.domain + iframe跨域3、 location.hash + iframe4、 window.name + iframe跨域5、 postMessage跨域6、 跨域资源共享(CORS)7、 nginx代理跨域8、 nodejs中间件代理跨域9、 WebSocket协议跨域一、 通过jsonp跨域通常为了减...转载 2020-02-28 12:42:43 · 157 阅读 · 0 评论 -
ES6 Promise 并行执行和顺序执行
1.Promise.all 并行执行promise(1)、getA和getB并行执行,然后输出结果。如果有一个错误,就抛出错误 /** * 每一个promise都必须返回resolve结果才正确 * 每一个promise都不处理错误 */const getA = new Promise((resolve, reject) => { //模拟异步任务 setTimeo...原创 2020-02-27 11:48:22 · 1498 阅读 · 0 评论 -
vue的组件传值方式
1、路由传参①定义路由时加上参数props: true,在定义路由路径时要留有参数占位符: name『用法: to="'路径/'+value"』②在跳转到的页面加上参数props:[‘name’]③在跳转到的页面就获取到了name『用法: js中直接this. name;html中直接插值{{ name}}』2、父组件向子组件传值①父组件内设置要传的数据『data(){ id: valu...原创 2020-02-27 11:34:06 · 157 阅读 · 0 评论 -
H5缓存
H5引入了应用程序缓存,意味着WEB应用可进行缓存,可在没有因特网时进行访问应用程序缓存的优势:离线缓存:用户可在离线时使用它们速度:加载速度更快减少服务器负载:浏览器只从服务器下载更新的或者更改过的资源实现缓存实现借助manifest文件HTML缓存1、每次的http请求头中,都会带有cookies——缺点;2、每个域名只能存储4K大小的cookies;3、主域名污染:如果...原创 2020-02-27 11:19:38 · 173 阅读 · 0 评论 -
js async await 终极异步解决方案
回顾下promise的状态pending:初始状态,既不是成功,也不是失败状态 fulfilled:操作成功 rejected:操作失败async 是“异步”的意思,而 await 是等待的意思。所以应该很好理解 async 用于申明一个 异步的function(实际上是async function 对象),而 await 用于等待一个异步任务执行完成的的结果。...原创 2020-02-13 09:06:31 · 181 阅读 · 0 评论 -
js,底层处理price处理方法
/** * 处理价格,默认是元,分第二个参数传100 * dealPrice(5) => 5.00;dealPrice(500, 100) => 5.00; */export function dealPrice(x, d = 0) { let f = parseFloat(x); if (isNaN(f)) { return; } if (f == 0...原创 2020-01-07 17:21:46 · 834 阅读 · 0 评论 -
js,基础易忘知识,持续更新中,,,
javacript语法易忘知识:1.实现防抖函数debounce:防抖函数原理 :在事件被触发n秒后在执行回调,如果在这n秒内又被触发,则重新计时。场景:按钮提交场景: 防止多次提交按钮,只执行最后提交的一次服务端验证场景 : 表单验证需要服务端配合,只执行一段连续的输入事件的最后一次,还有搜索联想词功能类似2.实现节流函数 (throttle):防抖函数原理:规定在一单位时间内...原创 2020-01-07 14:42:55 · 131 阅读 · 0 评论 -
底层工具类,storage封装
storage封装1.先简单讲讲storage的基础cookie遗留问题:1:大小的限制:4KB 不能接受大数据2:带宽的限制:cookie必须服务器和客户端数据会进行同步,过时,会去 通知服务器清楚cookie数据3:如果不加密的传输非常不安全4:操作是非常复杂,document.cookie进行操作优点:会根据时间自动清楚数据.时效作用storage:1:存储的空间 5...原创 2020-01-06 14:42:12 · 228 阅读 · 0 评论 -
array工具类,持续更新中,,,
1.数组去重function uniqueArray(arr) { var temp = []; for (var i = 0; i < arr.length; i++) { if (temp.indexOf(arr[i]) == -1) { temp.push(arr[i]); } } return temp; //or return...原创 2020-01-03 18:06:08 · 93 阅读 · 0 评论 -
底层工具类,date方法,持续更新中
javascript汇总1.剩余时间格式化/** * 剩余时间格式化 * * @export * @param {number} times //传入毫秒 * @param {string} [format='H:F:S'] // 大写自动补全十位 * @returns string *///小于10时,转化为01,02等 export function formatNum(...原创 2020-01-06 11:08:46 · 138 阅读 · 0 评论 -
底层工具类,数据类型判断方法
判断数据类型/** * 数据判断 * @export * @param {*} value * @returns boolean */// is数组export function isArray (ar) { return Array.isArray(ar);}// is布尔export function isBoolean (arg) { return typ...原创 2020-01-06 10:47:42 · 171 阅读 · 0 评论 -
底层string工具类,持续更新中
1.翻转字符串function reverseString(str) { return str.split("").reverse().join("");}``2.字符串中出现最多次数的字符function findMaxDuplicateChar(str) { var cnt = {}, //用来记录所有的字符的出现频次 c = ''; //用来记录最大频次的字...原创 2020-01-03 17:59:31 · 101 阅读 · 0 评论 -
url 底层处理方法,底层公用方法
1.url后添加字符串export function urlfix(url, paramsUrl = '') { let fixUrl = url if (paramsUrl) { fixUrl = url + (url.indexOf('?') === -1 ? '?' : '&') + paramsUrl } return fixUrl}2.直接读取lo...原创 2020-01-03 18:15:12 · 167 阅读 · 0 评论