前端基礎資料整理

1，閉包是如何造成的？優缺點？引發內存泄漏的緣由？

造成原理：
嵌套函數被返回，被外部的變量引用，或者做爲外部對象的屬性時，形
成閉包。 造成閉包以後，本來應該已經被垃圾回收的變量，都能繼續使用。
優缺點：
1.保護函數內的變量安全,增強了封裝性
2.在內存中維持一個變量(用的太多就變成了缺點，佔內存)
緣由：
1.在閉包的做用域鏈中引用了html元素未釋放內存
2.出現了循環引用

2.html頁面是如何呈現?JavaScript 迴流（reflow）與重繪（repaint）（學渣的我，迴流我就蒙了，不記得這專業名稱）

如何呈現：
1,HTML文檔加載後生成DOM樹（包括display：none;元素）；
2,在DOM樹的基礎上配合css樣式結構體生成render樹（不包含display:none;、head節點，包含visibility:hidden;節點），即頁面中的佔位肯定了,最後繪製頁面（也叫渲染），不會改變頁面佈局的一些屬性：color、背景色等。

重繪（repaint）:
更新頁面元素的屬性引發的，如顏色、透明度等不會改變頁面佈局而須要從新渲染的。
迴流（reflow）
render樹中部分或所有元素的尺寸、佈局、隱藏等(內容、結構、位置)改變引發的。每一個頁面至少有一次迴流（即初始構建頁面時），成本較高。

3.JavaScript-數據類型和變量?var let const三者的區別？

數據類型：
Number,字符串,布爾值,null,undefined,Symbol。數組,對象（這倆不知道算不算）
區別：
一、var
var定義全局變量和局部變量，也能夠省略var，並且在非嚴格模式下不會報錯，可是實際上在嚴格模式下，二者的使用有沒有區別，可能不少人不清楚。例如循環，跳出循環依舊會有效，不報錯。
二、let
let擁有塊級做用域,一個{}就是一個做用域，也就是let聲明塊級變量，即局部變量；
let在其做用域下面不存在變量提高；
let在其做用域中不能被重複聲明(函數做用域和塊級做用域)。
三、const
const用來聲明常量，一旦聲明，其值就不能夠更改，並且必須初始化。若是你非得修改變量的值，js不會報錯，只是默默表示失敗(不起做用)。

4,JavaScript之面向對象的屬性和特性?
對象的本質：
無序屬性的集合，其屬性能夠包含基本值、對象或者函數。即對象是一組沒有特定順序的值，對象的每一個屬性或方法都有一個名字，而這個名字都映射到一個值。故對象的本質是一個散列表：其中是一組名值對，值能夠是數據或函數。
對象包含：數據屬性和訪問器屬性，他們的區別以下：
數據屬性：通常用於存儲數據數值，訪問器屬性不包含數據值；
訪問器屬性：多用於get/set操做，訪問器屬性不能直接定義，必須使用Object.defineProperty()來定義，且該屬性具備set和ger特性。console對象的時候可看。

5, 前端框架Vue、angular、React的優勢和缺點?（這個我百度的，本身沒怎麼回答）

Vue.js的特性以下：
1.輕量級的框架 2.雙向數據綁定 3.指令 4.插件化

優勢：

1. 簡單：官方文檔很清晰，比 Angular 簡單易學。
2. 快速：異步批處理方式更新 DOM。
3. 組合：用解耦的、可複用的組件組合你的應用程序。
4. 緊湊：~18kb min+gzip，且無依賴。
5. 強大：表達式 & 無需聲明依賴的可推導屬性 (computed properties)。
6. 對模塊友好：能夠經過 NPM、Bower 或 Duo 安裝，不強迫你全部的代碼都遵循 Angular 的各類規定，使用場景更加靈活。
   缺點：
7. 新生兒：Vue.js是一個新的項目，沒有angular那麼成熟。
8. 影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其餘一些有名的庫。

angular：
1良好的應用程序結構 2.雙向數據綁定 3.指令 4.HTML模板 5.可嵌入、注入和測試
優勢： 
1.模板功能強大豐富，自帶了極其豐富的angular指令。
2.是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等全部功能；
3.自定義指令，自定義指令後能夠在項目中屢次使用。
4.ng模塊化比較大膽的引入了Java的一些東西（依賴注入），可以很容易的寫出可複用的代碼，對於敏捷開發的團隊來講很是有幫助。
5.angularjs是互聯網巨人谷歌開發，這也意味着他有一個堅實的基礎和社區支持。

缺點：

1. angular 入門很容易 但深刻後概念不少, 學習中較難理解.
2. 文檔例子很是少, 官方的文檔基本只寫了api, 一個例子都沒有, 不少時候具體怎麼用都是google來的, 或直接問misko,angular的做者.
3. 對IE6/7 兼容不算特別好, 就是能夠用jQuery本身手寫代碼解決一些.

React特性以下：　
1.聲明式設計：React採用聲明範式，能夠輕鬆描述應用。
2.高效：React經過對DOM的模擬，最大限度地減小與DOM的交互。
3.靈活：React能夠與已知的庫或框架很好地配合。

優勢：

1. 速度快：在UI渲染過程當中，React經過在虛擬DOM中的微操做來實現對實際DOM的局部更新。
2. 跨瀏覽器兼容：虛擬DOM幫助咱們解決了跨瀏覽器問題，它爲咱們提供了標準化的API，甚至在IE8中都是沒問題的。
3. 模塊化：爲你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，能夠方便地進行隔離。
4. 單向數據流：Flux是一個用於在JavaScript應用中建立單向數據層的架構，它隨着React視圖庫的開發而被Facebook概念化。
5. 同構、純粹的javascript：由於搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化。
6. 兼容性好：好比使用RequireJS來加載和打包，而Browserify和Webpack適用於構建大型應用。它們使得那些艱難的任務再也不讓人望而生畏。
   缺點：
7. React自己只是一個V而已，並非一個完整的框架，因此若是是大型項目想要一套完整的框架的話，基本都須要加上ReactRouter和Flux才能寫大型應用。

6,對比一下jquery和vuejs

jquery：對HTML的操做。綁定事件。請求數據。更可能是以事件爲入口去處理HTML。操做細膩。不過維護起來累
vuejs：邏輯簡單，代碼量少，組件化。根據頁面的功能定義，構造出屬於它的數據。須要事件觸發，再編寫起方法。方法是基本是數據的處理。

7，JavaScript對數組的操做有哪些？

1. 數組創建（new）
2. 數組元素的訪問（循環）
3. 數組的元素添加(push末尾，unshift開頭)
4. 數組元素的刪除（pop最後，shift開頭，splice(startIndex , deletSize)指定位置）
5. 數組元素拷貝和複製（slice(start,end)返回一個新數組，其中以start開始，end結束且不包括end;
6. concat(element1[element2[]]…);將多個數組從新連成一個新的數組），
7. 數組元素順序（sort();數組排序。
8. reverse()；數組反轉。）
9. 數組轉化爲字符串（oin(seperater)）

8，數組排序的方法？

冒泡排序，js 利用sort進行排序，快速排序，希爾排序，插入排序。這個本身去理解，我寫一個簡單的。

 

 

 

1

objArr.sort(function(a,b){return a>b?1:-1});//從小到大排序

2

objArr.sort(function(a,b){return a<b?1:-1});//從大到小排序

 

 

9，JavaScript的做用域和做用域鏈？

做用域
全局做用域（Global Scope）
在代碼中任何地方都能訪問到的對象擁有全局做用域，
1>最外層函數和在最外層函數外面定義的變量擁有全局做用域
2>全部末定義直接賦值的變量自動聲明爲擁有全局做用域
3>全部window對象的屬性擁有全局做用域
局部做用域
與全局做用於相反，局部做用域通常只在固定的代碼片斷內可訪問到，最多見的例如函數內部

做用域鏈：
在函數執行過程當中，每遇到一個變量，都會經歷一次標識符解析過程以決定從哪裏獲取和存儲數據。該過程從做用域鏈頭部，也就是從活動對象開始搜索，查找同名的標識符，若是找到了就使用這個標識符對應的變量，若是沒找到繼續搜索做用域鏈中的下一個對象，若是搜索完全部對象都未找到，則認爲該標識符未定義。

10，雙向綁定的實現原理？

簡單來講，就是監聽dom事件，例如change,或者鍵盤迴車，獲取改變後的值，賦值給指定的職位，整個都是在函數中完成。

有的框架，基本思路是使用Object.defineProperty對數據對象作屬性get和set的監聽，當有數據讀取和賦值操做時則調用節點的指令，這樣使用最通用的=等號賦值就能夠了。

11，CSS選擇器（最少五個），權重計算？

1. id選擇器（#id）
2. 類選擇器（.className）
3. 元素選擇器(E)
4. 羣組選擇器（selector1,selector2,...,selectorN）
5. 通用兄弟選擇器（Ｅ ? Ｆ）
6. 相鄰兄弟元素選擇器(E + F)
7. 子元素選擇器(E>F)
8. 後代選擇器（Ｅ Ｆ）
9. 通配符選擇器（＊）
10. 僞類選擇器
11. 僞元素選擇器
12. 屬性選擇器

權重計算

第一等：表明內聯樣式，如: style=」」，權值爲1000。
第二等：表明ID選擇器，如：#content，權值爲0100。
第三等：表明類，僞類和屬性選擇器，如.content，權值爲0010。
第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲0001。
通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。

!important 能夠提高權重