前台开发总结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