JavaScript

JavaScript深入系列open in new window

注意点

同一个对象中，属性名是不能重复的，且是一个字符串。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运算符

创建对象有几种方法:

// 第一种：字面量
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服务器和数据服务器分开了，还有可能有图片服务器、音视频服务器等，于是产生了不同服务器之间的访问，由于浏览器的同源策略，不允许互相访问，便产生了跨域问题。

jsonp - 只能是get请求

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

iframe

window.name
document.domin
location.hash
post message

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

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

前端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`	返回自身实际的高度,不含边框

Service Worker / PWA

请你实现一个PWAopen in new window

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

Web Worker

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

# JavaScript

# 目录

# 注意点

# JavaScript的数据类型

# JS运行机制

# 原型链

# 跨域问题

# DOM事件类

# 自定义事件（CustomEvent）

# JS盒子模型属性（13个）

# Service Worker / PWA

# Web Worker