随笔分类 - javascript
摘要：一、主要区别 1、{} 和 new Object() 除了本身创建的对象，都继承了 Object 原型链上(Object.prototype)的属性或者方法，eg：toString()；当创建的对象相同时，可以说 {} 等价于 new Object() 。2、Object.create() 是将创建
阅读全文
摘要：一、写法不一样 1 //函数声明 2 let res1 = sum1(10 , 20) 3 console.log(res1) 4 function sum1(num1, num2) { 5 return num1 + num2 6 } 7 8 //函数表达式 9 let res2 = sum2(1
阅读全文
摘要：话不多说直接上代码，另外不考虑是函数的情况 /** * 判断是否是对象 * @param { object } obj */ function isObj(obj){ return typeof obj 'object' && obj!== null } /** * 深入比较 * @param {
阅读全文
摘要：一、什么是协商缓存 协商缓存是服务器端的一种缓存策略，服务端提供一种记号，用来判断客户端资源和服务端是否一样。 一致返回304，否则返回200和新资源。 二、如何实现 主要是通过在response header中携带相关标识 一种通过last-modified资源的最后修改时间 第一次请求时，服务器
阅读全文
摘要：http响应response headers中会有一个cache-control，这个参数就是用来做强制缓存的 一、什么是强制缓存 强制缓存就是服务端告诉客户端某些资源（JS CSS IMG）需要按照某种方法存在客户端本地，下次请求时直接从本地缓存中获取资源，不用再通过服务器，提高了网页加载速度。
阅读全文
摘要：一、功能区别 Restful API是当作资源的唯一标识符,而传统是实现某某功能 如：/api/getList/1 and /api/getList?page=1 二、methods多样性 Restful API methods: post 创建数据 get 获取数据 put/patch是更新数据
阅读全文
摘要：一、背景由来 cookie原来是用来网络请求携带用户信息的，只不过在HTML5出现之前，前端没有本地存储的方法，只能使用cookie代替 localstorge、sessionStorge是html5提供的API，极大的方便了前端在客户端存储数据 二、那么这三者有什么区别呢？ 1.存储时间 cook
阅读全文
摘要：一、手写一个ajax 1 const xhr = new xmlHttpRequest() 2 3 xhr.open(请求方式：post get, 请求地址， 同步或者异步) 4 5 xhr.onreadyStateChange = function(){ 6 if(xhr.readyState 4
阅读全文
摘要：javascript中的addEventListener(事件名，回调，布尔) 其中第三个参数默认为false-事件冒泡，true为事件捕获 二者区别： 事件冒泡：目标元素事件先触发，然后父元素事件触发 事件捕获：父元素事件先触发，然后目标元素事件触发 1 <body id="body"> 2 <d
阅读全文
摘要：一、尽量将DOM查询做缓存 1 let pElements = document.getElementById('div1') //将dom缓存 2 3 for(let i=0；i<pElements .length; i++){ 4 操作 5 } 二、尽量一次性操作 1 const parent
阅读全文
摘要：properrty：修改对象属性不会体现到html结构中，针对DOM节点自带属性（id,className,style） attribute：修改html属性，会改变html结构，大多可以添加自定义属性（data-node） 两者都有可能引起dom重新渲染 注：尽量使用properrty，DOM渲染
阅读全文
摘要：js事件轮询执行顺序总结： 1）所有的同步任务都在主线程上执行，行成一个执行栈。 2）除了主线程之外，还存在一个任务列队，只要异步任务有了运行结果，就在任务列队中植入一个时间标记。 3）主线程完成所有任务(执行栈清空），就会读取任务列队，先执行微任务队列在进行DOM渲染，最后执行宏任务队列。 4）重
阅读全文
摘要：记住： JS是单线程的，他和dom渲染共用一个线程 JS执行的时候，会给dom渲染留一些时机 上一篇讲到eventloop的执行机制，但是在这个机制中的call stack执行完成后（包括第一遍的eventloop）会尝试DOM渲染，最后触发第二轮的eventloop的callqueue,如此反复循
阅读全文
摘要：一、宏任务和微任务有哪些 宏任务：setTimeout,setInterval,ajax,dom，宏任务是由浏览器提供的 微任务：promise，async/await，微任务是由es6提供的 二、微任务一定会比宏任务限制性 看看下面的代码 1 console.log(100) 2 //宏任务 3
阅读全文
摘要：1 async function async1(){ 2 console.log('async1 start') //2 3 await async2() 4 //await async2()后面的内容可以看做是callback里得内容即是异步 5 //类似eventloop,settimeout
阅读全文
摘要：记住两句话： 1.then正常返回resolved,里面有报错返回reject 1 const p1 = Promise.resolve().then(()=>{ 2 console.log(123) 3 }) 4 5 console.log('p1',p1) //此时的状态是resolve,后面可
阅读全文
摘要：先看一段代码 console.log('Hi') setTimeOut(function cb1(){ console.log('cb1') },500) console.log('Bye') 第一步 压入执行栈执行console.log同步代码 第二步 定时器为异步，放入webapis中 第三步
阅读全文
摘要：1 Function.prototype.bind1 = function(){ 2 // 将类数组转化成数组 3 let arr = Array.prototype.slice.call(arguments) 4 5 //提取this 6 const t = arr.shift() 7 8 //保
阅读全文
摘要：this指向两句话口诀： 1.this永远指向函数执行的环境，而不是声明的环境 2.箭头函数的this指向父级 一、正常函数的this function fn1(){ console.log(this) } fn1() //this window fn1.call({x:100}) //this {
阅读全文
摘要：一句话：所有的自由变量的取值都是在函数定义的地方，向上级作用域查找，而不是函数执行的地方。 1.闭包 1 function create(){ 2 let a = 100 3 return function(){ 4 console.log(a) //自由变量定义的地方取值，没有就找上级 5 } 6
阅读全文
