前端知識點積累(js篇)

1、get和post

w3c是這麼解釋的:

    至於網上盛傳一種說法:

      這種說法是有爭議的,最初也不知道是誰寫的一篇文章,然後被瘋狂複製粘貼,導致現在一搜get和post的區別,全都是搬的那篇文章的解釋,並且看到了不少反對這個文章觀點的,所以我覺得不能盡信,萬一面試官問你這個問題的時候你這麼回答了,然後人家讓你解釋一下爲什麼會這麼理解??不是官方解釋,也不是你親自測試出來的結果,所以還是保守一點,或者可以根據你實際在項目中遇到過的get和post的兩種請求方法,結合w3c的解釋來回答這個問題。

2、http常用的狀態碼

      更多詳細解釋:http://www.w3school.com.cn/tags/html_ref_httpmessages.asp

3、cookie、session,localStorage和sessionStorage的區別

前端可以存取cookie值,但不能存取session值。

後臺既可以存取cookie值,也可以存取session值。

cookie和session的區別:

  • cookie是存在客戶端(用戶電腦)的,session是存在服務器端的。
  • 存在本地的cookie信息很容易被竊取,session相對來說要安全一點,因此cookie中不會存儲像密碼之類的重要信息。但這個安全性也是相對較小一點而已,因爲session是依賴cookie的,服務器想要記住客戶端的某些信息,必須要給客戶端一把“鑰匙”(SESSIONID),這把“鑰匙”一般都是存在cookie中的,因此這個SESSIONID任然有可能被別人拿到,然後用這把“鑰匙”來開啓服務器的那個裝有你信息的“箱子”。只不過對於黑客來說,要拿到這把鑰匙容易,開箱子的過程不會太簡單,因此說session比cookie相對安全一點。
  • cookie有大小限制(約4K)而session沒有,但是session畢竟是放在服務器端的,因此會對服務器造成一定的壓力。

(1)cookie

前後端都可以在客戶端(用戶電腦)設置cookie,後臺可以通過請求頭設置cookie,前端可以通過JavaScript設置。

對於前端來說,因爲cookie的存儲方式是一整個字符串,所以存值和取值都需要封裝方法來實現。 如果不設置過期時間,cookie默認的生存週期是瀏覽器會話結束之後銷燬(存在瀏覽器的內存中),就是說瀏覽器關閉了,cookie就會被銷燬(是整個瀏覽器關閉,不是單個網頁關閉),如果設置了過期時間,cookie將被存儲在瀏覽器的磁盤文件中。下面是前端封裝的設置cookie和取cookie的方法(摘自W3C)。如果想刪除cookie,可以設置cname相同但過期時間爲-1的鍵值對。

//存值  參數爲 cookie 名、cookie 值、cookie過期時間
function setCookie(cname,cvalue,exdays){
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

//取值   參數爲 cookie 名
function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++){
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

(2)session

session是後端技術,前端可以瞭解一下。

session技術是基於cookie的,後臺要用session存用戶信息的話,需要藉助cookie來存儲JSESSIONID,每個客戶端獨有自己的JSESSIONID,就像身份證一樣,是一個唯一性標識。

這個添加到cookie和從cookie中取值的過程都不需要前端做什麼,不需要前端來存值,也不需要前端將值取出來再發送給服務器,是通過服務器端實現的(需要服務器端調用方法)。session默認在服務器端存儲時間爲30分鐘,這個30分鐘是以用戶最後一次操作(請求)開始計時的,因此關閉瀏覽器並不會立馬銷燬session。

localStorage和sessionStorage都屬於HTML 5 Web 存儲

localStorage更像是cookie的升級版,因爲cookie有4K的大小限制,而且存取都要自己封裝方法,localStorage的限制是M級別的,不同瀏覽器限制大小不一樣,但是在使用 web 存儲前應檢查瀏覽器是否支持 localStorage 和sessionStorage,因爲是H5新增的,所以兼容性不是太好。

if(typeof(Storage)!=="undefined"){
    // 支持 localStorage  sessionStorage 對象
} else {
    // 抱歉! 不支持 web 存儲。
}

不管是 localStorage,還是 sessionStorage,可使用的API都相同,常用的有如下幾個(以localStorage爲例):

  • 保存數據:localStorage.setItem(key,value);
  • 讀取數據:localStorage.getItem(key);
  • 刪除單個數據:localStorage.removeItem(key);
  • 刪除所有數據:localStorage.clear();
  • 得到某個索引的key:localStorage.key(index);

localStorage 和sessionStorage 的區別:

  • localStorage - 沒有時間限制的數據存儲,默認永久存儲,需要手動刪除數據。
  • sessionStorage - 針對一個 session(會話) 的數據存儲,瀏覽器關閉就銷燬。

這倆我用的不多瞭解也不多,畢竟兼容性不好,考慮到IE瀏覽器,還是算了吧。希望有一天IE瀏覽器也可以強制升級,不維護低版本。

 

4、window.history 和 document.referrer實現後退功能

window.history.go( ) ;返回上一頁並且刷新

window.history.go(-1) ; 返回上一頁不刷新

window.history.back( ) ; 返回上一頁不刷新

window.location.href = document.referrer; 返回上一頁並且刷新

偶然間發現通過window.history返回上一頁的方法有個小弊端,假如頁面中有錨點 (我在頁面中用錨點做了目錄定位功能),這個返回方法也會觸發返回那個a標籤的錨點事件 ,而document.referrer不會,它是獲取前一頁面的URL地址,但是window.location.href = document.referrer會刷新頁面,當時我做的是h5的APP頁面,Android系統大都用的是QQ瀏覽器內核,而這個瀏覽器內核有個bug,就是你通過js返回上一頁的話頁面會自動刷新,反正我嘗試了很多方法都不能讓頁面不刷新,所以個人覺得h5手機APP的話,刷不刷新都關係不大,但是ios確實會有區別。

另外附上一篇很詳細的關於document.referrer的文章鏈接  : https://www.cnblogs.com/baiyygynui/p/6426621.html

5、true OR false

var a, //false
b = {}, //true
c = '', //false
d = [], //true
e = null, //false
f = undefined; //false

if(b){
  console.log("true");
}else{
  console.log("false");
}

另外,對一個對象進行  !!(雙重否定表肯定)操作會把它轉成布爾對象  效果和Boolean( )強轉是一樣的,但是寫法更簡便。

6、在瀏覽器輸入網址按下回車鍵之後發生了什麼

這也是個老生常談的問題了。

說簡單點就是:瀏覽器根據 DNS 服務器得到域名的 IP 地址 =》向這個 IP 的機器發送 HTTP 請求 =》服務器收到、處理並返回 HTTP 請求 =》瀏覽器得到返回內容並展示。

說複雜點:

首先要經過DNS解析是因爲電腦識別的是IP地址不是www.baidu.com這種人爲取的域名,這種形式只是爲了方便人記憶,但是電腦跟人是不一樣的。

但是在向DNS服務器詢問之前,操作系統會先檢查自己本地的hosts有沒有這樣一個映射關係,比如說localhost對應的是127.0.0.1。一般hosts文件存放在C:\Windows\System32\drivers\etc目錄下,用記事本打開之後可以自己修改,比如如果你在文本最後添加這樣一行,你就訪問不了百度了,因爲你把映射關係改變了,而本地配置的映射關係優先級是大於DNS服務器上的,不過修改這個文件需要提供管理者權限。

找到這個映射關係並且把IP返回給瀏覽器之後,瀏覽器就會嘗試和該IP地址建立連接,這個嘗試連接的過程需要經過“三次握手”,第一次是客戶端詢問服務器是否可以建立連接,第二次服務器返回給客戶端一個訊息告訴它能不能連,第三次是客戶端接收到反饋信息後再正式與服務器建立連接,這樣就完成了“三次握手”,連接完畢之後客戶端就可以向服務器請求資源了,這個過程有點像打電話,我想給趙四打電話,我只知道他叫趙四,我先要找到趙四的電話號碼,然後撥出電話,等趙四那邊接通了之後我這邊會嘟一聲,我就知道電話通了,我可以跟趙四說話了。

說話的過程就是HTTP請求的過程,這個過程是建立在電話接通的前提下,HTTP請求是我問一句你答一句,而電話接通狀態是一次性的,掛斷了就說不了話了,也就不能發送HTTP請求了。

前端關注的重點應該是發送HTTP請求之後,服務器分析完你的需求返回給你相應的資源之後,客戶端接收到資源之後應該幹什麼。客戶端拿到資源瀏覽器會開始解析這些資源,並且開始渲染頁面,最重要的就是這個渲染過程。

瀏覽器的渲染過程是一個很複雜的計算過程,並且它是先構建 DOM 和 CSSOM 樹再呈現頁面的,而腳本在文檔的何處插入,就在何處執行。當 HTML 解析器遇到一個 script 標記時,它會暫停構建 DOM,將控制權移交給 JavaScript 引擎;等 JavaScript 引擎運行完畢,瀏覽器會從中斷的地方恢復 DOM 構建,這也是爲什麼通常建議把JavaScript放在HTML文檔的最後而不建議放在頭部加載的原因,放在頭部的話就會阻塞DOM樹的渲染,導致頁面出現很長一段時間的空白等待,儘可能快的讓頁面呈現會提升用戶體驗。

之後合併DOM Tree和CSS Rule Tree形成渲樹,它只包含渲染網頁所需的節點。遍歷每個DOM樹中的node節點,在CSSOM規則樹中尋找當前節點的樣式,生成渲染樹。然後開始佈局計算每個對象的精確位置和大小,最後一步是繪製,使用最終渲染樹將像素渲染到屏幕上。總結步驟:

  1. 處理 HTML 標記並構建 DOM 樹;
  2. 處理 CSS 標記並構建 CSSOM 樹;
  3. 將 DOM 與 CSSOM 合併成一個渲染樹;
  4. 根據渲染樹來佈局,以計算每個節點的幾何信息;
  5. 將各個節點繪製到屏幕上。

7、Ajax  =  Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)

ajax的精髓就是XMLHttpRequest 對象,它用於和服務器交換數據

jQuery封裝的ajax大概可以理解爲兩部分,設置請求頭、回調。jQuery幫我們簡化了創建XMLHttpRequest對象和發送請求兩個步驟 。在原生ajax中,發送一個ajax請求分爲下面幾個步驟:

  1. 創建XMLHttPRequest對象;
  2. 設置請求頭;
  3. 發送請求;
  4. 失敗或者成功的回調。

所有現代瀏覽器均支持 XMLHttpRequest 對象(IE5 和 IE6 使用 ActiveXObject),所以兼容寫法應該是:

//創建xhr對象
var xhr;
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xhr=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//規定請求的類型、URL 以及是否異步處理請求
request.open("POST","url",true);
//設置請求頭
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //必須寫在open和send中間
//發送請求
request.send("name=zm&sex=girl");
//規定當服務器響應已做好被處理的準備時所執行的任務(回調函數)
xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        //處理返回的信息
        console.log(xmlhttp.responseText);
    }
}
//xmlhttp.readyState:存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
//0: 請求未初始化
//1: 服務器連接已建立
//2: 請求已接收
//3: 請求處理中
//4: 請求已完成,且響應已就緒
//xmlhttp.status   200: "OK"  404: 未找到頁面
//每當 readyState 屬性改變時,就會調用onreadystatechange函數,因此當 readyState 等於 4 且狀態爲 200 時,表示響應已就緒

//xmlhttp.responseText  獲得字符串形式的響應數據
//xmlhttp.responseXML	獲得 XML 形式的響應數據。





 

JavaScript需要總結的太多了,還有雙向數據綁定、原生js中需要做瀏覽器兼容判斷的方法、promise.....太多太多了,隨便順個藤一摸就會發現自己是多麼的無知。

暫時就記錄這些吧。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章