JavaScript
文章平均质量分 50
一只无畏的小菜鸟
这个作者很懒,什么都没留下…
展开
-
页面优化之防抖
防抖就是在事件触发的时候,并没有马上急着去做处理,而是在等待一定时间之后再去执行,也就是说在该时间范围内只发起一次请求,以最后一次为准。就比如浏览器的滚动事件function debounce(fn,waitTime){ let timer = 0; //定义一个定时器id,方便每次执行都保证能够将之前的定时器销毁 return (args)=>{ if(timer) clearTimeout(timer); timer = setTimeout(()=>{ fn.app原创 2021-07-01 22:31:58 · 807 阅读 · 0 评论 -
性能优化之节流
在前端性能优化方面,我们除了以往的那些减少DOM操作,减少请求等等这些外,还有节流,防抖,重回重排等知识点可以优化;为什么要用到节流呢?比如一个表单提交,由于DNS解析、TCP链接等响应时间较长的时候,使用者在不知情的情况下在短时间内多次点击提交按钮,这样就会发起多个请求,这就对性能产生了极大的消耗。使用节流去控制,利用闭包原理达到封装一个节流方法去控制的目标// 定义一个节流函数// 接收两个参数,一个是需要节流的函数,一个是等待时间,默认设置为100msfunction throttle(f原创 2021-07-01 22:22:13 · 184 阅读 · 0 评论 -
Cookie、SessionStorage与localStorage
CookieCookie是为了解决HTTP无状态的一件产物,希望与特定用户相关的信息能够保存在用户的机器上,而HTTP协议并不能帮助我们实现这种功能,因此Cookie也就随之而诞生了出来。Cookie实现原理:客户端请求服务器后,如果服务器需要记录用户状态,服务器会在响应信息中包含一个Set-Cookie的响应头,客户端会根据这个响应头存储Cookie信息。之后客户端向服务器发起请求时,都会携带一个名为Cookie的请求头信息,里面包含之前存储好的Cookie信息。//响应头HTTP/1.1 200原创 2021-05-07 15:37:46 · 145 阅读 · 0 评论 -
Vue组件中的data为什么必须是一个函数
关于Vue中的data为什么必须是一个函数,咱们直接上源码:在初始化data的时候,我们可以看到针对于data数据的处理data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {}如果传过来的data是一个函数,那么就执行getData()这个工厂函数,这样每一个实例的data都能够保持唯一性,独立性,互不干扰。总结:Vue组件可能存在多个实例,如果使用对象形式去定义data,会导原创 2021-04-22 16:46:43 · 223 阅读 · 0 评论 -
Vue中 v-vif 与v-for 的问题
Vue中针对于v-if与v-for的使用可能会有一些疑问,比如两者在同一级时,谁的优先级比较高,应该这样去处理会更好。首先我们看vue中的源码:源码中对于v-for的执行先与v-if,因此v-for的优先级高于v-if的优先级。因此当两者在同一级一起使用时,会出现性能方面的问题,因为不管你的v-if里的语句是否为true,都会先执行v-for去循环。要避免这种情况,可以在外面嵌套一层template,在这一层去做判断,然后在内部进行v-for循环。还有一种情况,比如判断的条件是循环项的值,为了避原创 2021-04-22 16:28:59 · 2559 阅读 · 0 评论 -
JS继承(二)
在JS继承(一)中总结了继承的原型链继承、盗用构造函数继承以及组合继承三种继承方式,当然js中的继承方式不仅仅这三种方式,所以这次再总结一下其它继承模式;原型式继承原型式继承使用情况:你有一个对象,想在它的基础上再创建一个新对象。通过Object.create()实现,这个方法接收两个参数:作为新对象原型的对象,以及给新对象定义额外属性的对象。let person = { name: "Jackson", friends: ["Jimi","Van","Jhone"]};let anothe原创 2021-04-21 12:06:29 · 50 阅读 · 0 评论 -
js继承(一)
随着面向对象编程的发展,继承也越来越受到关注,实现继承是ES唯一支持的继承方式,主要是通过原型链实现的。原型链原创 2021-04-19 16:35:30 · 73 阅读 · 0 评论 -
原型模式
每个函数都会创建一个prototype属性,这个属性是一个对象,包含应该由特定引用类型的实例共享的属性和方法。实际上,这个对象就是通过调用构造函数创建的对象的原型。使用原型对象的好处是,在它上面定义的属性和方法可以被实例对象共享。原来在构造函数中直接赋值给对象实例的值,可以直接赋值给它们的原型。function Person() { }Person.prototype.name = 'Jackson';Person.prototype.age = 30;Person.prototype.job =原创 2021-04-15 14:42:14 · 81 阅读 · 0 评论 -
闭包
什么是闭包?闭包是指能够访问另一个函数作用域的变量的函数。通俗来说,闭包就是一个函数,这个函数能够访问其它作用域中的变量。我们先来看一个例子:function outer(m){ return { inner:function(){ console.log(m) } }}outer('测试').inner()执行上述代码后,有的同学就懵了,m不是outer这个函数作...原创 2021-04-13 17:08:49 · 60 阅读 · 0 评论 -
javaScript中的类型转换
在使用JavaScript编写的时候,我们常常会遇到一些数据类型的转换问题,最近做项目也遇到这样的问题,因此在这里总结一下;JavaScript类型转换分为两大类,显式转换与隐式转换显式转换显式转换可以很清楚的知道该数据转变成了什么数据类型,常见的方法有:Number() 转换成数值,转换规则:原值转换结果null0true1false0undefinedNaNstring该类型转换参考string类型转数值parseInt()逐一原创 2021-04-12 14:16:11 · 119 阅读 · 0 评论 -
前端常见跨域解决方案
什么是跨域?跨域是指一个域下的文档或脚本去请求另一个域下的资源文档,根据浏览器同源策略,同源是指 协议+域名+端口都相同,有一个不同都会产生跨域行为。同源策略限制一下行为:localstorage,cookie和IndexDB无法读取Dom 和 js 对象无法获取Ajax请求不能发送常见的跨域场景跨域解决方案JSONP通常为了减轻web服务器的负载,我们把js,css,im...转载 2021-03-17 14:32:24 · 778 阅读 · 0 评论 -
ES6函数拓展
前言函数对我们来说使用是非常频繁的,ES6中对于函数又加入了很多非常好用的内容,最近看完这一块之后,觉得很有必要整理一下。Es6中的参数默认值经常使用javascript的人都知道在ES5中如果我们想要对所传参数设置默认值,我们需要在函数体内一开始的地方编写,比如:function fnc( a, b ){ // 给b设置默认参数 b = b || 10; return a+b;}// 传入 a 与 bfnc(2,3) // 返回 5// b不传值fnc(5) // 返回原创 2021-03-17 14:24:54 · 107 阅读 · 0 评论 -
js 数据类型
在js中,数据类型总共分为两大类:分为两大类:简单数据类型和复杂数据类型;简单数据类型:number // 数字string //字符串boolean // 布尔值null // 空值undefined //未定义symbol //表示独一无二的值 由 Symbol函数生成 (ES6新增)复杂数据类型object //对象Array // 数组E...原创 2020-03-26 15:02:32 · 87 阅读 · 0 评论 -
深拷贝和浅拷贝
比如A复制了B的值,修改A,B也跟着改变,这就叫做浅拷贝;比如A复制了B的值,修改A,B不变,这就叫做深拷贝;可能看了这两句话之后大家还是不太理解是什么意思,首先我们来看个例子var a = 123;var b = a;b = 24;console.log(a,b); // a=123;b=24var obj = { x:23};var obj1 = obj;obj1.x=...原创 2020-03-13 15:54:13 · 112 阅读 · 0 评论 -
箭头函数
ES6允许使用箭头“=>” 定义 函数var foo = v => v;//类似于var foo = function (v){ return v;}如果箭头函数没有参数或者有多个参数就用圆括号包起来var foo = ()=> 'hello'相当于var foo = function (){ return 'hello'};多个参数var foo ...原创 2020-03-11 15:11:38 · 85 阅读 · 0 评论 -
数组去重方法归纳
无论是实际工作中还是面试的时候,常常会遇到数组去重的问题,今天就把我所知的数组去重的方法归纳一下,若说的不全,请大神评论区给点idea,以便于完善;事先定义一个数组和一个空数组(后面会用到)let arr = [1,2,3,2,3,4,{},{}];const result = [];Set 去重Set 方法对数组进行去重是ES6中最常用的方法,代码比较简洁Array.from(ne...原创 2019-11-20 17:15:45 · 199 阅读 · 0 评论 -
js中数组常用方法
从事前端已经两年多的时间了,从前没有一直没有养成一个归纳总结做笔记的习惯,以至于有些知识长时间没有用到之后就开始有些模糊不清。所以在面对一些问题的时候,总是拿捏不准,常常需要借助度娘。于是自己开始从新将js基础知识走一遍,并进行总结。之前发过一篇关于字符串常用处理方法的文章,字符串和数据是我们在工作中时常在打交道的,所以了解并熟练掌握它们的一些常用处理方法是必要的。现在我们就来看看数组都有哪些常...原创 2019-11-15 17:29:48 · 216 阅读 · 0 评论 -
js中字符串常用方法
字符串和数组可能是我们经常需要去处理的数据类型了,今天我们就来先说说字符串有哪些常用的处理方法。至于数组,我们放到下一篇文章去讨论;length返回字符串长度var str = 'hello world!'console.log(str.length) // 输出 12indexOf通过传入的字符从左到右开始对字符串进行查找,返回所查找字符在该字符串中第一次出现(最左边)的索引值,...原创 2019-11-15 14:15:23 · 193 阅读 · 0 评论 -
字符串反序
zzx原创 2019-11-13 18:11:29 · 448 阅读 · 0 评论