和浏览器有关的js-web-api

  • BOM操作
  • DOM操作
  • 事件绑定
  • ajax
  • 存储

BOM

  • navigator
  • screen
  • location
  • history

DOM

property

获取和修改,是改变的js,js获取DOM节点等。

attribute

改变的是html的属性。

事件

事件绑定

普通事件绑定

1
2
3
4
5
6
var btn = document.getElementById('btn1')
btn.addEventListener('click', function (event) {
// event.preventDefault() // 阻止默认行为
// event.stopPropagation() // 阻止冒泡
console.log('clicked')
})

事件冒泡

事件会向上冒泡到body绑定的事件上。

事件代理

对 父类或者body添加事件监听,冒泡到body时候 e.target表示触发元素,如果触发元素的nodeName classlist 等是一样的,那就继续触发。

自己实现一个通用事件监听方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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;
if (target.matches(selector)) {
fn.call(traget, e);
}
} else {
fn(e);
}
});
}

网络请求

ajax

手写一个

1
2
3
4
5
6
7
8
9
10
11
var xhr = new XMLHttpRequest()
xhr.onreadystatechange =function(){
if(xhr.readyState===4){
if(xhr.state===200){
// do
xhr.responseText
}
}
}
xhr.open('GET','/api', false)
xhr.send(null)

fetch

比较新的底层技术

1
2
3
4
5
6
7
8
fetch('some/api/data.json', {
method:'POST', //请求类型 GET、POST
headers:{}, // 请求的头信息,形式为 Headers 对象或 ByteString
body:{}, //请求发送的数据 blob、BufferSource、FormData、URLSearchParams(get 或head 方法中不能包含 body)
mode:'', //请求的模式,是否跨域等,如 cors、 no-cors 或 same-origin
credentials:'', //cookie 的跨域策略,如 omit、same-origin 或 include
cache:'', //请求的 cache 模式: default、no-store、reload、no-cache、 force-cache 或 only-if-cached
}).then(function(response) { ... });

控制的更加底层。

跨域

浏览器为了数据安全
为了解决跨域问题

jsonp

先定义一个function

1
2
3
window.callback=function(data){
// 展示 data
}

然后script发送一个请求,返回 callback({}),这样就触发定义的function,实现了跨域

后端修改http头

1
2
3
4
5
6
response.setHeader("Access-Control-Allow-Origin", "http://m.juejin.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

localstorage

扫一扫,分享到微信

请我喝杯咖啡吧~