前端知識點淺析

前言：每次碰到什麼基礎面試題，大部分都會提到盒模型，本身表述能力有些差，看了別人的分析發現都沒有什麼比較滿意的文章，碰上滿意的總不能一文不變的跟人家說，遂本身整理了一下，加上點本身的理解，但願明天的我不會嘲笑如今的理解。

正文

我對盒子的理解

盒子模型有IE盒子模型和W3C標準盒子模型兩類，它們之間有相同點和不一樣點。我先說相同點，它們由內而外的組成部分都是:content（內容）；padding（內邊距）；border（邊框）；margin（外邊距），它們的不一樣點在於width（寬度）和height（高度）的計算，IE盒子模型的寬度等於content（內容的寬度）加上 padding-left 和 padding-right（內邊距的距離）再加上 border（邊框的寬度），高度等於內容的高度加上 padding-top 和padding-bottom（內邊距的距離）加 border（邊框的寬度）；而標準盒子模型的寬度及高度就等於內容的寬度及高度，兩種盒子的選取能夠經過box-sizing來進行選擇；

它們的適用狀況

應該根據實際的需求來選擇盒子模型，當元素的寬度須要固定死能夠更好的進行佈局的時候使用IE盒子，這樣元素的寬度就不會隨着padding的改變而改變，頁面就不會由於元素的微調致使出現變形走位的狀況，而當頁面需求內容不能變形的，就應該最好選擇標準盒子模型，同時由於 box-sizing 僅支持IE8+ 的瀏覽器，當項目要求兼容IE6，7的時候，最好使用標準盒子模型，固然也可使用CSS Hack（註解①）進行調整

彈性盒子的理解

彈性盒子是CSS3 的一種新的佈局模式，它的目的是爲了更好的對元素進行排列，對齊及分配空間，彈性盒子由彈性容器和彈性子元素組成，容器設置 display:flex 或 display:inline-flex ,子元素則不需考慮寬度的問題，僅須要考慮在主軸的排列及順序的分配等，能夠更好的進行的頁面的元素的排列，其對響應式佈局的意義重大，目前的在 IE11+ 主流瀏覽器兼容，考慮到它的兼容性，目前的應用場景多用於手機端的佈局，它的flex容器有着許多屬性 ：（肯定主軸方向）flex-direction:row; （主軸對齊）justify-content:centent；（次軸對齊）align-items:centent; 等等

 聖盃和雙飛翼

聖盃佈局（註解②）和雙飛翼佈局（註解③）它們的基本結構類似，都是三欄佈局，兩邊固定寬，中間大小自適應，目的也都是同樣爲了優先渲染內容。先說聖盃佈局，首先在一個div 中放入三個div ，都設置 float:left; 第一個div 放置內容目的爲了優先渲染，設置width:100%；剩下兩個設置固定寬，好比200px ;而後經過設置負 margin 來調整剩下兩個div 的位置，給第二個div 設置 margin-left:-100%; 使它移動到左邊，給第三個div 設置margin-left:-200px;使它移動到右邊， 最後爲了阻止中間內容被兩邊div覆蓋，給他們的父容器設置 padding:0 200px; 而後給左邊的div 設置 position:relative; left:-200px;給右邊的div 設置 position:relative; margin-right:-200px;這樣聖盃佈局就寫好了，而後再說雙飛翼，一樣在一個div 中放入三個div ，都設置 float:left ;給第一個div 一樣設置 width:100%; 剩下的兩個div 設置一個固定寬，好比200px; 而後一樣經過設置負 margin 來調整剩下兩個div 的位置，一樣給剩下的兩個div 分別設置 margin-left:-100%; 和 margin-left:-200px; 最後爲了解決內容被左右兩個div 遮蓋的問題，雙飛翼的解決方法是在內容div 裏嵌套一個子div，而後給裏面的子 div 設置margin:0 200px; 內容在子div 裏展現 。

距離屬性相關

當咱們使用js控制頁面的時候，須要獲取網頁元素的各類距離，其中有 offsetWidth 屬性：獲取元素的標準盒模型寬度（既 content寬度+padding+border）；scrollWidth 屬性：獲取元素的可滾動寬度（既 content寬度+padding）； clientWidth 屬性：獲取元素的可見寬度（既 content寬度+padding 和scrollWidth同樣）；offsetLeft 屬性：獲取元素邊框border 到文檔左邊框border 的距離 scrollLeft 屬性：獲取元素橫向滾動的距離（僅在有滾動條的狀況下有效）；offsetTop 屬性：獲取元素邊框border 到文檔上邊框border 的距離； scrollTop 屬性：獲取元素縱向滾動的距離（僅在有滾動條的狀況下有效）；

懶加載預加載

懶加載和預加載的目的都是爲了加強用戶體驗，懶加載也稱爲延遲加載，首先將圖片的的路徑或背景圖片的路徑統一換成 1*1 的圖片（咱們稱其爲佔位圖），正確的路徑放在自定義的屬性裏，而後當圖片出如今頁面的可視區域，咱們纔將圖片的 src 更換成正確的路徑，讓圖片出來。懶加載的優勢：頁面加載速度快、能夠減輕服務器的壓力、節約了流量,用戶體驗好。預加載，圖片提早加載到瀏覽器，當須要調用的時候，直接從本地渲染，建立函數動態添加須要預加載的圖片，經過建立 new Image().src="http:www.baidu.com/logo.png" 來預先加載想加載的圖片，優勢：能讓展現效果完美展示，缺點：加載以後的資源會增長加載頁面的時間

 瀑布流分析集

瀑布流是由外國流入中國的一種佈局方式，是一種多列布局，用戶不斷拉動頁面，頁面不斷加載新的內容，大小不一的元素列成像流水同樣，源源不斷的加載，俗稱瀑布流，首先計算頁面能容下幾列，經過計算將每列的高度存儲在一個數組裏，用戶滾動到底部，判斷哪列最短，而後將磚塊添加入最短的隊列，不斷添加直到可視區域以外。網上搜索瀑布流，各類方法有不少，例子也有不少，其實只要實現了，都是好的。我寫的demo：http://fenleiii.gitee.io/demo/demo/1/index.html

做用域與域鏈

在 Javascript 中存在兩種變量，全局變量和局部變量，它們相對應全局做用域和局部做用域，在任何地方都能訪問到的對象擁有全局做用域，好比：最外層的函數和最外層函數外聲明的變量擁有全局做用域域，全部的window對象的屬性也擁有全局做用域；局部做用域通常只能在一段代碼塊中能訪問到，好比一個函數內，它裏面的局部變量就在局部做用域裏。在 Javascript 中，一切都是對象。函數也是對象，其擁能夠經過代碼訪問的屬性和一系列供 Javascript 引擎訪問的內部屬性。其中內部屬性 scope 包含了函數被建立的做用域中對象的集合，這個集合被稱爲函數的做用域鏈,執行函數會建立一個「上下文環境」，做用域鏈，是由當前環境與上層環境的一系列變量對象組成，它保證了當前執行環境對符合訪問權限的變量和函數的有序訪問。（即當前做用域像鎖鏈同樣直通頂層做用域，俗稱：做用域鏈）

強行解釋閉包 

在Javascript 中，通常狀況下，函數外沒法訪問函數內的局部變量，若是要訪問函數內的局部變量，變通方法就是在該函數內部定義一個函數，return 裏面的函數，由於對裏面的函數來講，外面函數的局部變量對其是可見的，經過裏面的函數來訪問該函數的局部變量，來達到訪問函數內部的局部變量，那麼裏面的這個函數就算是閉包，閉包就是可以讀取其餘函數內部變量的函數，

原型跟原型鏈

在Javascript 中，原型是一個對象，能夠經過原型實現對象的屬性繼承，在每一個對象中都有一個內部屬性 [ prototype ]，它對應的就是該對象的原型。Firefox 和Chrome 中提供了"__proto__"這個非標準來查看該對象的原型，定義一個函數 function Fn(){Fn.prototype.name="fgh" } ，每一個函數都有一個prototype 屬性 當一個函數被用做構造函數來建立實例時，該函數的prototype 屬性值將被做爲原型賦值給全部對象實例（也就是設置實例的__proto__ 屬性），也就是說，全部實例的原型引用的是函數的 prototype 屬性，由於每一個對象和原型都是有原型的對象的原型指向對象的上一級，而原型又指向原型的上一級，這些原型層層連接起來就構成了原型鏈

解釋面向對象

Javascript 是一種面向對象的語言，但它又不是正統的面嚮對象語言，它沒有提供 ‘類’，但 Javascript 依然擁有面向對象的特徵：封裝 繼承 多態 。先說 封裝：原始方法： var add=new Object(); （建立一個空對象） add.name="李四"; add.sex:"男"（按照原型對象的方法進行賦值）。這就是最簡單的封裝，將兩個屬性封裝在一個對象裏，而後再說 繼承：function A( ){ this.name="李四" }；function B( ){ this.attr="生命" }（定義兩個構造函數）， A.prototype=new B;（若是要 A 構造函數繼承 B 構造函數，將 A 的 prototype 指向 B 的實例） A.prototype.constructor=A（由於prototype 對象都有一個 constructor 屬性指向它的構造函數，由於前面聲明 A的prototype 指向 B 的實例，如不進行糾正，那麼A.prototype.constructor=B; ）var a=new A 如今 A 的實例會繼承 B 的屬性。最後說 多態：一個引用類型在不一樣的情景下的不一樣狀態。便可以經過傳遞不一樣的參數判斷執行，實現一個引用類型在不一樣狀況下的多種狀態

 

嗯，前端的知識點一但開個頭，貌似能夠無限延伸下去，這裏我就不強行解釋了

 

註解：

①：CSS Hack：因爲不一樣瀏覽器的不一樣及版本的不一樣，須要對它們進行私人定製CSS。現基本不考慮IE6，例如：+ （IE7識別） .（IE7 IE8 識別 ） 

②：來自於 Matthew Levine 於2006年在「A LIST APART」上寫的一篇文章，它主要講述了網頁中關於三欄佈局最佳聖盃的實現方法

③：來着淘寶的UED，由於做者將佈局命名爲雙飛翼佈局，所以沿用至今