qq_37344190的博客

原创 react hooks

hook解决的问题：避免地狱式嵌套，可读性高函数式组件，比class更容易理解class组件声明周期太多太复杂，使函数组件存在状态解决HOC和render props的缺点（hoc的缺点：产生很多无用的组件，加深了组件层级，内部无法判断props是来源于那个hoc；render props：目前看没啥缺点，以后补充）ui和逻辑更容易分离1、useState：...

原创 一个loading的方法组件

class Loading extends React.Component{ render(){ return ( <div>loading</div> ) }}let node = nullconst loading = { show(){ node = document.createElement('div') document.body.appendChil.

原创 react的声明周期

如果有多层组件嵌套1.创建期:render:从外往里componentDidMount:从里往外

原创 ES6知识点电子版（from阮一峰）持续更新

一、声明与表达式：1、let与const：let声明的变量只在let命令所在的代码块有效，let只能声明一次，不存在变量提升。const声明一个只读变量，一旦声明，常量的值就不能改变，声明的同时必须初始化。var声明的变量在方法块内有效，var可以声明多次，变量提升。经典案例：for循环下的var和let变量i是用var声明的，在全局范围内有效，所以全局中只有一个变量i，每次循环时，setTimeout定时器里面的i指的是全局变量i，而循环里的十个setTimeout在循环结束后才执

原创 js的原生方法和操作符

一、typeof判断类型的操作符返回：boolean、string、number、object、function、undefined二、boolean类型的方法：Boolean()：任意类型都可以转化为boolean类型的值：true：非空字符串、非零数字以及非NaN、非null对象false：undefined、空串、0和NaN、null注意：Boolean()方法不等效于==，因为true!=2、true!={}...三、Number类型的方法：isFinite(num)

原创 XSS攻击

一、XSS分类：存储型：服务端安全漏洞。攻击者通过论坛发帖、商品评论、用户私信等，将恶意代码提交到目标网站数据库中，用户打开目标网站时，恶意代码被取出，并拼接在HTML中返回给浏览器，被执行。反射型：服务端安全漏洞。通过特殊的包含恶意代码的URL，诱导用户打开后，网站服务端将恶意代码从URL中取出，拼接在HTML上返回给浏览器，恶意代码被执行。二、XSS预防：...

原创 对象的深拷贝和浅拷贝

引用数据类型的名称是存在栈内存中，值存在堆内存中，在栈内会存在一个引用的地址指向堆内存中的值：浅拷贝：深拷贝：深拷贝后，所有层级的属性都不联动实现浅拷贝的方法：1、assign()：let copyObj = Object.assign({},obj); //只有第一层不联动，深层的还是联动的2、concat()：var copyArr = arr.concat([]); //只有第一层不联动，深层的还是联动的3、slice()：var c...

原创 强制缓存和协商缓存

浏览器缓存：浏览器在本地磁盘对用户最近请求过的文档进行存储，当再次访问时，浏览器可以直接从本地磁盘中加载文档。是web性能优化的重要方式。针对数据的请求不用缓存，就是Content-type里有关json的那些请求。浏览器第一次请求时，本地无缓存，服务器会将页面最后修改时间通过Last-Modified标识有服务器发给客户端，服务器还会生成一个Etag发送给客户端。浏览器缓存分为强缓存和协商缓存。在协议头中设置强缓存：状态码为200，不发送请求到服务器，直接从缓存中取。跟过期时间进行比较。Exp

原创 Function对象中的arguments和es6的扩展运算符

arguments是function的传参的对象，是类数组。arguments有callee属性，指向当前arguments所属的function。扩展运算符：是三个点，又称‘三点运算符’。比如：Math.max()方法只接受1,2,3形式的传参方式；es5的解决方案是：Math.max().apply(Math,arr);es6中可以用扩展运算符解决：Math.max(...arr);...

原创 随记

1、基本数据类型：null undefined Boolean string number 保存在栈内存中； 引用数据类型的值是对象：实际上保存在堆内存中。首先从栈中获得该对象的地址指针，然后再从堆内存中取的所需数据。2、对象的深拷贝和浅拷贝3、Date类型：可以比较两个Date对象的大小（时间靠前的更小）；Date对象的方法：toDateString()：星期 月 日...

原创 v8-js引擎

js是解释型语言，不需要编译。零、js运行效率比JAVA和C++低很多的原因：js是一种无类型的语言，并不能准确知道变量的类型，只能在运行时确定，但是在运行时计算和决定类型，会严重影响性能。一、常见的js引擎：IE浏览器：Jscript、Chakra（新版IE）；FireFox浏览器：SpiderMonkey；Safari浏览器：JavascriptCore；Ch...

原创 js中的DOM（文档对象模型）

1、someNode.childNodes是一个对象，是类数组，利用Array.prototype.slice.call(someNode.childNodes);能将此对象转化为数组。这个方法可以将具有length属性的类数组转化为数组，比如：arguments2、用js设置页面title属性：document.title3、通过设置document.domain可以把子域名设置为宽松的...

原创 javascript性能问题

1、注意作用域，尽量不要在作用域链中找全局变量；2、避免不必要的属性查找：数组比对象快很多；3、优化循环：减值迭代，简化终止条件，简化循环体，后测试循环；4、展开循环；5、尽可能避免出现需要按照javascript解释的字符串；6、原生方法较快；7、switch语句比if-else快8、位运算符较快、9、用一个var声明变量；10、使用事件代理：利用事件冒泡；...

原创 Event loop（事件循环）

　检查事件队列是否为空，如果为空，则继续检查；如不为空，则执行 2； 　　取出事件队列的首部，压入执行栈； 执行任务； 检查执行栈，如果执行栈为空，则跳回第 1 步；如不为空，则继续检查；...

原创 虚拟dom的diff算法

今天看到一篇关于diff算法的博客：https://www.cnblogs.com/wind-lanyan/p/9061684.html茅塞顿开，醍醐灌顶，一下懂了，写下心得，以后再来读。virtualDOM和虚拟dom的区别：虚拟dom以对象形式存在。当我们修改了数据的时候，如果每次都触发dom的重绘和回流会在很大程度上影响性能，所以采用diff算法：diff算法会将同级的虚拟dom...

原创 vue源码阅读理解

2019/8/30： 天气晴，万里无云的那种。今天，是9月1号开学的前两天，祖国70岁华诞前一个月零两天，后台在改bug，我便有了难得的一点空余。琢磨了下如何利用这段宝贵的时间呢？学英语？学日语？睡会？还是刷会微博？（咋不上天？）所以决定读下vue源码（没啥因果关系）。。之前就读过，是为了找工作，后来不找了就不读了（用意念给自己一巴掌），时隔几个月，emmm...再读！ ...

原创 js面向对象的程序设计

1、属性类型：分为数据属性和访问器属性，都可以通过Object.defineProperty()方法来设置，传入的第一个参数是要修改的对象，第二个参数是对象的属性，第三个参数是一个对象，包括要设置的属性及属性值。定义多个属性用Object.defineProperties()。可以通过Object.getOwnPropertyDescription()方法来读取，第一个参数为要访问的对象，第二个参...

原创 js继承

1、原型链：构造函数1的prototype指向原型1，实例1的prototype指向原型1；如果这个实例是一个构造函数2，就是构造函数2的原型2指向原型1，构造函数2的prototype指向原型2，实例2的prototype指向原型2。子类型.prototype = new 父类型();function SuperType(){    this.property = true; //SuperT...

原创 js的原型

1、Object.getPrototypeOf(person1)==Person.prototype    //trueObject.getPrototypeOf(person1).name    //Person.prototype.name(其中，person1是Person的一个实例) 原型中所保存的属性和方法是多个对象实例共享的。Person.prototype 和 person1的pro...

原创 常用的string的方法

1、字符串的长度：str.length2、访问固定位置的字符，可以用str.charAt(1),或者str[1]3、字符串的连接：加号4、slice()：substr()：substring()：返回被操作字符串的子字符串slice()和substring()方法传入的参数：第一个参数是指定字符串开始的位置，第二个参数指结束时的位置（左闭右开）；substr()方法：第一个参数也是指定字符串开始的...

原创 由如何判断对象和数组相等引发的

1、===和==的区别：==不判断类型，===全等2、深拷贝和浅拷贝：object深拷贝：JSON.parse(JSON.stringify(obj));object浅拷贝：obj1 = obj2array的深拷贝：arr2 = arr1.concat([])array的浅拷贝：arr2 = arr1（注：如果为嵌套，要用递归）...

原创 一个对象数组，根据对象中的一个属性排序

function compareKey(propName){    return function(obj1,obj2){        if(obj1[propName]&lt;obj2[propName]){            return -1;        }else if(obj1[propName]===obj2[propName]){            retur...

原创 js数组的方法：

push()：返回修改后数组的长度；改变原数组pop()：返回删除项；改变原数组shift()：返回删除项；改变原数组unshift()：返回数组长度；改变原数组--------------------------sort()：字符串正序排序；改变原数组（sort可以接收一个比较函数作为参数，如果顺序不变，返回负数不改变顺序，返回正数改变顺序，两个数相等返回0）例：function(num1,nu...

原创 es6的Map和Set类型对比

原创 es6的promise

一般情况下，在发送请求后，用返回的数据来进行接下来的处理。就需要嵌套一层或者嵌套多层。但是es6的promise可以解决这个看起来繁琐的问题。使用方法如下：new Promise(function(resolve,reject){//这里写执行的各种语句if(成功){    resolve（这里可以传参）}else{    reject（这里可以传参）}}).then(function(value...

原创 跨域问题

1、jsonp：动态创建一个script标签，src指向要跨域的url；该接口返回一段js代码：f(data);在前端代码里写f方法，即可接收返回来的数据。缺点：只支持get请求；如果调用不成功也不会有回调；返回的js有风险安全问题解决：我们只需要保证浏览器内不会明文出现&lt;&gt;标签，那么问题便可彻底解决。基本思路是：在服务端做一次urlencode。而在output输...

原创 cookie、session、localstorage和sessionstorage

cookie和session： cookie若不设置过期时间，存在浏览器的内存中，关闭浏览器，cookie自动消失；cookie若设置过期时间，存在硬盘里，以过期时间为准，与是否关闭浏览器无关。cookie是一个文件存放在本地，安全性差； session在一定时间内保存在服务器上，访问增多会比较占用服务器性能。建议将登录信息等重要信息存放为session，其他信息如果需要保留，可以...

原创 angularjs与服务端交互

一、angularjs与服务端交互 :AJAX，$http，Restangular，$resource. 传统的AJAX： 1.先创建XML对象 2.向服务器发送请求，要使用XMLHttpRequest对象的open()和send()方法 3.xmlhttp.open(‘method’,”url’,async); //async为true是异步，为false是同步 4.xmlhttp.s...