JavaScript

• JavaScript深入系列 (opens new window)

11. Service Worker / PWA

• 面试官：请你实现一个PWA (opens new window)

概念：渐进式网络应用（PWA）是谷歌在2015年底提出的概念。基本上算是web应用程序，但在外观和感觉上与原生app类似。支持PWA的网站可以提供脱机工作、推送通知和设备硬件访问等功能。

12. Web Worker

• 浅谈HTML5 Web Worker (opens new window)
• JavaScript 性能利器 —— Web Worker (opens new window)

Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。

目录

1. 堆栈内存及闭包作用域
2. 面向对象（OOP）和this处理
3. DOM/BOM及事件处理机制

注意点

• 同一个对象中，属性名是不能重复的，且是一个字符串。number属性名 == string属性名。数组是特殊的对象，属性名时索引。

• alert(2) // 输出字符串'2'，alert({}); // 输出：[Object Object]

JavaScript的数据类型

• 基本数据类型(值类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、BigInt、Symbol（ES6）。
• 引用数据类型：对象(Object)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。eg: Symbol('1') === Symbal('1') // false

堆：存储引用类型值的空间 - 无序

栈：存储基本类型值和执行代码的环境 - 有序

JS运行机制

• 如何理解JS的单线程: 一个时间内只能做一件事
• 什么是任务队列：同步任务（主线程栈）先执行、异步任务（任务队列）先挂起。异步任务：setTimeout和setInterval、DOM事件、ES6的Promise

原型链

• 创建对象有几种方法
• 原型、构造函数、实例、原型链
• insranceof原理
• new运算符

1. 创建对象有几种方法:

// 第一种：字面量
var o1 = {name: 'o1'};
var o2 = new Object({name: 'o2'});

// 第二种：通过构造函数 
var M = function(){
    this.name = 'o3'
}
var o3 = new M();

// 第三种：Object.create 方法
var P = {name: 'o4'};
var o4 = Object.create(P);

跨域问题

跨域产生的原因：由于前后端分离，web服务器和数据服务器分开了，还有可能有图片服务器、音视频服务器等，于是产生了不同服务器之间的访问，由于浏览器的同源策略，不允许互相访问，便产生了跨域问题。

1. jsonp - 只能是get请求

jsonp原理：利用script（还有link、img等）标签get请求不存在域的限制，动态创建一个script标签，把想要发送请求的服务器地址赋值给src，通过 ?callback=func 问号传参的方式请求，服务器将数据拼接成字符串数据结果'func({......})' ，浏览器收到后会自动识别执行方法func(data)，data就是从服务器获取的数据。

GET请求缺点：不安全、有缓存、大小限制(5M)...

2. iframe

• window.name
• document.domin
• location.hash
• post message

3. CORS跨域资源共享 - 服务端配置

前端：axios，服务器配置：请求源、请求头、请求方式、携带cookie等

4. 前端http proxy实现跨域请求 + 后台配置nginx反向代理

DOM事件类

Event对象的常见应用

• event.preventDefault()
• event.stopPropagetion()
• event.stoplmmediatePropagation()
• event.currentTarget
• event.target

自定义事件（CustomEvent）

var eve = new Event('custome');
ev.addEventListener('custome', function(){
    console.log('custome');
})
// 触发事件
ev.dispatchEvent(eve);

JS盒子模型属性（13个）

元素偏移量 offset 系列

offset系列属性	作用
element.offsetParent	返回该元素带有定位的父级元素，如果父级元素都没有定位则返回body
element.offsetTop	返回元素相对于带有定位的父元素上方的偏移
element.offsetLeft	返回元素相对于带有定位的父元素左边框的偏移
element.offsetWidth	返回元素自身包括padding、边框、内容区的宽度，返回的数值不带单位
element.offsetHeight	返回元素自身包括padding、边框、内容区的高度，返回的数值不带单位

元素可视区 client 系列

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding和内容区宽度,不含边框,返回的数值不带单位
element.clientHeight	返回自身包括padding和内容区高度,不含边框,返回的数值不带单位

元素滚动条 scroll 系列

scroll系列属性	作用
element.scrollTop	返回被卷上去的上侧距离
element.scrollLeft	返回被卷上去的左侧距离
element.scrollWidth	返回自身实际的宽度,不含边框
element.scrollHeight	返回自身实际的高度,不含边框