前台開發總結12 20171122

二、html5的api介面getboundingclientrect(),可以在js中獲取頁面元素的位置資訊，包括top、right、bottom、left、width、height等元素位置、屬性資訊。

console.log(document.getelementbyid("demo").getboundingclientrect());

三、js中不同迴圈方法解析：for forin forof

for：獲取所有符合條件的，然後乙個個進行遍歷

forin：獲取所有的下標，然後根據下標找出符合的元素

forof:是es6中新增的一種迴圈方法，可以直接獲取物件的值

效能上，forof效能最好，for次之，for最差

應用：原來，我們遍歷元素集合，一般使用for迴圈，或者foreach方法  .foreach.call(nodelist,function(){}).

現在，我們可以直接使用forof進行遍歷 for(var item of nodelist){} 直接獲取元素集合中的元素。

四、前端優化，遵循高內聚，低耦合的準則

將業務**歸在一起，演算法**（純函式）單獨建立

純函式概念：

1、**內容僅僅只用到了傳入的引數；

2、沒有影響到任何外面的引數；

3、不對頁面業務產生任何干擾。(執行純函式後，頁面渲染不發生改變)

純函式是業務邏輯分離出來的邏輯，最好加上注釋，便於理解和復用

/***@param 差值演算法

*@p0:初始狀態

*@p1:結束狀態

*@t:變化函式

*/五、arguments.callee呼叫函式自身

在函式中，使用arguments.callee()可以呼叫函式本身，相當於物件導向中的遞迴。但是es5以後已經不建議使用了，建議使用函式名呼叫函式自身。

六、在web開發中，當元素內容超出元素盒模型時，我們通常會使用滾動條來顯示元素的所有內容，但是瀏覽器自帶的滾動條太醜了，在谷歌瀏覽器中，我們可以使用偽元素 ::-webkit-scrollbar{} 來自定義滾動條的樣式；也可以在滾動條中設定內邊距 padding-left:100px; 來隱藏滾動條。

七、perspective-origin的使用

目前瀏覽器都不支援 perspective-origin 屬性。

chrome 和 safari 支援替代的 -webkit-perspecitve-origin 屬性。

perspective-origin 屬性定義 3d 元素所基於的 x 軸和 y 軸(屬性值只有兩個)。該屬性允許您改變 3d 元素的底部位置。

當為元素定義 perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身。

注釋：該屬性必須與 perspective 屬性一同使用，而且只影響 3d 轉換元素。

八、不使用for迴圈,輸出1到100.