项目总结——酷拼编程

职责：

系统页面开发、不同分辨率显示器适应

掌握：

• 利用vue封装组价
• 利用CSS3媒体查询、bootstrap等实现不同分辨率显示器下的自适应

.1.先看boostrap里面container和container-fluid源码的区别：

container与.container_fluid是bootstrap中的两种不同类型的外层容器，按照官方的说法，这两者的区别是：

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

即container根据屏幕宽度利用CSS3媒体查询，帮我们设置了固定宽度，并且是能够自适应的。

2.项目中也是使用了原生媒体查询

3.bootstrap中的响应式栅格系统

<div class="row">
   <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
   <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

• 使用闭包实现图片的惰性加载，并利用函数节流(throttle)优化性能

延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。

那么延迟加载有什么好处：

1. 首先它能提升用户的体验，试想一下，如果打开页面的时候就将页面上所有的图片全部获取加载，如果图片数量较大，对于用户来说简直就是灾难，会出现卡顿现象，影响用户体验。
2. 有选择性地请求图片，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。

如果直接将函数绑定在 scroll 事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器的性能。

所以在做事件绑定的时候，可以对 lazyload 函数进行函数节流（throttle）与函数去抖（debounce）处理。

二、什么是debounce函数去抖　　　　　　　　　　　　　　　　　　　　　　　　　　　　

   1. 定义

　　如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。

      也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。

三、什么是throttle函数节流　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 

   1. 定义

　　如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。

　　也就是会说预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

<img class="PL06 center-block lazyImg" src="images/noImg.png" data-src="images/PL06.png">

function throttle(fn, delay, atleast) {
        var timeout = null,
            startTime = new Date();
        return function () {
            var curTime = new Date();
            clearTimeout(timeout);
            if (curTime - startTime >= atleast) {
                fn();
                startTime = curTime;
            } else {
                timeout = setTimeout(fn, delay);
            }
        }
    }//设置了 500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数。

function lazyload() {
        // let images = document.getElementsByTagName('img');
        let images = document.getElementsByClassName("lazyImg");
        let len = images.length;
        let n = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历
        return function () {
            let seeHeight = document.documentElement.clientHeight;//当前窗口的的像素
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//网页被卷走的像素
            for (let i = n; i < len; i++) {
                //images[i].offsetTop：元素距离浏览器顶部的距离
                if (images[i].offsetTop < seeHeight + scrollTop) {
                    console.log(images[i].offsetTop);
                    if (images[i].getAttribute('src') === 'images/noImg.png') {
                        images[i].src = images[i].getAttribute('data-src');
                    }
                    n++;
                }
            }
        }
    }

    var loadImages = lazyload();
    loadImages();          //初始化首页的页面图片
    window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);

• 学习了项目的开发流程，参与了设计、交互与甲方沟通