前臺開發總結13——20180419

一、JS中使用數組的sort()可以對數組進行排序，Array.sort();默認是按照遞增的順序排列的。

若需要按遞減的順序排序，可以對sort進行重寫

cosole.log([4,7,2,9,1,6].sort(function(a,b){
	return b-a;
}));

二、系統架構包含技術架構、功能架構、部署架構、數據架構。國內的系統架構中往往包含了功能架構。

三、HTML中的某些元素會具有自身屬性，例如body、ul、li，它們都具有一些默認的內外邊距，爲了更好的兼容各瀏覽器，建議將元素的自帶屬性去除掉，自己定義。

四、生成長度爲100，值爲0的數組

Array.prototype.fill.call(new Array(100),0);

五、多背景

在樣式的background屬性中，使用逗號將不同的背景圖片導進來，從而實現多張背景圖片
background:url("images/bg1.png") repeat-x,url("images/bg2.png");

六、position:fixed;的應用

已知設置元素的樣式爲 position:fixed; 後，元素會相對於瀏覽器窗口定位，從而實現側邊欄等頁面效果。同時，你可以爲該元素設置width:100%;height:100%;。因爲元素是相對於瀏覽器窗口的，所以此時該元素會充滿整個頁面。

七、JS垃圾回收機制，通過標記清除（主流瀏覽器）和引用計數（低版本IE瀏覽器）的方式，

八、使用jQuery的animate方法，不僅可以設置CSS屬性的動態效果，而且設置諸如scrollTop等DOM對象屬性

$(selector).animate(styles,speed,easing,callback);
$().animate({width:'+=100px'},1000);
//點擊目錄跳轉到當前頁的對應區域
$("a.page-scroll").click(function () {
        $(this).parents().addClass("active").siblings().removeClass("active");
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top - 40
                }, 900);
                return false;
            }
        }
    });

備註：<a>元素中的href屬性，可以像地址欄一樣，通過href、hostname等屬性獲取相應的值，this.href獲取的便是a元素的href屬性

九、使用background-attachment可以固定圖片在當前窗口，不隨頁面的滾動而移動。

可以實現兩種效果：
1、背景圖片不動，鼠標滑輪滾動，實現圖片上的文字滾動而圖片不動。
2、在頁面中有一張圖片（通常在頁面的開頭，導航欄的下方），鼠標滾動頁面，圖片不動，只是從下到上隱藏、顯示圖片，示例：http://demo.cssmoban.com/cssthemes4/dstp_1_tf-free3/index.html