杨庭培的博客

文章结构 异步 JS 是单线程运行的 面试题 异步123456console.log(100);setTimeout(function() { console.log(200);}, 1000);console.log(300);// 执行结果：100 300 1秒后，200 1234console.log(100);alert(200); // 1秒钟之后点击确认console.log(300);// 执行结果：100 点击alert弹框确认按钮后，200 第一个例子的表现就叫做异步，异步不会阻塞后面程序的运行。第二个例子的表现就叫做同步。 JS 是单线程运行的JS 需要异步的根本原因是JS 是单线程运行的，即在同一时间只能做一件事，不能“一心二用”。例如，一个 Ajax 请求由于网络比较慢，请求需要 5 秒钟。如果是同步，这 5 秒钟页面就卡死在这里啥也干不了了。异步的话，5 秒等待就等待了，其他事情不耽误做。 12345678var a = true;setTimeout(function() { a = false;}, 1 ...

文章结构 箭头函数 module class Set 和 Map Promise 面试题 箭头函数箭头函数存在的意义，第一写起来更加简洁，第二可以解决 ES6 之前函数执行中 this 是全局变量的问题。 module 如果只是输出一个唯一的对象，使用export default即可。 如果要输出多个对象： 1234567// 导出方式1export function fn1() { alert('fn1');}export function fn2() { alert('fn2');} 123456789// 导出方式2function fn1() { alert('fn1');}function fn2() { alert('fn2');}export { fn1, fn2 }; 1234// 导入import { fn1, fn2 } from './u ...

文章结构 BOM DOM 获取 DOM 节点 property 和 attribute DOM 树操作 BOMBOM 即浏览器对象模型，浏览器页面初始化时，会在内存中创建一个全局对象，用来描述浏览器和当前窗口的一些属性与状态。例如： navigator 包含浏览器的相关信息 screen 获取浏览器的宽度、高度 location 获取网址、协议、path、参数、hash 等 history 设置让浏览器跳转到哪个地址。 DOM获取 DOM 节点12345678910111213// 通过 id 获取var div1 = document.getElementById('div1'); // 元素// 通过 tagname 获取var divList = document.getElementsByTagName('div'); // 集合console.log(divList.length);console.log(divList[0]);// 通过 class 获取var containerList = document.getEl ...

文章结构 Cookie localStorage 和 sessionStroge CookieCookie 本身不是用来做服务器端存储的，它是设计用来在服务器和客户端进行信息传递的，因此我们的每个 HTTP 请求都带着 Cookie。但是 Cookie 也具备浏览器端存储的能力（例如记住用户名和密码）。 使用 Cookie 的缺点： 存储量太小，只有 4kb。 所有 HTTP 请求都带着，会影响获取资源的效率。 API 简单，需要封装才能使用。 localStorage 和 sessionStorageHTML5 标准就带来了 sessionStorage 和 localStorage，它们是专门为了浏览器端缓存而设计的。其优点有： 存储量增大到 5MB。 不会带到 HTTP 请求中。 API 适用于数据存储。localStorage.setItem(key, value)和localStorage.getItem(key) sessionStorage 和 localStorage 的区别在于它是根据 session 过期时间实现，而 localStorage 会永久有效， ...

文章结构 手写实现 XMLHttpRequest 状态码说明 xhr.readyState中的状态码说明 xhr.status中的状态码说明 Fetch API 跨域 跨域 解决跨域 JSONP 服务器设置 http header 手写实现 XMLHttpRequest123456789101112var xhr = new XMLHttpRequest();xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { console.log(xhr.responseText); } }};xhr.open('GET', '/api', false);xhr.send(null); 状态码说明上述代码中，两处涉及到了状态码。分别是: xhr.readyState是浏览器判断请求过程各个阶段。 xhr.status是 h ...

文章结构 事件绑定 事件冒泡 事件代理(事件委托) 事件绑定普通的事件绑定方式如下： 1234567var div1 = document.getElementById('div1');div1.addEventListener('click', function(e) { // e.preventDefault() 阻止默认行为 // e.stopPropagation() 阻止事件冒泡 console.log('clicked');}); 可以对上述事件绑定编写一个更通用的方法： 123function bindEvent(el, event, fn) { el.addEventListener(event, fn);} 调用该方法： 12345var div1 = document.getElementById('div1');bindEvent(div1, 'click', function(e) { consol ...

那些很燃的文言文 红日初升，其道大光。河出伏流，一泻汪洋。 《中华世纪坛序》时间：1999 年    作者：朱相远 大风泱泱yāng yāng，大潮滂滂pāng pāng。洪水图腾蛟龙，烈火涅槃niè pán凤凰。文明圣火，千古未绝者，唯我无双；和天地并存，与日月同光。 中华文化，源远流长；博大精深，卓越辉煌。信步三百米甬yǒng道，阅历五千年沧桑。社稷千秋，祖宗百世，几多荣辱沉浮，几度盛衰兴亡。圣贤典籍，浩如烟海；四大发明，寰huán球共享。缅怀漫漫岁月，凝聚缕缕遐想。 回首近代，百年三万六千日，饱尝民族苦难，历尽变革风霜。烽火硝烟，江山激昂。挽狂澜于既倒，撑大厦于断梁。春风又绿神州，华夏再沐朝阳。 登坛远望：前有古人，星光灿烂；后有来者，群英堂堂。看乾坤旋转：乾恒动，自强不息之精神；坤包容，厚德载物之气量。继往开来，浩浩荡荡。立民主，兴文明，求统一，图富强。中华民族伟大复兴，定将舒天昭晖，磅礴东方。 世纪交汇，万众景仰；共襄xiāng盛举，建坛流芳；昭示后代，永世莫忘。 歌颂中华世纪坛的辞赋作品，包括两赋一 ...

文章结构 原型与原型链 原型 原型链 原型链中的 this 作用域与闭包 执行上下文 作用域 作用域链 闭包 面试题 原型与原型链下面几条必须记住： 所有的引用类型（数组，函数，对象），都具有对象特性，即可以自由扩展属性。 所有的引用类型（数组，函数，对象），都具有proto，其值是一个对象。 所有的函数，都具有 prototype，其值是一个对象。 所有的引用类型（数组，函数，对象），其proto属性都指向它的构造函数的 prototype 属性值。即：obj.__proto__ === Object.prototype 12345678910111213141516// 要点一：自由扩展属性var obj = {}; obj.a = 100;var arr = []; arr.a = 100;function fn () {}fn.a = 100;// 要点二：__proto__console.log(obj.__proto__);console.log(arr.__proto__);console.log(fn.__proto ...

文章结构 数据类型 数据类型分类 值类型与引用类型 面试题 数据类型数据类型分类最新的 ECMAScript 标准定义了 8 种数据类型，包括 7 种原始数据类型（或叫做基本数据类型）： Boolean Number BigInt(BigInt 类型的数字必须加n后缀) String Symbol Undefined Null 其中，Symbol和BigInt是 es6 后新增的类型。 和 1 种引用数据类型： Object 值类型与引用类型 值类型：值类型包括 7 种原始数据类型，值类型是按值传递的。 12345var a = 10;var b = a;b = 20;console.log(a); // 10console.log(b); // 20 引用类型：引用类型是包括 Object 类型的所有，例如 Array、Date、Function。引用类型是按照共享传递的。 123456var a = { x: 10, y: 20 };var b = a;b.x = 100;b.y = 200;console.log(a); //
...

想写这篇文章很久了，但心中犹豫：在这个流量为王、各种网站和 app 层出不穷的年代，搭建自己的博客的目的是什么呢？想了很久之后我顿悟：是对博客的热爱在一次又一次鼓励我搭建他——这个虚拟地球上我小小的“家”。 说到热爱，就不得不提自己与电脑的联系。我玩电脑比较早，算到现在有十多年了。但我仍记得那时，电脑上的一切东西都对小小的我有最大的吸引力：我喜欢玩电脑游戏；也喜欢浏览各种各样的网站（还记得第一次用谷歌时，在浏览器的搜索框上敲了几下，我想看的奥特曼就马上摆在眼前，一下子就觉得搜索引擎是普天之下最牛的玩意）；但更让我着迷地是当时的 QQ 空间，可以 DIY 各种功能，什么悬浮动画、开场动画、音乐播放器等等。甚至还可以在空间里开自己的农场、牧场，然后再种一大片“奇珍异果”，养一大群“飞禽走兽”！这一切的一切，每每想起，都认为是筑起了我想搭建个人博客的原因：因为在博客里，我可以在创造属于自己的世界！ 伴着对电脑的兴趣，我走过了3，2，1，fight的初中时代，fire in the hole的高中时代，loktar ogar的大学时代。也正因为对电脑的喜欢，在大学时我选择了计算机科学与技术（简 ...