JS-WEB-API 整理

JS-WEB-API

常说的JS（浏览器执行的JS）包含两部分：

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

W3C标准中关于JS的规定有：

• DOM操作
• BOM操作
• 事件绑定
• Ajax请求（包括HTTP协议）
• 存储

例如：页面弹窗是 window.alert(123)，浏览器需要做：

1. 定义一个 window 全局变量，对象类型
2. 给它定义一个 alert 属性，属性值是一个函数

获取元素 document.geiElementById(id)，浏览器需要：

1. 定义一个 document 全局变量，对象类型
2. 给它定义一个 geiElementById 属性，属性值是一个函数

Document Object Model (DOM)

• DOM是哪种基本的数据解构？ 树形结构的文档对象模型
• DOM操作常用API有哪些？
• DOM 节点的attr 和 propery 有何区别？

一、DOM节点操作

1、获取

var a = document.getElementById("div1");
var b = document.getElementsByTagName('div');
var c = document.getElementsByClassName('.container');
var d = document.querySelectorAll('p');

2、property

修改的是JS对象的标准属性

3、attribute

修改获取的是HTML文档中标签的属性

DOM结构操作

新增节点，添加节点

var div1 = document.getElementById('div1');
//添加新节点
var p1 = document.createElement("p");
p1.innerHTML = 'this is p1';
div1.appendChild(p1); //添加创建的新元素
//移动已有节点
var p2 = document.getElementById("p2");
div1.appendChild(p2);

获取父元素与子元素、移除节点

var div1 = document.getElementById("div1");

var parent = div1.parentElement;
var child = div1.childNodes;
//移除节点
div1.removeChild(child[0]);

二、BOM操作（Browser Object Model)

• 检测浏览器类型
• 拆解 url 各部分

知识点

• navigator & screen

• //检测浏览器类型
  var ua = navigator.userAgent;
  var isChrome = ua.indexOf('Chrome');
  console.log(isChrome);
  
  //screen  获取屏幕大小
  console.log(screen.width);
  console.log(screen.height);

   loaction & history

• //拆解URL各部分
  //loaction
  console.log(location.href);        //当前域名
  console.log(location.host);        //当前域名
  console.log(location.protocol);    //协议 http:
  console.log(location.pathname); //当前分目录名
  console.log(location.search);    //    查询部分：‘？’之后部分
  console.log(location.hash);    //‘#’ 后面的字符
  
  //history
  history.back();
  history.forward();

三、事件

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

通用事件绑定

var btn = document.getElementById('btn1');
btn.addEventListener('click',function(event){
    console.log('clicked');
});

function bindEvent(elem,type,fn){
    elem.addEventListener(type,fn);
}

var a = document.getElementById('link1');
bindEvent(a,'click',function(e){
    e.preventDefault();
    alert('clicked');
})

IE低版本使用 attachEvent 绑定事件，和 w3c 标准不一样

事件冒泡

按照DOM树形结构，由子级到祖级的顺序传播

案例：点击p1弹出激活，点击其他的弹出取消

<div id="div1">
    <p id="p1">激活</p>
    <p id="p2">取消</p>
    <p id="p3">取消</p>
    <p id="p4">取消</p>
</div>
<div id="div2">
    <p id="p5">取消</p>
    <p id="p6">取消</p>
</div>

<script type="text/javascript">
    var p1 = document.getElementById('p1');
    var body = document.body;
    function bindEvent(elem,type,fn){
        elem.addEventListener(type,fn);
    }

    bindEvent(p1,'click',function(e){
        e.stopPropagation();
        alert('激活');
    })
    bindEvent(body,'click',function(){
        alert('取消');
    })

事件代理

事件代理就是在祖级DOM元素绑定一个事件，当触发子孙级DOM元素的事件时，利用事件流的原理来触发绑定在祖级DOM的事件。

<div id="div1">
    <a href="#">a1</a>
    <a href="#">a2</a>
    <a href="#">a3</a>
    <a href="#">a4</a>
    <!-- 会随时新增更多的 a 标签 -->
</div>

<script type="text/javascript">
    var div1 = document.getElementById('div1');
    div1.addEventListener('click',function(e){
        //target属性返回触发该事件的节点
        var target = e.target;
        //nodeName返回的标签名都是大写
        if(target.nodeName == 'A'){
            alert(target.innerHTML);
        }
    })
</script>

完善通用绑定事件函数

function bindEvent(elem,type,selector,fn){
    if(fn == null){
        fn = selector;
        selector = null;
    }
    elem.addEventListener(type,function(e){
        var target;
　　　　//使用代理
        if (selector){
            target = e.target;
　　　　　　//如果target是指定的选择器
            if(target.matches(selector)){
　　　　　　　　//让target使用fn的方法，修改this的指向
                fn.call(target,e);
            }
　　　　//不使用代理
        }else{
            fn(e);
        }
    })
}

//使用代理
var div1 = document.getElementById('div1');
bindEvent(div1,'click','a',function(e){
    console.log(this.innerHTML);
})

//不使用代理
var a = document.getElementById('a');
bindEvent(div1,'click',function(e){
    console.log(a.innerHTML);
})

代理的好处

• 代码简洁
• 减少浏览器内存占用（因为绑一次事件浏览器会计一次）

四、Ajax

• 手动编写一个 ajax，不依赖第三方库
• 跨域的几种实现方式

XMLHttpReaquest

var xhr = new XMLHttpRequest();
xhr.open("GET","/api",false);
xhr.onreadystatechange = function() {
    //这里的函数异步执行
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {
            alert(xhr.responseText);
        }
    }
};
xhr.send(null);

readyState

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

status

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

 跨域

 浏览器有同源策略，不允许 ajax 访问其他域接口

 条件：协议、域名、端口、有一个不同就算跨域

 可以跨域的三个标签

• <img src=xxx> （会有防盗链处理的情况）
• <link href=xxxx>
• <script src=xxx>

img 用于打点统计，统计网站可能是其他域，无兼容性问题；

link script 可以使用CDN，script 可用于 JSONP

JSONP 实现原理

<script>
    window.callback = function (data) {
        //这是我们跨域得到的信息
        console.log(data);
    }
</script>
<script src="http://coding.m.imooc.com/aqi.js"></script>
<!--以上将返回 callback({x:100, y:200})-->

 服务器端设置 http header

//第二个参数填写允许跨域的域名称，不建议直接写"*"    
response.setHeader("Access-Control-Allow-Origin", "http://a.com, http://b.com");
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

//接收跨域的cookie
response.setHeader("Access-Control-Allow-Credentials", "true");

 五、存储

•  请描述一下 cookie， sessionStorage 和 localStorage 的区别

cookie

本身用于客户端和服务器端通信

但是它有本地存储功能，于是就被“借用”

使用 document.cooki = ... 获取和修改即可

会携带到 ajax 中

用于存储的缺点：

存储量太小，只有4kb

所有 http 请求都带着，会影响获取资源的效率

API 简单，需要封装才能使用 document.cookie = ...

locationStorage 和 sessionStorage

HTML5 专门为存储设计，最大容量 5M

不会携带到 ajax 中

API 简单易用：

localStorage.setItem(key,value);

localStorage.getItem(key);

区别：sessionStorage 如果浏览器关闭会自动清理