JS-Web-API

JS 基础知识： ECMA 262 标准
JS-Web-API： W3C 标准

W3C 标准中关于 JS 的规定有：
- DOM 操作
- BOM 操作
- 事件绑定
- ajax 请求（包括 http 协议）
- 存储

W3C 标准没有规定任何 JS 基础相关的东西；
只定义用于浏览器中 JS 操作页面的 API 和全局变量。

1. DOM——文档对象模型

1.1 DOM 本质

html 代码时字符串，浏览器将这些代码结构化，转换为浏览器、js 可识别的文档对象模型。

• DOM 是哪种基本的数据结构： 树

1.2 DOM 节点操作

document.getElementById(‘id’) //元素
document.getElementByTagName(‘div’) //集合
var x = document.getElementsByClassName(“example color”); //集合 获取包含 “example” 和 “color” 类名的所有元素:
document.querySelector(“p.example”); //元素 获取文档中 class=”example” 的第一个

元素:
document.querySelectorAll(‘p’) //集合

attribute 和 property 的区别
property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的属性，它的值只能够是字符串；

attribute 值得更改会同步到 property 上；
property 值得更改不一定会反映到 attribute 上；
更改property和attribute上的任意值，都会将更新反映到HTML页面中；

1.3 DOM 结构操作

• 新增节点：appendChild
• 获取父元素：parentElement
• 获取子元素：childNodes（集合）
• 删除节点：removeChild

2. BOM——浏览器对象模型

2.1 navigator

浏览器用于 HTTP 请求的用户代理头的值

//检测浏览器类型
let ua = navigator.userAgent
let isChrome = ua.indexOf('Chrome')
console.log(isChrome)

2.2 screen

Screen 对象包含有关客户端显示屏幕的信息

width：返回显示器屏幕的宽度
height：返回显示屏幕的高度
availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)
availHeight：返回显示屏幕的高度 (除 Windows 任务栏之外)

2.3 location

Location 对象包含有关当前 URL 的信息

href：完整的 URL
protocol：当前 URL 的协议
host：端口号
pathname：当前 URL 的路径部分
search：从问号 (?) 开始的 URL（查询部分）
hash：从井号 (#) 开始的 URL（锚）
assign()：加载新的文档
reload()：重新加载当前文档
replace()：用新的文档替换当前文档

2.4 history

History 对象包含用户（在浏览器窗口中）访问过的 URL

属性  描述
length：返回浏览器历史列表中的 URL 数量
back()：加载 history 列表中的前一个 URL。
forward()：加载 history 列表中的下一个 URL。
go()：加载 history 列表中的某个具体页面。

3. 事件

3.1 通用事件绑定

//通用事件绑定
function bindEvent(elem, type, fn){
    elem.addEventListener(type, fn);
}
let a = document.getElementsByClassName('a');
bindEvent(a, 'click', function(e){
        e.preventDefault()//阻止默认行为
    alert('click')
})

3.2 事件冒泡

html 部分：

<div id="div1">
    <p id="p1">显示</p>
    <p id="p2">隐藏</p>
</div>
<div style="width:300px;height: 300px;background-color: #6dff6a" id="block"></div>

javascript 部分

//方法一：利用事件冒泡
        function bindEvent(elem, type, fn){
            elem.addEventListener(type, fn);
        }
        let block = document.getElementById('block');
        let p1 = document.getElementById('p1')
        bindEvent(p1, 'click', function(e){
            e.stopPropagation() //阻止事件冒泡
            block.style.display = 'block'
        })

        let div1 = document.getElementById('div1');
        bindEvent(div1, 'click', function(e){
            block.style.display = 'none'
        })
//方法二：运用事件代理，利用 e.target 判断
        function bindEvent(elem, type, fn){
            elem.addEventListener(type, fn);
        }
        let block = document.getElementById('block');
        let div1 = document.getElementById('div1');
        bindEvent(div1, 'click', function(e){
            console.log(e.target.nodeName)
            if(e.target.id === 'p1'){
                block.style.display = 'block'
            }else{
                block.style.display = 'none'
            }
        })

3.3 完善通用绑定事件的函数

        function bindEvent(elem, type, fn, selector){
            elem.addEventListener(type, function(e){
                if(selector && e.target.matches(selector)){//使用代理
                    fn.call(e.target, e)
                }else{
                    fn(e)
                }
            })
        }

事件代理的好处：

• 代码简洁
• 减少浏览器内存占用

题目：
编写一个通用的事件监听函数
描述事件冒泡流程
对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

4. Ajax

4.1 XMLHttpRequest

var xhr = new XMLHttpRequest()
xhr.open('GET', '/api', false)//false=>异步
xhr.onreadystatechange = function(){
    //函数异步执行
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            console.log(xhr.responseText)
        }
    }
}
xhr.send(null)
//IE 低版本使用 ActiveXObject

4.2 状态码说明

readyState 状态：

• 0：未初始化，还没有调用 send() 方法
• 1：载入，已调用 send() 方法，正在发送请求
• 2：载入完成，send() 方法执行完成，已收到全部响应内容
• 3：交互，正在解析响应内容
• 4：完成，响应内容解析完成，可以在客户端调用了

status 状态：

• 2xx：表示请求成功。eg：200
• 3xx：需要重定向，浏览器直接跳转
• 4xx：客户端请求错误，eg：404
• 5xx：服务端错误

4.3 跨域

4.3.1 跨域概念

同源： 协议+域名+端口 三者相同。
同源策略：同源策略限制以下几种行为：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送

同源策略是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

4.3.2 可以跨域的三个标签

• <img src=xxx>：用于打点统计，统计网站可能是其他域（img 没有兼容限制）
• <link href=xxx>：link、script 可以使用 CDN，CDN 的也是其他域
• <script src=xxx>：script 可以用于 JSONP

4.3.3 跨域解决方案

1）JSONP
动态创建script，再请求一个带参网址实现跨域通信。
缺点：只能实现get一种请求，无法发送特定头部，无法发送 body。
实现原理：

<script>
    window.callback = function(data){
        console.log(data)//跨域得到的信息
    }
</script>`
<script src="xxx"></script>
//上述 xxx 会返回 callback({x:1,y:2})

3）跨域资源共享（CORS）
服务端设置 http header（Access-Control-Allow-），前端无须设置，若要带cookie请求：前后端都需要设置。

2）postMessage
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数

5. 存储

cookies & localStorage & sessionStorage

Web Storage 的好处：
1） api 接口使用方便
2） 支持事件通知机制，可以将数据更新的通知发送给监听者
3） 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
4） 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
5） 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。