前端知識點總結—面試專用

_ipo發表於2019-02-16
前端面試

1.關於基礎css html js部分

1.1基本演算法

1）快速排序

時間複雜度 nlogn

function quickSort(arr){
    if (arr.length<=1){
        return arr;
    }
   var pivotIndex = 0,
        pivort = arr.splice(pivortIndex, 1)[0];
    var left = [],
        right = [];
    for (var i = 1, length = arr.length; i < length; i++) {
        if (arr[i] < pivort) {
            left.push(arr[i]);
        }else if (arr[i] > = pivort) {
            right.push(arr[i]);
        }
    }
   return quickSort(left).concat([pivort], quickSort(right));
}

2) 二分查詢演算法

時間複雜度：logn(以2為底n的對數)

二分查詢的基本思想是將n個元素分成大致相等的兩部分，去a[n/2]與x做比較，如果x=a[n/2],則找到x,演算法中止；如果x<a[n/2],則只要在陣列a的左半部分繼續搜尋x,如果x>a[n/2],則只要在陣列a的右半部搜尋x.

時間複雜度無非就是while迴圈的次數！

總共有n個元素，

漸漸跟下去就是n,n/2,n/4,....n/2^k，其中k就是迴圈的次數

由於你n/2^k取整後>=1

即令n/2^k=1

可得k=log2n,（是以2為底，n的對數）

所以時間複雜度可以表示O()=O(logn)
function binarySearch (arr, value) {
    var low = 0,
        high = arr.length - 1,
        mid;
    while (low <= high) {
        mid = Math.floor((low + high)/2);
      if (arr[mid] == value) {
          return mid;
      }else if (arr[mid] < value) {
          low = mid +1;
      }else if (arr[mid] > value) {
          high = mid -1;
      }else {
          return -1;
      }
    }
}

3)單向連結串列反轉

依次將第2—N個節點逐次插入到第一個節點後，最後將第一個節點挪到新表的結尾

例子為單向連結串列，頭結點為空

時間複雜度：N

function reverse (list) {

//空連結串列

    if (list.head.next == null) {
        return list;
    }
//非空連結串列
    var p = list.head.next,
        q;
    while (p.next !== null) {
        q = p.next;
      p.next = q.next;
      q.next = list.head.next;
      list.head.next = q;
    }
    return list;
}

4)查詢單向連結串列的倒數第K個節點

function searchK (list, k) {
    var head = list.head;
    if (head == null || k == 0) {
        return null;
    }
    //第一個節點先向前走K-1步
    var firstNode = head;
    for (var i = 0; i < k-1; i++) {
        firstNode = firstNode.next;
    }
    //判斷連結串列長度是否有K長
    if (i!== k-1) { 
        return null;
   }
   //兩個節點同時走
   var secondNode = head;
   while (firstNode.next !== null) {
           secondNode = secondNode.next;
      firstNode = firstNode.next;
   }
   return secondNode;
}

5)深度克隆

function clone (test) {
    if (Array.isArray(test)) {
        var arr = [];
       for (var i = 0, length = test.length; i < length; i++) {
               arr.push(clone(arr[i]));
       }
    }else if (typeOf test === "object") {
        var obj = {};
       for (var j in test) {
               obj[j] = clone(test[j]);
       }
       return obj;
    }else {
        return test;
    }
}

6)陣列去重

例如去重[`1`,1,2,2,NaN,NaN,null,undefined]

尤其注意1，`1`

NaN

function _isNaN (value) {
    return typeof value === `number` && isNaN(value);
}
function unique (arr) {
    var type = ``,
        key = ``,
        res = [],
        hash = {};
    for(var i= 0,len=arr.length;i<len;i++){
        if(_isNaN(arr[i])){
            if(!hash[arr[i]]){
                hash[`NaN`] = true;
                res.push(arr[i]);          
            }
        }else{
            type = typeof arr[i];
            key = type + arr[I];
            if(!hash[key]){
                hash[key] = true;
                res.push(arr[i]);
            }
        }
    }
    return res;
}

7）兩個棧實現一個佇列
https://segmentfault.com/a/11…

1.2 replace,match,search正則匹配是string的方法

str.replace(/ /g,`20%`);
g表示全域性匹配，不會匹配完第一個就不匹配了

i忽略大小寫

m多行匹配

1.3 Rexg正則匹配test,exec

test,返回一個 Boolean 值，它指出在被查詢的字串中是否存在模式。
如果存在則返回 true，否則就返回 false。

exec,用正規表示式模式在字串中執行查詢

var str=" 12 er 45 ;; ";var rexg=/ /;rexg.exec(str);

Array[1]
0: " "
index: 0
input: " 12 er 45 ;; "
length: 1
__proto__: Array[0]
var str=" 12 er 45 ;; ";var rexg=/ /;rexg.exec(str);
[" "]0: " "index: 0input: " 12 er 45 ;; "length: 1__proto__: Array[0]

var str=" 12 er 45 ;; ";str.match(/ /g,`20%`);
[" ", " ", " ", " ", " "]

var str=" 12 er 45 ;; ";str.replace(/ /,`20%`);
"20%12 er 45 ;; "

var str=" 12 er 45 ;; ";str.match(/ /,`20%`);
[" "]

var str=" 12 er 45 ;; ";str.search(/ /,`20%`);
0

var str=" 12 er 45 ;; ";str.search(/ /g,`20%`);
0

var str=" 12 er 45 ;; ";var rexg=/ /;rexg.test(str);
true

1.4 閉包

定義：

  1. 可以訪問外部函式作用於中變數的函式
  2. 被內部函式引用的外部函式的變數儲存在外部作用域中而不被回收

優缺點：

優點：

變數私有化

減少全域性變數汙染

可以讓一個變數常駐記憶體

缺點：

記憶體洩漏

閉包會攜帶包含它的函式的作用域，因此會比其他函式佔用更多的記憶體

1.5 js陣列

陣列可以當棧用：

arr.unshift(val)進棧，依次向前插入

arr.pop()出棧 取得陣列最後一項,原陣列改變減少最後一項

實現了先進後出

陣列當佇列或者正常陣列用：

arr.push(val),順序新增
arr.shift(),丟擲第一個值即arr[0]，原陣列改變減少第一項

2.關於JS延遲載入

       JS延遲載入的方式：
    
    1.位置，js放在</body>結束標籤前 
    
    2.監聽，window.onload後再新增script標籤
    
    3.屬性，為script標籤新增屬性defer或async 
    
    4.ajax下載js指令碼後eval()執行

3.defer和async的比較

3.1 defer="defer"，defer預設false:
該屬性用來通知瀏覽器，這段指令碼程式碼將不會產生任何文件內容。
例如 JavaScript程式碼中的document.write()方法將不會騎作用,瀏覽器遇到這樣的程式碼將會忽略，並繼續執行後面的程式碼。
屬性只能是 defer，與屬性名相同。
在HTML語法格式下，也允許不定義屬性值，僅僅使用屬性名。

3.2 async="true/false",只寫async省略屬性值的情況下為true:
該屬性為html5中新增的屬性，它的作用是能夠非同步地下載和執行指令碼，不因為載入指令碼而阻塞頁面的載入。
一旦下載完畢就會立刻執行。

加上defer 等於在頁面完全載入後再執行，相當於文件載入後即執行，不用等包括圖片在內的資源下載完畢。
async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的載入，
但在async的情況下，js文件一旦下載完畢就會立刻執行，所以很有可能不是按照原本的順序來執行，如果js有依賴性，就要注意了。

3.3 相同點：    
載入檔案時不阻塞頁面渲染；
使用這兩個屬性的指令碼中不能呼叫document.write方法；
允許不定義屬性值，僅僅使用屬性名；

 3.4 不同點：
html的版本html4.0中定義了defer；html5.0中定義了async；這將造成由於瀏覽器版本的不同而對其支援的程度不同；
 執行時刻：每一個async屬性的指令碼都在它下載結束之後立刻執行，同時會在window的load事件之前執行。
所以就有可能出現指令碼執行順序被打亂的情況；
每一個defer屬性的指令碼都是在頁面解析完畢之後，按照原本的順序執行，同時會在document的DOMContentLoaded之前執行。

3.5 混合用
如果async為true，那麼指令碼在下載完成後非同步執行。
如果async為false，defer為true，那麼指令碼會在頁面解析完畢之後執行。
如果async和defer都為false，那麼指令碼會在頁面解析中，停止頁面解析，立刻下載並且執行。

4.關於ajax

var xhr = new XMLHttpRequest(); IE new ActiveXObject(“Microsoft.XMLHTTP”);

1.xhr.open()

三個引數：

1）請求方式，post/get

2）請求的URL

3）是否傳送非同步請求 true/false

注意： 只是啟動，並未傳送請求，要呼叫send

2.xhr.send()

一個引數：必須有

引數為http請求的主體

post請求一般傳入

get請求必須傳入null

傳送後得到伺服器的響應，響應的資料會自動填充xhr的屬性

responseText,響應主體

responseXML

status，http狀態碼

statusText，狀態說明

3.xhr.readyState

如何判斷伺服器響應已到位，如何判斷響應所處階段

xhr.readyState:0,1,2,3,4
4表示完成，收到全部響應

4.xhr.status

((status >= 200 && status <300) || status = = = 304 )

表示請求成功

5.xhr.onreadystatechange事件

readyState改變一次，onreadystatechange事件觸發一次

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    try {
        if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
            console.log(xhr.responseText);
        }else{
            console.log("erro:" + xhr.status);
        }
    }catch(ex){
        //ontimeout處理
    }
    }
};
xhr.open("get","example.js",true);//非同步
xhr.send(null);

6.對GET,POST請求引數的處理

GET

1) encodeURIComponent()對引數鍵和值進行編碼，保證格式正確

2) 鍵=值對之間以 & 分隔
function addURLParam(url,name,value){
    url + = (url.indexOf("?") = = -1 ? "?" : "&");
    url + = encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

POST

XMLHttpRequest 1級的實現：

1）Content-Type的設定：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

2）serialize()序列化資料

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    try {
        if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
            console.log(xhr.responseText);
        }else{
            console.log("erro:" + xhr.status);
        }
    }catch(ex){
        //ontimeout處理
    }
    }
};
xhr.open("post",url,true);//非同步
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var form = document.getElementById("exampleID");
xhr.send(serialize(form));
XMLHttpRequest 2級
增加了FormData:不必明確頭部型別

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
    try {
        if((xhr.status >= 200 && xhr.status <300) || xhr.status == 304){
            console.log(xhr.responseText);
        }else{
            console.log("erro:" + xhr.status);
        }
    }catch(ex){
        //ontimeout處理
    }
    }
};
xhr.open("post",url,true);//非同步

var form = document.getElementById("exampleID");
xhr.send(new FormData(form));

7.XMLHttpRequest 2 級

xhr.timeout = 屬性值

xhr.ontimemout = function(){
 console.log("超時未收到響應");
};

在規定時間內瀏覽器未收到響應就觸發 ontimeout 事件

5.關於web儲存

5.1 cookie,sessionStorage,localStorage區別？

sessionStorage,loalStorage統稱webStorage;

Cookie的作用是與伺服器進行互動,作為HTTP規範的一部分而存在,而Web Storage僅僅是為了在本地“儲存”資料而生

（1）儲存大小：


    cookie,4k;  sessionStorage,localStorage,5M或更大;

（2）過期時間：

       cookie,過期時間前一直有效，預設cookie（沒有設定expires的cookie）失效時間直到關閉瀏覽器，設定方式
    
    保留COOKIES一個小時------Response.Cookies("MyCookie").Expires = DateAdd("h", 1, Now());
    
   sessionStorage關閉即刪除，只要同源的同視窗（或tab）中，重新整理頁面或進入同源的不同頁面，資料始終存在
   
   loalStorage永不丟失

（3）伺服器互動頻寬使用情況：

       
    cookie放在請求頭髮送給服務端，浪費頻寬
    
    sessionStorage,loalStorage無於服務端互動

（4）儲存位置：

       cookie以鍵值對形式儲存在http請求的header中傳送給服務端，同時從服務端獲得的cookie是 鍵=值分號隔開的形式儲存 
    
   sessionStorage,localStorage儲存在本地

（5）共享：

       cookie受同源策略限制
    
    sessionStorage同一視窗共享
    
    localStorage受同源限制

（6）用法：

       
    cookie需要自己封裝方法
    
    * escape()函式是JS內建函式，編碼將字串編碼為16進位制，unescape()解碼

1．新增一個cookie
<script language="JavaScript" type="text/JavaScript">
<!--
function addcookie(name,value,expireHours){
      var cookieString=name+"="+escape(value);
      //判斷是否設定過期時間
      if(expireHours>0){
             var date=new Date();
             date.setTime(date.getTime()+expireHours*3600*1000);
             cookieString=cookieString+"; expire="+date.toGMTString();
             
             // 或者cookieString+=";max-age="+60*5;  /* 設定cookie的有效期為5分鐘 */
      }
      document.cookie=cookieString;
}
//-->
</script>
2．獲取指定名稱的cookie值：getcookie(name)
該函式返回名稱為name的cookie值，如果不存在則返回空，其實現如下：
<script language="JavaScript" type="text/JavaScript">
<!--
function getcookie(name){
      var strcookie=document.cookie;
      var arrcookie=strcookie.split(";");
      for(var i=0，len=arrcookie.length;i<len;i++){
            var arr=arrcookie[i].split("=");
            if(arr[0]==name)return unescape(arr[1]);
      }
      return "";
}
//-->
</script>
3．刪除指定名稱的cookie：deletecookie(name)
該函式可以刪除指定名稱的cookie，其實現如下：
<script language="JavaScript" type="text/JavaScript">
<!--
function deletecookie(name){
    var cookieValue = getCookie(name);
    
    var cookieString = null;
    
    if(cookieValue！== "" || cookieValue!==null){
        cookieString = name + "=" + escape(cookieValue) + ";max-age=" + 0;
    }
    
    document.cookie = cookieString;
}
//-->
</script>
cookie 的屬性：Domain(設定子域該域下才可訪問cookie)

HttpOnly(設定後將不能用JS指令碼操作cookie),

Secure(設定後將只能通過HTTPS協議訪問),

Expiress（過期時間，不設定預設關閉瀏覽器cookie失效）,目前已被max-age屬性所取代 max-age用秒來設定cookie的生命週期

Path（設定路徑的頁面才可訪問cookie）

sessionStorage,localStorage有介面：

setItem,getItem,removeItem,clear

例如清除所有的key/value
sessionStorage.clear(); localStorage.clear(); 
sessionStorage.setItem("key", "value");
var value = sessionStorage.getItem("key");
sessionStorage.removeItem("key");

5.關於http

5.1 狀態碼


200 OK - [GET]：伺服器成功返回使用者請求的資料，該操作是冪等的（Idempotent）

 201 CREATED - [POST/PUT/PATCH]：使用者新建或修改資料成功
 
202 Accepted - [*]：表示一個請求已經進入後臺排隊（非同步任務）

204 NO CONTENT - [DELETE]：使用者刪除資料成功。

301,302,303 redirect:重定向;

    301永久性重定向 增加SEO排名，說說
    
    302臨時重定向,
    
  303：對於POST請求，它表示請求已經被處理，客戶端可以接著使用GET方法去請求Location裡的URI。
  
    307：對於POST請求，表示請求還沒有被處理，客戶端應該向Location裡的URI重新發起POST請求。
    
304not modified：未修改返回快取的內容不再請求新的;request If-None-Match

400：客戶端的URL輸入有問題，瀏覽器解析不出來 
 
401：需要身份驗證

403：已經驗證身份通過，但是伺服器不予執行

404：對客戶端請求服務端找不到資源

406 Not Acceptable - [GET]：使用者請求的格式不可得（比如使用者請求JSON格式，但是隻有XML格式）

410 Gone -[GET]：使用者請求的資源被永久刪除，且不會再得到的

422 Unprocesable entity - [POST/PUT/PATCH] 當建立一個物件時，發生一個驗證錯誤

503：伺服器暫時無法提供服務，過一會就好了

5.2 GET和POST的區別？

GET – 從指定的資源請求資料

POST – 向指定的資源提交要被處理的資料

大小限制

get 1024位元組

post 無限制，但可以自行設定

安全性

post較get安全

資料存放

get傳輸的引數附在URL後面

post傳輸的資料放在HTTP請求體中

冪等

get是冪等的，post不是

快取，收藏，歷史

get都可以，post沒有

6.關於網路安全

xss(cross site script)跨站指令碼攻擊：

 Reflected XSS（基於反射的XSS攻擊）：搜尋框內鍵入惡意程式碼
 
 Stored XSS（基於儲存的XSS攻擊）：釋出的帖子/文章鍵入惡意程式碼
 
 DOM-based or local XSS（基於DOM或本地的XSS攻擊）：免費WIFI中間閘道器對網頁修改嵌入惡意程式碼
 
 防範：前端對要顯示的內容和服務端返回的內容進行轉碼htmlencode
 
     服務端對請求的內容進行驗證防範攻擊
     
     xss攻擊主要是拿到cookie，所以可以禁止操作cookie,設定HttpOnly屬性
 
 詳細見  https://segmentfault.com/a/1190000008423064

CSRF跨站請求偽造 cross site request forgery

   詳情：https://segmentfault.com/a/1190000008424201

   冒充使用者發起請求（在使用者不知情的情況下）,完成一些違背使用者意願的請求
（比如散佈的小廣告點進去就完成轉正操作了假如你剛剛登入過網上銀行session依舊未過期）

   防禦方法：

          驗證HTTP請求頭部的referer即可知道是否是bank.com發起的請求;
          
       請求地址中新增token並驗證;
       
       HTTP頭部新增自定義屬性並驗證;
       
       驗證碼
  • XSS：

攻擊者發現XSS漏洞——構造程式碼——傳送給受害人——受害人開啟——攻擊者獲取受害人的cookie——完成攻擊

  • CSRF：

攻擊者發現CSRF漏洞——構造程式碼——傳送給受害人——受害人開啟——受害人執行程式碼——完成攻擊

SQL隱碼攻擊

構造巧妙的SQL語句，從而成功獲取想要的資料；黑客的填空遊戲

  • 某個網站的登入驗證的SQL查詢程式碼為：

    strSQL = “SELECT * FROM users WHERE (name = `” + userName + “`) and (pw = `”+ passWord +”`);”

    • 惡意填入

    userName = “1` OR `1`=`1”;

    • 與

    passWord = “1` OR `1`=`1”;

    • 時，將導致原本的SQL字串被填為

    strSQL = “SELECT * FROM users WHERE (name = `1` OR `1`=`1`) and (pw = `1` OR `1`=`1`);”

    • 也就是實際上執行的SQL命令會變成下面這樣的

    strSQL = “SELECT * FROM users;”

    防禦方法 ： 對輸入進行驗證 整形引數判斷 unicode轉換等

7.關於跨域

同源策略

1 協議相同

2 域名相同

3 埠相同

跨域的方法

1.window.postMessage(message,targetOrigin) （雙向跨域）

2.document.domain = 共同的主域名 跨子域 （雙向跨域）

   http://www.a.com/a.js
 http://script.a.com/b.js
 統一為主域名a.com

———————————————————-

3.jsonp（單向跨域）

   只支援get請求


    <script src=".../callback()"></script>

4.CORS跨域資源共享 （單向跨域）

   比JSONP強大，支援各種型別的HTTP請求

允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制

A跨域訪問B，需要在B的響應頭加入  Access-Control-Allow-Origin：http://A

5.伺服器代理 （單向跨域）

   跨域的HTTP請求是在伺服器端

6.window.name （單向跨域）

8.關於構建工具gulp git grunt fis3

gulpjs是一個前端構建工具，與gruntjs相比：

gulpjs無需寫一大堆繁雜的配置引數，

而且gulpjs使用的是nodejs中stream來讀取和運算元據，其速度更快

npm install -g gulp  全域性安裝到本機c盤data中

npm install gulp  
安裝到本專案的node moudule模組中

npm install --save-dev gulp  
將gulp依賴新增到本專案的packge.json的依賴內

就可以執行gulp命令執行gulpfile.js檔案內定義的default任務了

gulpfile.js內

常用的四個API：gulp.task(), gulp.src(), gulp.dest(),gulp.watch()

gulp.src

gulp.src(globs) 獲取檔案流物件，是虛擬檔案物件流，進而呼叫stream.pipe()繼續操作流
       
通過指定gulp.src()方法配置引數中的base屬性，我們可以更靈活的來改變gulp.dest()生成的檔案路徑。
       
當我們沒有在gulp.src()方法中配置base屬性時，base的預設值為萬用字元開始出現之前那部分路徑。
          
例子：
gulp.src(script/lib/*.js, {base:`script`}) //配置了base引數，此時base路徑為script
//假設匹配到的檔案為script/lib/jquery.js
  .pipe(gulp.dest(`build`)) //此時生成的檔案路徑為 build/lib/jquery.js

gulp.dest


    gulp.dest(path) 用來寫檔案，path替換掉基本路徑就是生成的檔案的路徑

gulp.task


gulp.task(name,[deps],fn) 任務的名字，依賴的任務，執行的方法
    
deps只有一個也要用陣列括起來
    
如果任務A依賴B，B有非同步編碼，A不會等B的非同步程式碼執行完而是直接執行，解決辦法：
   
1，執行一個回撥函式通知gulp非同步完成
2，返回一個流物件
3，require Q;返回promise物件

gulp.watch


gulp.watch(glob,tasks) 匹配檔案路徑  檔案改變後執行tasks(之前定義好的task,gulp.task(name,[deps],fn))
    
詳情見 https://segmentfault.com/a/1190000008427866

對於GIT的提問

git rebase

git merge

等等 詳情見 https://segmentfault.com/a/11…

9.關於框架vue angularjs


v-for  ng-repeat

new vue({el:data:methods:})  

angular.module(name,[]) 繼而controller

angular controller之間通訊方式：

上下級之間通訊：作用域繼承、事件觸發（$on、$emit 和 $boardcast）

同級之間通訊：注入服務 service、藉助父級controller實現子級controller之間的通訊、藉助$rootScope實現同級之間的通訊

10.關於nodejs

建立簡單的伺服器

var http = require("http"); 
 
http.createServer(function(request, response) { 
 
    response.writeHead(200, {"Content-Type": "text/plain"}); 
 
    response.write("Hello World"); 
 
    response.end(); 
 
}).listen(8888);

11.關於restfulAPI

1.協議

HTTPS協議

2.域名

可以新增次級域名

https://api.example.com

如果不需要擴充套件，可以放在主域名下

https://example.com/api

3.版本

為API新增版本

https://api.example.com/v1/

4.不允許動詞

路徑名詞一般與資料庫表格一直

https://api.example.com/v1/animals

5.引數設計

引數鍵值形式 & 符號分開

https://api.example.com/v1/animals?name=`cat`&sex=`1`

6.錯誤處理

請求結果是錯誤的4xx

一般返回的JSON資料中設定erro鍵

{
    error: "Invalid API key"
}

7.HTTP動詞

常用的：GET,POST

GET（SELECT）：從伺服器取出資源（一項或多項）

POST（CREATE）：在伺服器新建一個資源

另有：

PUT（UPDATE）：在伺服器更新資源（客戶端提供改變後的完整資源）

PATCH（UPDATE）：在伺服器更新資源（客戶端提供改變的屬性）

DELETE（DELETE）：從伺服器刪除資源

HEAD：獲取資源的後設資料

OPTIONS：獲取資訊，關於資源的哪些屬性是客戶端可以改變的

8.狀態碼

上翻有

12.關於非同步程式設計

ES 6以前：

  • 回撥函式（ajax實現非同步的原理就是採用了回撥函式）

    function f1(callback){
　　　　setTimeout(function () {
　　　　　　// f1的任務程式碼
　　　　　　callback();
　　　　}, 1000);
　　    }

f1(f2);

    問題：多層巢狀很混亂，異常難以捕獲

  • 事件驅動/事件監聽 釋出/訂閱模式(觀察者模式)

    原理同 回撥

  • promise物件

    promise模式在任何時刻都處於以下三種狀態之一：
未完成（unfulfilled）、已完成（resolved）和拒絕（rejected）

promise物件上的then方法負責新增針對已完成和拒絕狀態下的處理函式。
then(resolvedHandler, rejectedHandler); 
then方法會返回另一個promise物件，以便於形成promise管道，
這種返回promise物件的方式能夠支援開發人員把非同步操作串聯起來

ES 6：

* Generator函式(協程coroutine)

ES 7:

* async和await

13.關於模組化程式設計 requirejs seajs commonjs

  • AMD（Require遵循的規範）define, require

  • CMD（SeaJS遵循的規範）經常使用的 API 只有 define, require, require.async, exports, module.exports 這五個

  • promise（commonJS提出的規範）

    1.對於依賴的模組，AMD 是提前執行，CMD 是延遲執行。
不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）

2.CMD 推崇依賴就近，AMD 推崇依賴前置。

14.關於物件導向

14.1封裝性

JS沒有類，怎麼談封裝呢。有物件，物件有屬性

有建構函式，建構函式有基本屬性值和引用屬性值

函式有prototype原型，可以實現屬性方法共享

14.2多型性

14.3繼承性

某一物件的例項 賦值給 另一個物件的原型 實現繼承

建構函式、例項、原型的關係：

var a = function(){...};

var b = new a();//b 是由 a 構造出來的

var c = function(){...};

c.prototype = b;//c 繼承了 a

15.關於跨裝置響應式

1.百分比

2.移動端禁viewport縮放功能

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
width：viewport 的寬度，可以指定一個固定值，如650；或者可以是device-width，表示裝置的寬度

height：和 width 相對應，可指定高度

initial-scale：頁面初始縮放比例(0-1)

maximum-scale：允許使用者縮放到的最大比例(0-1)

minimum-scale：允許使用者縮放到的最小比例(0-1)

user-scalable：使用者是否可以手動縮放（yes/no）
禁用chrome 自調節字型大小

body {
    -webkit-text-size-adjust: 100%;
}

3.CSS3 media queries

@media only screen and (max/min-width/height: 960px) {
  /* 樣式定義 */
}

@media only screen and (max-width:500px){
  .outDiv {
      margin: 0 auto;
  }
}

16.關於瀏覽器相容

簡單總結

css 樣式加字首 -webkit這樣子的

js 冒泡事件和阻止冒泡

很多見：http://blog.csdn.net/xingxing…

http://blog.csdn.net/comeonj/…

17.關於linux

暫且放兩個連結 之前寫過的：

https://segmentfault.com/a/11…

https://segmentfault.com/n/13…

18. 前端效能優化

  1. HTTP:減少HTTP請求；解決辦法：合併圖片，合併css,js檔案，lazzyload懶載入圖片
  2. CSS：合理用reflow,repaint:style變一次就reflow一次，因此儘可能設一個新的class，改變className，reflow一次
  3. DOM:減少DOM操作，多用innerHTML一次新增
  4. JSON格式交換資料，輕量級資料
  5. css放在頭部，js放在尾部，外部引用

6.CDN內容分發網路，實時性不太好

相關文章