JavaScript對象

avaScript對象分類

內置對象:包括string,number,boolean等
BOM: Browser Object Model, 瀏覽器對象模型, 包括和瀏覽器相關的內容
DOM: Document Object Model, 文檔對象模型,包括和頁面標簽相關的內容

BOM瀏覽器對象模型

window: 此對象里面的屬性和方法稱為全局的屬性和方法,訪問時可以省略掉window.
window中常見的方法:

alert("xxx")彈出提示框
confirm("xxx") 彈出確認框
prompt("xxx") 彈出文本框
isNaN(x) 判斷變量是否是
NaNparseInt()和parseFloat() 把字符串轉成整數或小數
console.log() 控制臺輸出
let timer=setInterval(方法,時間間隔) 開啟定時器
clearInterval(timer) 停止定時器
setTimeout(方法,時間間隔) 開啟只執行一次的定時器

window對象中常見的屬性

location位置

location.href 獲取和修改瀏覽器的請求地址
location.reload() 刷新頁面

history歷史

history.length 獲取歷史頁面數量
history.back() 返回上一頁面
history.forward() 前往下一頁面
history.go(n) n=1是前往下1頁面 n=-1 返回上一頁面 n=2 前往下2個頁面 n=0代表刷新

<h1>0</h1>
<h2>0</h2>
<script>
    setInterval(f,1000);
    let  i=document.querySelector("h1");
    let count=0;
    function f() {
        count++;
        i.innerText=count;
    }
    let num=0;
    let  j=document.querySelector("h2");
    let  timer=setInterval(function () {
        num++;
        j.innerText=num;
        if(num==50){
            clearInterval(timer)
        }
    },200)
    //只執行一次
    setTimeout(function () {
        alert("時間到")
    },5000)
</script>

DOM文檔對象模型

包含和頁面元素相關的內容

通過選擇器獲取頁面中的元素對象

let 元素對象=document.querySelector("選擇器")

獲取和修改元素的文本內容

元素對象.innerText="xxx"; 修改文本內容
元素對象.innerText 獲取文本內容

獲取和修改input控件的值

控件對象.value="xxx"; 修改
控件對象.value 獲取

創建元素對象

let 元素對象=document.createElement("標簽名");

添加元素對象到某個元素里面

document.body.appendChild(元素對象);
父元素.appendChild(元素對象);
父元素.append(元素對象,元素對象,元素對象);

<input type="text" id="i1">
<input type="button" value="飛機" onclick="f(1)">
<input type="button" value="炸彈" onclick="f(2)">
<script>
    let num=document.querySelector("#i1");
    function f(x) {
        if(isNaN(num.value)){
            let error=document.createElement("div");
            error.innerText="請輸入數字"
            document.body.appendChild(error)
            return;
        }
        let imgNum=x==1?"../airplane.png":"../bom3.png";
        for(i=0;i<num.value;i++){
            let computer=document.createElement("img");
            computer.src=imgNum;
            document.body.append(computer);
        }
    }
</script>
//======--------------=========<input type="text" id="i1" placeholder="姓名">
<input type="text" id="i2" placeholder="工資">
<input type="text" id="i3" placeholder="工作">
<input type="button" value="添加" onclick="f()">
<table border="1">
    <tr>
        <th>姓名</th>
        <th>工資</th>
        <th>工作</th>
    </tr>
</table>
<script>
     //通過標簽名獲取table
     let table=document.querySelector("table");
     function f() {
        //創建 tr 和td
        let trs=document.createElement("tr")
        let td_name=document.createElement("td")
        let td_salary=document.createElement("td")
        let td_work=document.createElement("td")
        td_name.innerText=i1.value;
        td_salary.innerText=i2.value;
        td_work.innerText=i3.value;
        //td 裝入 tr
        trs.append(td_name,td_salary,td_work);
        //tr 裝進table
        table.append(trs);
    }
</script>

什么是 JSON?

JSON 英文全稱 JavaScript Object Notation
JSON 是一種輕量級的數據交換格式。
JSON是獨立的語言 *
JSON 易于理解。

【注】JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文本。文本可以被任何編程語言讀取及作為數據格式傳遞。

//json實例
{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 語法規則

數據為鍵/值對。
數據由逗號分隔。
大括號保存對象
方括號保存數組

JSON 對象

JSON 對象保存在大括號內。

//就像在 JavaScript 中, 對象可以保存多個 鍵/值 對：
{"name":"Wong", "url":"www.celinf.cn"}

JSON函數

JSON.parse() 用于將一個 JSON 字符串轉換為 JavaScript 對象。
JSON.stringify() 用于將 JavaScript 值轉換為 JSON 字符串。

var text='{ "sites" : [' +
    '{ "name":"celinf" , "url":"www.celinf.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
obj=JSON.parse(text);
document.getElementById("demo").innerHTML=obj.sites[1].name + " " + obj.sites[1].url;

HTML 事件屬性

onclick 點擊事件：
onload 用戶進入頁面時被觸發
onunload 用戶離開頁面時被觸發
onchange 事件常結合對輸入字段的驗證來使用。

//使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。
<input type="text" id="fname" onchange="upperCase()">

onmouseover 鼠標移至 HTML 元素上方觸發函數
onmouseout 鼠標移出元素時觸發函數。

練習Demo

<table border="1">
    <caption>個人信息</caption>
    <tr>
        <td>照片</td>
        <td><img src="head.jpg" width="50px" alt="" id="head_img"></td>
    </tr>
    <tr>
        <td>名字:</td>
        <td id="name_td">XXX</td>
    </tr>
    <tr>
        <td>年齡:</td>
        <td id="age_td">XXX</td>
    </tr>
    <tr>
        <td>好友</td>
        <td>
            <ul id="firend_ul">
            </ul></td>
    </tr>
</table>
<input type="button" value="請求數據" onclick="f()">

<script>
let person={name:"張三",url:"../bee.png",age:20,friend:["李四","王五","趙六"]}
    function f() {
        head_img.src=person.url;
        name_td.innerText=person.name;
        age_td.innerText=person.age;
        for (let p of person.friend) {
            let li=document.createElement("li")
            li.innerText=p;
            firend_ul.append(li)
        }
    }
</script>

學習記錄，如有侵權請聯系刪除

覽器對象

一、參考資料

瀏覽器對象模型
聊聊 H5 的 pushState 與 replaceState
用 Javascript 獲取頁面元素的位置
js 獲取操作元素位置

二、認識瀏覽器運行態下的 js

1.問：是否了解瀏覽器的執行態（分層設計）？

ECMAScript - 基礎邏輯、數據處理，js 語法塊
BOM - 瀏覽器本身的能力操作
Browser Object Model（瀏覽器對象模型）
瀏覽器模型提供了獨立于內容的、可以與瀏覽器窗口進行滑動的對象結構，就是瀏覽器提供的 API
DOM - 瀏覽器文本的操作

2.BOM

1.location

提供當前窗口中的加載的文檔有關的信息和一些導航功能。既是 window 對象屬性，也是 document 的對象屬性

window.location===document.location; //true

// https://www.zhihu.com/search?type=content&q=123

location.href='https://www.zhihu.com/search?type=content&q=123'.origin=// 完整的url
  'https://www.zhihu.com'.host=// 頁面的標準域名
  'www.zhihu.com'.hash=// 服務器名稱+端口 例如：‘www.zhihu.com:8080’
  '#hash'.pathname=// url中#號后面的哈希值
  '/search'.search=// url中[/]后面內容
  '?type=content&q=123'.protocol=// url中[?]后面內容
  'https:'.port=// 協議[http:]
    ''; //端口號：[ 80 | 8080 | ... ]

方法：

assign()
不會打開新窗口，把請求 url 中的資源，加載到當前窗口
會給瀏覽器的History中增加一條歷史記錄
replace(url)
用 url 中的內容，替換掉當前的 location 資源
不會在瀏覽器的History中增加記錄，意味著用戶不能使用回退按鈕
reload()
重新加載當前 url 的內容
當 reload(true)時，會強制從服務器獲取所有內容
若沒有參數，重新加載時，可能從瀏覽器緩存加載頁面

拓展方向：

location 本身 api 操作
assign VS replace 的區別
解析 url 中的查詢字符串，返回一個對象
思路：
可以通過正則的方式獲取，或者通過字符串分割的方式
通過location.search獲取查詢字符串內容，如果有[?]就截取[?]后面的內容
然后通過[&]進行分割成為['key=val1','key=val2']的形式
通過[=]對數組進行分割，使用decodeURIComponent對 key 和 val 進行解碼，存放到對象中
路由相關: 跳轉、參數、操作
頁面能否返回（history）
頁面是否刷新（hash）
reload、assign、replace 參數等
URI or URL 的區別?
URI Uniform Resource Identifier - 統一資源標識符
URL Uniform Resource Locator - 統一資源定位符

2.History

history.state.length; // 當前頁面的狀態 // 返回當前 `會話` 中的 history 個數

方法：

pushState(state, title, url)
給當前的 history 中添加一個狀態
瀏覽器地址會改變，但是不會加載頁面，本質上頁面還是停留在原來的頁面
replaceState()
與 pushState 方法類似，但是不會添加一個新的 state 到 history 中，而是直接修改當前state

相關聯的方法

window.onpopstate()
每當處于激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應 window 對象上觸發
調用history.pushState() 或者 history.replaceState() 不會觸發 popstate 事件。
popstate 事件只會在瀏覽器某些行為下觸發
比如點擊后退、前進按鈕(或者在 JavaScript 中調用 history.back()、history.forward()、history.go()方法)

例子：

window.onpopstate=function (event) {
  alert(
    'location: ' +
      document.location +
      ', state: ' +
      JSON.stringify(event.state),
  );
};
//綁定事件處理函數.
history.pushState({ page: 1 }, 'title 1', '?page=1'); //添加并激活一個歷史記錄條目 http://example.com/example.html?page=1,條目索引為1
history.pushState({ page: 2 }, 'title 2', '?page=2'); //添加并激活一個歷史記錄條目 http://example.com/example.html?page=2,條目索引為2
history.replaceState({ page: 3 }, 'title 3', '?page=3'); //修改當前激活的歷史記錄條目 http://ex..?page=2 變為 http://ex..?page=3,條目索引為3
history.back(); // 彈出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 彈出 "location: http://example.com/example.html, state: null
history.go(2); // 彈出 "location: http://example.com/example.html?page=3, state: {"page":3}

3.navigator

瀏覽器系統信息大集合

clipboard
系統剪切板相關信息
userAgent
當前用戶的設備信息
onLine
返回瀏覽器的在線狀態
serial
返回串口對象，Web Serial API 的入口點
bluetooth
系統藍牙相關 …

4.screen

用來表示瀏覽器窗口外部的顯示器的信息等

window.screen.deviceXDPI/deviceYDPI 屏幕實際的水平 DPI、垂直 DPI

三、瀏覽器事件

瀏覽器事件模型主要分為三個階段：

捕獲階段（IE）
事件由最外層元素(window),層層向內傳遞，直到最具體的元素
目標階段
冒泡階段（網景）
事件由最具體的元素(事件的觸發者),層層向外傳遞（傳遞給父節點），直到 window 對象停止

1.addEventListener 第三個參數

el.addEventListener(event, function, useCapture)
// useCapture默認值false，也就是默認冒泡
// true為捕獲階段

2.阻斷事件傳播

event.stopPropagation()
阻斷事件的傳播
但是無法阻止默認事件
event.stopImmediatePropagation()
如果有多個相同類型的事件監聽函數綁定到同一個元素
當該類型的事件觸發時，它們會按照被添加的順序執行
如果其中某個監聽函數執行了此方法，則當前元素剩下的監聽函數將不會被執行

3.阻止默認行為

e.preventDefault()
e.preventDefault()可以阻止事件的默認行為發生
默認行為是指：點擊 a 標簽就轉跳到其他頁面、拖拽一個圖片到瀏覽器會自動打開、點擊表單的提交按鈕會提交表單等等，因為有的時候我們并不希望發生這些事情，所以需要阻止默認行為

拓展方向

性能方向

如：事件委托的運用，一個 ul 和多個 li，點擊 li 時，改變背景顏色

{
  /* 
<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>  
*/
}
var list=document.querySelector('list');

function onClick(e) {
  var e=e || window.event;
  if (e.target.tagName.toLowerCase()==='li') {
    // 業務邏輯...
    e.target.style.backgroundColor='pink';
  }
}

list.addEventListener('click', onClick, false);

兼容性方向

如：寫一個兼容 IE 的事件綁定

先區別 IE 的不同之處

綁定事件的函數和傳參不同: 使用 attachEvent綁定，事件名要加on
解綁時使用的函數和參數不同: 使用detachEvent解綁
阻斷時的不同: event.cancelBubble=true
阻止默認行為的不同: event.returnValue=false

class BindEvent {
  constructor(el) {
    this.el=el;
  }

  addEventListener(type, handler) {
    if (this.el.addEventListener) {
      this.el.addEventListener(type, handler, false);
    } else if (this.el.attachEvent) {
      this.el.attachEvent('on' + type, handler);
    } else {
      this.el['on' + type]=handler;
    }
  }

  removeEventListener(type, handler) {
    if (this.el.removeEventListener) {
      this.el.removeEventListener(type, handler, false);
    } else if (this.el.detachEvent) {
      this.el.detachEvent('on' + type, handler);
    } else {
      this.el['on' + type]=null;
    }
  }

  static stopPropagation() {
    if (e.stopPropagation) {
      e.stopPropagation();
    } else {
      e.cancelBubble=true;
    }
  }

  static preventDefault() {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue=false;
    }
  }
}

四、網絡請求

1.XMLHttpRequest

屬性
responseText（服務端響應的文本數據）
responseXML（服務點響應的 xml 或者 html 類型數據）
status（響應 HTTP 狀態）
statusText（響應 HTTP 狀態描述）
readyState（發出請求的狀態碼）對應onreadystatechange事件0:創建成功，但是沒有調用 open 方法1:open 方法被調用2:send 方法被調用3:loading，下載中4:下載操作完成
timeout（超時時間，對應超時事件ontimeout,ontimeout 事件被棄用）
upload（上傳進度）
方法
open() 初始化請求(method, url, async)，async 表示是否異步操作，默認 true
send() 發送請求數據，get 請求時，send 可以不傳或者 null
abort() 中止已經發出的請求
setRequestHeader() 設置請求頭信息
getRequestHeader() 獲取指定響應頭信息
getAllResponseHeaders() 獲取所有響應頭信息

封裝 XMLHttpRequest 請求

function ajax({ method='get', url='', params=undefined }) {
  return new Promise((resolve, reject)=> {
    let xhr=new XMLHttpRequest();
    if (method.toLowerCase()==='get' && params !==undefined) {
      url=url + '?' + params;
    }
    xhr.open(method, url, true);
    xhr.onreadystatechange=function () {
      if (xhr.readyState===4) {
        if (xhr.status===200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.status);
        }
      }
    };

    if (method.toLocaleLowerCase()==='get') {
      xhr.send();
    } else {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send(params);
    }

    xhr.onerror=(err)=> reject(err);
    xhr.timeout=()=> reject('timeout');

    // progress事件可以報告長時間運行的文件上傳
    xhr.upload.onprogress=(p)=> {
      console.log(Math.round((p.loaded / p.total) * 100) + '%');
    };
  });
}

2.fetch

方法：fetch(url，{}｜ init 對象 )，返回 Promise 對象，只支持異步
響應通過 response 對象獲取：
fetch().then((response)=>{}).catch(()=>{})
response 對象混入了 body，提供了 5 個方法，將 ReadableStream 轉存到緩沖區的內存里，將緩沖區轉換為 js 對象，通過 Promise 返回
response.text() //轉為 text
response.json() //轉為 json
response.formData()
response.arrayBuffer()
response.blob()
不支持超時設置
但是可以使用promise+setTimeout進行控制
默認不攜帶cookies，但是可以設置
fetch(url, {credentials: 'include'});
omit 不發送 cookie
same-origin 同源發送 cookie（默認）
include 都發送 cookie
resolve 若發生在網絡通信正常（404，500）也是 resolve
.catch()也不會被執行。
reject 只發生在網絡通信異常
想要精確的判斷 fetch 是否成功
需要包含 promise resolved 的情況，此時再判斷 response.ok 是不是為 true
需要借用 AbortController 中止 fetch

// resolve若發生在網絡通信正常（404，500）也是resolve
fetch('http://domain/service', {
  method: 'GET',
})
  .then((response)=> {
    // 想要精確的判斷 fetch是否成功
    // 需要包含 promise resolved 的情況，此時再判斷 response.ok是不是為 true
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then((json)=> console.log(json))
  // .catch()也不會被執行
  .catch((error)=> console.error('error:', error));

// ************************************
// 不支持直接設置超時, 可以用promise
function fetchTimeout(url, init, timeout=3000) {
  return new Promise((resolve, reject)=> {
    fetch(url, init).then(resolve).catch(reject);
    setTimeout(reject, timeout);
  });
}
// ************************************
// 中止fetch
// signal用于支持AbortController中斷請求
const controller=new AbortController();
// AbortController接口表示一個控制器對象
// 允許你根據需要中止一個或多個 Web請求
fetch('http://domain/service', {
  method: 'GET',
  signal: controller.signal,
})
  .then((response)=> response.json())
  .then((json)=> console.log(json))
  .catch((error)=> console.error('Error:', error));
controller.abort();

3.Http 狀態碼和 Header

1.狀態碼

100 信息性|200 成功|300 重定向|400 客戶端錯誤|500 服務器錯誤

[1|2|3]xx

101 切換協議
200 Ok
301 永久重定向（設備會緩存）
302 臨時重定向（以前是臨時轉移，已經不推薦使用了，建議使用 307）
307 臨時重定向
如果是 POST/DELETE 過來的會繼續使用
302 只會使用 get
304 (Not Modified)服務器文件未修改,協商緩存
308 永久重定向

4xx

400 客戶端請求有語法錯誤，不能被服務器識別
403 服務器受到請求，但是拒絕提供服務，可能是跨域也可是權限不夠
404 請求的資源不存在
405 請求的 method 不允許

5xx

500 服務器發生不可預期的錯誤

2.字段

Content-Length：? 發送給接收者給 Body 內容長度（字節）
? 一個 Byte 是 8bit
utf-8 編碼的字符是 1-4 個字節
?User-Agent?：客戶端特性的字符串
?Content-Type：? 媒體類型
?Origin?：描述請求來源地址
?Accept
建議服務端返回何種媒體類型?/表示所有類型（默認）?text/html,application/json?
Accept-Encoding
? 建議服務端發送什么編碼（壓縮算法）
?deflate,gzip;q=1.0,*;q=0.5
?Accept-Language：? 建議服務端傳遞那種語言
?Referer
告訴服務端打開當前頁面的上一張頁面的 URL；
如果是 ajax 請求那么就告訴服務端發送請求的 URL 的什么 ?
非瀏覽器環境有時候不發生 Referer（或者虛擬 Referer,通常是爬蟲）
常用來做用戶行為分析
?Connection?
決定鏈接是否在當前事務完成后關閉
?http1.0 默認是 close
?http1.1 默認是 keep-alive

4.拓展方向

如何應對網絡不穩定（波動）的情況？

失敗了重發，指數補償

const request=(url)=> {
  let resolved=false;
  let t=1;
  return new Promise((resolve, reject)=> {
    // Promise.race([
    //     fetch(url),
    //     wait(100, ()=> fetch(url)),
    //     wait(200, ()=> fetch(url)),
    //     wait(400, ()=> fetch(url)),
    //     wait(800, ()=> fetch(url)),
    //     wait(1600, ()=> fetch(url)),
    // ])
    function doFetch() {
      if (resolved || t > 16) return;
      fetch(url)
        .then((resp)=> resp.text())
        .then((data)=> {
          if (!resolved) {
            resolved=true;
            resolve(data);
          }
        });

      setTimeout(()=> {
        doFetch();
        t *=2;
      }, t * 100);
    }
    doFetch();
  });
};

如何處理并發請求？

若相同的請求，多次發送，會照成帶寬的浪費
處理思路：做緩存
因為請求具有時效性，所以不能做永久緩存
相同的請求在一定的時間內只發生一次
使用w保存請求信息，若同一時間發送多次相同對請求
使用w[hash].resolves保存 resolve 函數當請求函數w[hash].func發送成功，執行 resolves 中的函數，保證每次請求都有響應信息

端瀏覽器對象模型BOM常用對象介紹，BOM即Broswer Object Model 瀏覽器對象模型，在JavaScript中可以理解為window對象，用來進行與瀏覽器相關的一些操作，學習BOM就是學習 JavaScript中的window對象。

一、window對象

BOM的核心對象是 window，它代表瀏覽器的一個實例。在瀏覽器中，window有著雙重的角色：JavaScript訪問瀏覽器的接口對象，ES中的Global對象意味著網頁中的任何一個對象，變量，函數都是以window作為其Global對象。

1、全局作用域，在ECMAScript中，window對象扮演著Global對象的角色，也就是說，所有在全局作用域聲明的變量，函數都會變成window的屬性和方法，都可以通過 window.屬性名（或方法名）直接調。

2、導航和打開窗口，通過 window.open() 既可以導航到一個特定的URL，也可以打開一個新的瀏覽器窗口

二、location對象

[^location 是最有用的BOM對象之一，它提供了與當前窗口中加載的文檔有關的信息]: JavaScript高級程序設計。

注: window.location 和 document.location?引用的是同一個對象。location 既是 window 對象的屬性，也是 document?對象的屬性。

三、 navigator對象

navigator 對象主要用來獲取瀏覽器的屬性，區分瀏覽器類型；

navigator 對象屬性較多，且兼容性比較復雜。

四、history對象

history 對象保存著用戶上網的歷史記錄，從窗口被打開的那一刻算起，因為 history 是 window 對象的屬性，因此每個瀏覽器窗口，每個標簽乃至每個框架，都有自己的 history對象與特定的 window 對象關聯。

總結瀏覽器對象模型BOM中常用的對象有navigator，window, location, history

window既是 JavaScript 的全局對象，也是BOM的一個實例，所有的全局方法，屬性，BOM中的屬性，都可以通過 window. 來調用；

window作為BOM的實例，最常用的幾個方法分別是：window.open()，window.close()，，分別用來打開和關閉瀏覽器窗口頁面，這里需要注意的是，通過 open 方法打開的頁面，才能通過close 方法關閉；

location對象也是用的比較多的一個BOM對象，主要用來操作URL相關的一些信息，除了修改 Hash 之外的任何屬性，頁面都會重新加載，歷史記錄會多加一條歷史記錄；

location對象還有一個 reload() 方法用于手動重新加載頁面，該方法接收一個可選參數，為 true 的時候表示從服務器重新加載，否則可能從瀏覽器緩存中重新加載頁面；

location對象還有一個比較特殊的方法，location.replace()，該方法可以覆蓋當前頁面并重新加載，同時不會在 history 中生成歷史記錄；

navigator對象主要用來獲取瀏覽器相關的一些信息，使用的時候需要注意兼容性。可以用來獲取瀏覽器類（Chrome,safrai,FireFox,Edge,IE）等；

history對象主要用來操作瀏覽器URL的歷史記錄，可以通過參數向前，向后，或者向指定URL跳轉。可以通過 length 屬性獲取記錄數，判斷當前頁面是否是打開的首個頁面；

在線咨詢

上一篇：在vue中優雅的使用 dialog 組件（彈窗無限套
下一篇：ai為我寫了一段讓流星劃破天際的浪漫代碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商