03-10 09:04 阅读 78

前端学习总结——JS-web-API

JS-web-API
- DOM
- BOM
- 事件
- Ajax
- 存储

DOM

DOM本质是一棵树, 节点树
DOM节点操作
- 获取节点: id\ tagname( 集合 )\ classname( 集合 )\ css选择器获取( queryselector\ queryselectall )
- attribute: getAttribute(), setAttribute(), 修改HTML属性, 会改变HTML结构
- property: p1.style.width = ‘100px‘; 对DOM元素的对象属性做修改, 不会体现到HTML结构中( 尽量用property操作, 避免重新渲染耗费性能 )
- 新建节点: createElement()
- 插入节点: appendChild()
- 移动节点: 对现有节点直接执行appendChild会移动这个节点
- 获取父元素: div1.parentNode
- 获取子元素列表: div1.childNodes( 包括标签元素, text文本元素 )
- 子元素中文本元素的nodeType = 3; 标签元素nodeType = 1;
- 删除子元素: removeChild( p[0] );
DOM性能:
- DOM操作非常"昂贵", 避免频繁的DOM操作
- 对DOM查询做缓存
- 将频繁操作改为一次性操作
- 创建文件片段：
  - 此时这个片段还没有插入到DOM树中: let frag = document.createDocumentFragment()
  - 在循环体中执行插入: frag.appendChild(li);
  - 在循环体外, 一起插入到DOM树中: listNode.appendChild(frag);

BOM

navigator.userAgent：查看浏览器信息
location：地址读取和设置
拆解地址信息各个部分：
- location.protocol：https:，http: 协议
- location.href：完整地址
- location.host：域（服务器名+端口号）www.bilili.com:8080
- location.hostname：域名（服务器名）www.bilili.com
- location.pathname：url中的路径和文件名 /a/b/practice.html
- location.search：query参数，以？开头的查询字段 ?a=12&b=1
- location.hash：url散列值， #contents
screen：screen.witch，screen.height
history：history.back(); history.forward(); history.go();

事件

事件代理
- event.target() 获取触发的元素
- event.preventDefault() 阻止默认行为发生
- event.stopPropagation() 阻止冒泡（event.cancelBubble = true）
事件冒泡
- 一个元素发生事件，此元素的事件处理完会逐级再向上发生父级的事件，并一直追溯到最终没有事件祖先为止（document）
- 事件流阶段：捕获阶段（document -> target）、冒泡阶段（target -> document）

Ajax(Asynchronous JavaScript + XML)

function ajax(url) {
    const p = new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest(); // 创建xhr实例
        xhr.open(‘get‘, url, true); // 定义请求
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4) { // 数据响应阶段0-4，未初始化到完成接收所有响应
                if(xhr.status === 200) { // HTTP状态码，数据响应成功与否
                    resolve(
                        JSON.parse(xhr.responseText)  // 响应数据
                    )
                } else if (xhr.status === 404) {
                    reject(new Error(‘404 not found‘)) 
                }
            }
        }
        xhr.send(null);  // 发送请求
    })
    return p;
}

同源请求：协议、域名、端口三者必须全一致才是同源。
- 同源策略：ajax请求时，浏览器为了安全要求当前网页和服务器必须同源。
- 跨源资源共享（CORS：Cross-Origin Resource Sharing）要求服务端支持，设置HTTP-header
- 图片探测：利用标签实现跨域通信，只能发送get请求，无法获取服务器响应的内容，一般用于跟踪用户在页面上的点击操作或者动态显示广告
- jsonp（json with padding）：动态创建script元素并为src属性指定跨域的url，例如： http://freelife.net/json?callback=handleResponse（以回调函数的形式指定回调函数名称）
get请求和post请求：
- get请求用于向server查询某些信息
- post请求用于向server发送应该保存的数据，可以发送任意格式和较大的数据，但post请求在发送相同量数据情况下比get请求慢两倍
ajax常用插件： fetch API、jQuery、axios

fetch(‘/url/bar‘)
.then(response => {
  console.log(response.status); 
  console.log(response.text());  
})

存储

描述cookie、localStorage、sessionStorage(从存储容量、易用性、是否跟随HTTP请求发送)
- cookie：用于浏览器和server通信，早期被借用到本地存储，可用 document.cookie = " " 来修改，用法单一易用性差，存储大小最多4kb，发送HTTP请求时要发给服务端，会增加请求的数据量；
- localStorage和sessionStorage是HTML5专门为本地存储设置的，最大可存储5M（每个域名、每个host），api简单易用：setItem、getItem，不会跟着HTTP请求发送出去；
- localStorage数据永久存储，除非代码或手动删除
- sessionStorage数据只存在于当前会话，浏览器关闭就清空

原文：https://www.cnblogs.com/nicolelhh/p/14255630.html