杨庭培的博客

文章结构 箭头函数 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的大学时代。也正因为对电脑的喜欢，在大学时我选择了计算机科学与技术（简 ...

文章目录 CSS 选择器的权重与优先级 盒子模型 浮动 Float CSS 选择器的权重与优先级对于一个元素，如果存在多个选择器,那么会通过各个类选择器的权重来计算其优先级。 权重分为 4 级，分别是： 代表内联样式，如 style=”xxx”，权值为 1000； 代表 ID 选择器，如#content，权值为 100； 代表类、伪类和属性选择器，如.content、:hover、[attribute]，权值为 10； 代表元素选择器和伪元素选择器，如 div、p，权值为 1。 需要注意的是：通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为 0。 权重值大的选择器其优先级也高，相同权重的优先级又遵循后定义覆盖前面定义的情况。 盒子模型 盒子宽度 在盒子模型中，我们设置的宽度都是内容宽度，不是整个盒子的宽度。而整个盒子的宽度是：内容宽度 + padding 宽度 + border 宽度 + margin 宽度。 为盒子指定样式box-sizing:border-box可以让盒子内容宽度变为：实际内容宽度 + pad ...