前端学习总结——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
    • 图片探测:利用<img>标签实现跨域通信,只能发送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数据只存在于当前会话,浏览器关闭就清空

 

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

上一篇:解决Windows桌面图标白板问题


下一篇:ToString("X2 ")——c#