前端知識點總結（JavaScript篇）

時間  2019-11-14
標籤 前端 知識 總結 javascript 欄目 JavaScript 简体版
原文   原文鏈接
  1. 同源策略及跨域請求的方法和原理（比較JSONP和document.domain的不一樣及優劣，以及HTML5的跨域方案）
  2. JavaScript數據類型
  3. JavaScript字符串轉化
  4. JSONP原理及優缺點
  5. XMLHttpRequest
  6. 事件委託
  7. 前端模塊化（AMD和CommonJS的原理及異同，seajs和requirejs的異同和用法）
  8. session
  9. Cookie
  10. seaJS的用法及原理，依賴加載的原理、初始化、實現等
  11. this問題
  12. 模塊化原理（做用域）
  13. JavaScript動畫算法
  14. 拖拽的實現
  15. JavaScript原型鏈及JavaScript如何實現繼承、類的
  16. 閉包及閉包的用處，以及閉包可能形成的不良後果。
  17. 常見算法的JS實現（如快排、冒泡等）
  18. 事件冒泡和事件捕獲
  19. 瀏覽器檢測（能力檢測、怪癖檢測等）
  20. JavaScript代碼測試
  21. call與apply的做用及不一樣
  22. bind的用法，以及如何實現bind的函數和須要注意的點
  23. 變量名提高
  24. == 與 ===
  25. "use strict"做用
  26. AJAX請求的細節和原理
  27. 函數柯里化（Currying）
  28. NodeJS健壯性方面的實踐（子進程等）
  29. NodeJS可否用利用多核實如今計算性能上的劣勢等
  30. jQuery鏈式調用的原理
  31. ES6及jQuery新引進的Promise有什麼用處、Promise的原理
  32. NodeJS的優缺點及使用場景
  33. JS中random的機率問題
  34. 客戶端存儲及他們的異同（例如：cookie, sessionStorage和localStorage等）
  35. AngularJS的文件管理及打包（包括模板打包及請求、JS的打包和請求等）
  36. AngularJS的JS模塊管理及實踐
  37. 在你的Angular App頁面裏隨意加一個JS文件，會有什麼影響
  38. AngularJS directive及本身如何定義directive
  39. AngularJS雙向綁定的原理及實現
  40. 你如何測試你的JS代碼
  41. DOM1\DOM2\DOM3都有什麼不一樣
  42. XSS
  43. 經常使用數組方法和數組算法（如數組去重、求交集、並集等）
  44. js數組去重複項
  45. js中的垃圾回收機制
  46. 常見的JS設計模式
  47. js獲取服務器精準時間（客戶端如何與服務器時間同步）
  48. 什麼是js中的類數組對象
  49. Node中exports和module.exports的區別
  50. 異步編程的瞭解
  51. Grunt和Gulp的區別
  52. AngularJS中service\factory\provider的區別
  53. JavaScript中異步編程的幾種方式
  54. Nodejs開發踩過的坑
  55. AngularJS中依賴注入的理解
  56. JS中判斷是否爲數組
  57. Nodejs內存溢出
  58. 關於BFC和hasLayout
  59. 統計頁面中使用最多的三個標籤
  60. JS內存泄露及解決方法
  61. 在瀏覽器地址欄按回車、F五、Ctrl+F5刷新網頁的區別
  62. 判斷兩個對象的相等
  63. 選取兩個數的最大公約數
  64. Node模塊是如何尋址的
  65. ES6新增的特性
  66. escape(), decodeURIComponent(), decodeURI之間的區別是什麼？
  67. CSRF？

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++javascript

  1. 同源策略及跨域請求的方法和原理（比較JSONP和document.domain的不一樣及優劣，以及HTML5的跨域方案）
    答案：同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。這裏的同源指的是：同協議，同域名和同端口。這裏說的js跨域是指經過js在不一樣的域之間進行數據傳輸或通訊，好比用ajax向一個不一樣的域請求數據，或者經過js獲取頁面中不一樣域的框架中(iframe)的數據。只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域。
    瀏覽器的同源策略，其限制之一就是第一種方法中咱們說的不能經過ajax的方法去請求不一樣源中的文檔。 它的第二個限制是瀏覽器中不一樣域的框架之間是不能進行js的交互操做的。有一點須要說明，不一樣的框架之間（父子或同輩），是可以獲取到彼此的window對象的，但頭疼的是你卻不能使用獲取到的window對象的屬性和方法(html5中的postMessage方法是一個例外，還有些瀏覽器好比ie6也可使用top、parent等少數幾個屬性)，總之，你能夠當作是隻能獲取到一個幾乎無用的window對象。html

    document.domain：只要將同一域下不一樣子域的document.domain設置爲共同的父域，則這個時候咱們就能夠訪問對應window的各類屬性和方法了。例如：www.example.com父域下的www.lib.example.com和www.hr.example.com兩個子域，將對應頁面的document.domain設爲example.com便可。缺點：只能在一級域名相同時才能運用。前端

    JSONP：原理是動態添加一個script標籤，而script標籤的src屬性是沒有跨域的限制的。jquery中還提供了一個$.getJSON(url,arg,callback(data))用來進行jsonp訪問。缺點：只支持get不支持post；只支持http請求這種狀況，不能解決不一樣域兩個頁面之間如何進行JavaScript調用的問題；JSONP請求失敗時不返回http狀態碼。html5

    CORS（跨域資源共享）：HTML5引入的新的跨域的方法，不過須要在請求頭和相應頭設置相應的Access-Control-屬性。缺點：兼容性問題，適合一些新的瀏覽器。java

    參考:
    說說JSON和JSONP
    js中幾種實用的跨域方法原理詳解
    The Same Origin Policy: JSONP vs The document.domain Property
    HTTP訪問控制(CORS)node

  2. JavaScript數據類型
    答案： JavaScript中有5種簡單數據類型（也稱爲基本數據類型）：Undefined、Null、Boolean、Number和String。還有1種複雜數據類型——Object，Object本質上是由一組無序的名值對組成的。jquery

  3. JavaScript字符串轉化
    答案：熟悉基本的字符串操做函數，參考
    JavaScript中常見的字符串操做函數及用法git

  4. JSONP原理及優缺點
    答案：具體JSONP的原理可參考1，說白了就是插入一個script標籤，其src指向跨域接口，返回對應的callback(data)，其中data是json格式，callback是頁面已存在的function。
    優勢：它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中均可以運行，不須要XMLHttpRequest或ActiveX的支持；而且在請求完畢後能夠經過調用callback的方式回傳結果。
    缺點：它只支持GET請求而不支持POST等其它類型的HTTP請求；它只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題。angularjs

  5. XMLHttpRequest
    答案：輕鬆掌握XMLHttpRequest對象es6

  6. 事件委託
    答案：使用事件委託技術能讓你避免對特定的每一個節點添加事件監聽器；相反，事件監聽器是被添加到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找到是哪一個子元素的事件。

  7. 前端模塊化（AMD和CommonJS的原理及異同，seajs和requirejs的異同和用法
    答案：
    使用AMD\CommonJS\ES Harmony編寫模塊化的JavaScript
    RequireJS中文網

    SeaJS對模塊的態度是懶執行,SeaJS只會在真正須要使用(依賴)模塊時才執行該模塊；而RequireJS對模塊的態度是預執行；會先儘早地執行(依賴)模塊, 至關於全部的require都被提早了, 並且模塊執行的順序也不必定
    SeaJS和RequireJS最大的不一樣，其中AMD和CMD的區別能夠看玉伯在知乎上的回答

  8. session

  9. Cookie
    答案：8與9的知識能夠參考：參考1和參考2

    常見的cookie操做包括建立cookie、添加cookie、刪除cookie等，相應函數參考：

    //添加（daysToLive大於0）cookie/刪除（daysToLive爲0）cookie

function setcookie(name,value,daysToLive){

  var cookie = name + "=" + encodeURIComponent(value);

  if(typeof daysToLive === "number"){
     cookie += ";max-age=" + (daysToLive*60*60*24);
  }
  document.cookie = cookie;
}

//解析cookie,直接getcookie()[name]獲取對應的name cookie

function getcookie(){
  var cookies = {};
  var all = document.cookie;
  if(all === ""){
     return false;
  }
  var list = all.split(";");
  for(var i=0;i < list.length; i++){
     var cookie = list[i];
     var p = cookie.indexOf("=");
     var name = cookie.substring(0,p);
     var value = cookie.substring(p+1);
     value = decodeURIComponent(value);
     cookies[name] = value;
  }
  return cookies;
}

//刪除某個cookie
function deletecookie( name ) {
   document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
   //或者  document.cookie = name + '=; expires=' + (new Date(1970)).toGMTString();
 }

  10. seaJS的用法及原理，依賴加載的原理、初始化、實現等
    答案：模塊化開發之sea.js實現原理總結，簡言之就是要解決三個問題，分別爲：
    1.模塊加載（插入script標籤來加載模塊。你在頁面看不到標籤是由於模塊被加載完後刪除了對應的script標籤）；
    2.模塊依賴（按依賴順序依賴）；
    3.命名衝突（封裝一層define，全部的都成爲了局部變量，並經過exports暴漏出去）。

  11. this問題
    答案：別再爲了this發愁了------JS中的this機制

  12. 模塊化原理（做用域）
    答案：其中seajs的原理參考第10題。大體原理都相似。

  13. JavaScript動畫算法

  14. 拖拽的實現

  15. JavaScript原型鏈及JavaScript如何實現繼承、類的
    答案：原型鏈：就是每一個構造函數都有一個原型對象，原型對象包含一個指向構造函數的指針（prototype），而實例則包含一個指向原型對象的內部指針（proto），經過將子構造函數的原型指向父構造函數的實例。
    參考：
    JS 面向對象之繼承 -- 原型鏈
    js 基於原型的類實現詳解

  16. 閉包及閉包的用處，以及閉包可能形成的不良後果
    答案：好處：可以實現封裝和緩存等；壞處：就是消耗內存、不正當使用會形成內存溢出的問題。
    聊一下JS中的做用域scope和閉包closure
    javascript 閉包的好處及壞處

  17. 常見算法的JS實現（如快排、冒泡等）

    答案：經常使用排序算法之JavaScript實現。這裏有一篇阮一峯老師寫的，很是不錯的快排算法，快速排序（Quicksort）的Javascript實現。
    和排序算法. 還有如《五大經常使用算法》等。

  18. 事件冒泡和事件捕獲
    答案：W3C中定義事件的發生經歷三個階段：捕獲階段（capturing）、目標階段（targeting）、冒泡階段（bubbling）。
    阻止事件傳播的方法：ie下：window.event.cancelBubble = true; 其餘瀏覽器:e.stopPropagation()。
    參考：
    事件冒泡和事件捕獲

  19. 瀏覽器檢測（能力檢測、怪癖檢測等）

  20. JavaScript代碼測試
    答案：平時在測試方面作的比較少，通常用JSlint檢查一些常見的錯誤。對於功能性的可能會使用基於karma+Jasmine測試框架來作。

  21. call與apply的做用及不一樣
    答案：做用是綁定this指針，設定函數中this的上下文環境。第二個參數不一樣，apply是類數組，而call是一些列參數。

  22. bind的用法，以及如何實現bind的函數和須要注意的點
    答案：bind的做用與call和apply相同，區別是call和apply是當即調用函數，而bind是返回了一個函數，須要調用的時候再執行。
    一個簡單的bind函數實現以下：

    Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

    可參考：How is bind() different from call() & apply() in Javascript?

  23. 變量名提高
    答案：參考16中的博客及評論部分。

  24. == 與 ===
    答案：前者隱式類型轉換，後者嚴格對比。

  25. "use strict"做用
    答案：做用是爲了規範js代碼，消除一些不合理、不嚴謹的地方；提升效率；爲之後新版本js作鋪墊。
    主要限制：
    1.全局變量顯式聲明；
    2.禁止使用with，不推薦使用eval；
    3.加強安全措施，好比禁止this關鍵字指向全局對象；
    4.禁止刪除變量；
    5.顯式報錯；好比對只讀屬性賦值，對一個使用getter方法讀取屬性賦值，對禁止擴展的對象添加新屬性；
    6.重名錯誤，對象不能有重名的屬性，函數不能有重名的參數；
    7.禁止八進制表示法；
    8.argument對象的限制；好比禁止使用arguments.callee；
    9.函數必須聲明在頂層；
    10.新增保留字：implements, interface, let, package, private, protected, public, static, yield

    Javascript 嚴格模式詳解

  26. AJAX請求的細節和原理
    答案：原生的細節也須要重點研究，實際上是jQuery ajax

  27. 函數柯里化（Currying）
    答案： 柯里化（Currying），是把接受多個參數的函數變換爲接受單一參數（最初函數的第一個參數）的函數，而且返回接受餘下的參數並且返回結果的新函數的技術。
    做用:
    1.參數複用；在柯里化的外圍函數中添加複用的參數便可。
    2.提早返回；參看「參考」中綁定事件的例子。
    3.延遲計算/運行；其實Function.prototype.bind的方法中延遲計算就是運用的柯里化。
    參考：
    JS中的柯里化(currying)

  28. NodeJS健壯性方面的實踐（子進程等）

    答案：同29。

  29. NodeJS可否用利用多核實如今計算性能上的劣勢等

    答案：《解讀Nodejs多核處理模塊cluster》

  30. jQuery鏈式調用的原理

  31. ES6及jQuery新引進的Promise有什麼用處、Promise的原理

    答案：JavaScript Promise和JavaScript Promise Mini Book

  32. NodeJS的優缺點及使用場景

    答案：NodeJS優缺點及適用場景討論

  33. JS中random的機率問題

  34. 客戶端存儲及他們的異同（例如：cookie, sessionStorage和localStorage等）
    共同點：都是保存在瀏覽器端，且同源的。
    區別：
    1.cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
    2.cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。
    3.存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，通常爲5M左右。
    4.數據有效期不一樣，sessionStorage僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage始終有效（除非清除），窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。
    5.做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。
    6.Web Storage 支持事件通知機制（storage事件），能夠將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。

  35. AngularJS的文件管理及打包（包括模板打包及請求、JS的打包和請求等）

  36. AngularJS的JS模塊管理及實踐

    答案：AngularJS —— 使用模塊組織你的代碼

  37. 在你的Angular App頁面裏隨意加一個JS文件，會有什麼影響

    答案：這個啥問題XX。

  38. AngularJS directive及本身如何定義directive

    答案：AngularJS之directive

  39. AngularJS雙向綁定的原理及實現

    答案：AngularJS數據綁定及AngularJS的工做機制，參考《AngularJS up and running》第203頁，十三章第一節。簡單說檢查數據有無更新，僅在如下事件發生時，即：XHR請求、頁面加載、用戶交互事件等。

  40. 你如何測試你的JS代碼

    答案：平時在測試方面作的比較少，通常用JSlint檢查一些常見的錯誤。對於功能性的可能會使用基於karma的Jasmine測試框架來作。

  41. DOM1\DOM2\DOM3都有什麼不一樣

  42. XSS

    答案：1. 《淺談javascript函數劫持》 2. 《xss零碎指南》

  43. 經常使用數組方法和數組算法（如數組去重、求交集、並集等）

    答案：javascript經常使用數組算法總結和Merge/flatten an Array of Arrays in JavaScript

  44. js數組去重複項

    答案：js數組去重複項的四種方法

  45. js中的垃圾回收機制

    答案：JavaScript垃圾回收機制

  46. 常見的JS設計模式

  47. js獲取服務器精準時間（客戶端如何與服務器時間同步）

    答案：思路：簡而言之就是發送一個ajax請求，而後獲取對應的HTTP Header中的time，因爲時延等問題形成時間在JS客戶端獲取後當前時間已經再也不是服務器此時的時間，而後用本地的時間減去獲取的服務器的時間，這應該就是時間偏移量。再新建一個時間，加上此偏移量應該就是此時此刻服務器的時間。代碼以下：

    var offset = 0;
function calcOffset() {
    var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    xmlhttp.open("GET", "http://stackoverflow.com/", false);
    xmlhttp.send();

    var dateStr = xmlhttp.getResponseHeader('Date');
    var serverTimeMillisGMT = Date.parse(new Date(Date.parse(dateStr)).toUTCString());
    var localMillisUTC = Date.parse(new Date().toUTCString());
    offset = serverTimeMillisGMT -  localMillisUTC;  
}
function getServerTime() {
    var date = new Date();
    date.setTime(date.getTime() + offset);
    return date;
}

    或者是：

    var start = (new Date()).getTime();

var serverTime;//服務器時間

$.ajax({
  url:"XXXX",
success: function(data,statusText,res){
        var delay = (new Date()).getTime() - start;
        serverTime = new Date(res.getResponseHeader('Date')).getTime() + delay;
        console.log(new Date(serverTime));//標準時間
        console.log((new Date(serverTime)).toTimeString());//轉換爲時間字符串
        console.log(serverTime);//服務器時間毫秒數
    }
}）

  48. 什麼是js中的類數組對象

    答案：一、它們都有一個合法的 length 屬性(0 到 2**32 - 1 之間的正整數)。二、length 屬性的值大於它們的最大索引(index)。

  49. Node中exports和module.exports的區別

    答案：exports 和 module.exports 的區別

  50. 異步編程的瞭解

    答案：

  51. Grunt和Gulp的區別

    答案：Gulp vs Grunt

  52. AngularJS中service\factory\provider的區別

    答案:講的很是不錯，能夠看看。Differences Between Providers In AngularJS和stackoverflow上的回答Service vs provider vs factory。若是英文看的不爽，這裏有一篇中文的，還不錯那傷不起的provider們啊。

  53. JavaScript中異步編程的幾種方式

    答案：參加阮一峯前輩寫的Javascript異步編程的4種方法，簡單說就是1回調函數2事件監聽3發佈/訂閱4promise

  54. Nodejs開發踩過的坑

    答案：那些年，在nodejs上踩過的坑

  55. AngularJS中依賴注入的理解

    答案：Understanding Dependency Injection

  56. JS中判斷是否爲數組

    答案：isArray/typeof/instanceof,還有toString方法返回的字符串（數組返回'[Object Array]'）。

  57. Nodejs內存溢出

    答案：如何本身檢查NodeJS的代碼是否存在內存泄漏

  58. 關於BFC和hasLayout

    答案：關於Block Formatting Context－－BFC和IE的hasLayout

  59. 統計頁面中使用最多的三個標籤

    答案：思路大體是首先獲取頁面中全部用到的標籤數組，而後依次遍歷，將用到的標籤放置新的hash表裏，每次檢測到相同標籤對應的key的value值加1.最後轉爲數組，排序，取前三個。實現方法以下：

    function findTags(){
    var allTags = document.getElementsByTagName("*"),
        hash = {};

    for(var i = 0, j = allTags.length; i < j; i++){
        var temp = allTags[i].tagName;
        if(hash[temp]){
            hash[temp]++;
        }else{
            hash[temp] = 1;
        }
    }

    var sortable = [];
    for (var i in hash){
       sortable.push([i, hash[i]]);
     }
    sortable.sort(function(a, b) {return b[1] - a[1]});

    return sortable.splice(0,3);
 }

  60. JS內存泄露及解決方法

    答案：JS內存泄露及解決方法

  61. 在瀏覽器地址欄按回車、F五、Ctrl+F5刷新網頁的區別

    答案：在瀏覽器地址欄按回車、F五、Ctrl+F5刷新網頁的區別

  62. 判斷兩個對象的相等

    答案: How to determine equality for two JavaScript objects?

  63. 選取兩個數的最大公約數

    答案：JS how to find the greatest common divisor

  64. Node模塊是如何尋址的

    答案：《NodeJS深刻淺出》模塊開發那一章有詳解。

  65. ES6新增的特性

    答案：

  66. escape(), decodeURIComponent(), decodeURI之間的區別是什麼？
    答案：
    • 傳遞參數時須要使用encodeURIComponent，這樣組合的url纔不會被#等特殊字符截斷。
    • 進行url跳轉時能夠總體使用encodeURI
    • js使用數據時可使用escape
    • escape對0-255之外的unicode值進行編碼時輸出%u****格式，其它狀況下escape，encodeURI，encodeURIComponent編碼結果相同。
      另外：
    • escape不編碼字符有69個：*，+，-，.，/，@，_，0-9，a-z，A-Z
    • encodeURI不編碼字符有82個：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
    • encodeURIComponent不編碼字符有71個：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z

  67. CSRF？
    答案：淺談CSRF攻擊方式

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程