前端周刊 - 第12期 - 160327

[LoeiFy]

积累提升

响应式图像

html5.1草案纳入了picture元素、srcset、sizes属性，实现图片根据条件加载
https://isux.tencent.com/responsive-image.html

数组元素随机化排序算法实现

做活动的时候(闪灯效果),经常会使用到数组随机化.通俗名叫洗牌(shuffle)算法
http://div.io/topic/1610

26款高品质 APP UI原型设计灵感

列举了很多很棒的原型图例子
http://www.shejidaren.com/26-wireframe-designs.html

高级CSS filters

这篇文章我们一起来看看通过哪些CSS的新特性可以实现类似iOS系统中那种高斯模糊效果
amfe/article#9

教程经验/解决方案

移动端web页面使用position:fixed问题总结

最近项目有需要用到fixed，然后发现很多坑，看到了一篇总结了fixed坑的文章，http://zhibo.m.sohu.com/ 这是作者的项目，可以看到它的解决方案。
https://github.com/maxzhang/maxzhang.github.com/issues/2

原生js模拟简单slideUp

/* slideUp */
    window.Slider = (function() {
        // 定义Slider对象
        var Slider = {};

        // I.定义一个TimerManager类

        // 1）构造函数
        function TimerManager() {
            this.timers = [];       // 保存定时器
            this.args = [];         // 保存定时器的参数
            this.isFiring = false;
        }

        // 2）静态方法：为element添加一个TimerManager实例
        TimerManager.makeInstance = function(element) {
            // 如果element.__TimerManager__上没有TimerManager，就为其添加一个
            if (!element.__TimerManager__ || element.__TimerManager__.constructor != TimerManager) {
                element.__TimerManager__ = new TimerManager();
            }
        };

        // 3）扩展TimerManager原型，分别实现add，fire，next方法
        TimerManager.prototype.add = function(timer, args) {
            this.timers.push(timer);
            this.args.push(args);
            this.fire();
        };

        TimerManager.prototype.fire = function() {
            if ( !this.isFiring ) {
                var timer = this.timers.shift(),        // 取出定时器
                    args  = this.args.shift();          // 取出定时器参数
                if (timer && args) {
                    this.isFiring = true;
                    // 传入参数，执行定时器函数
                    timer(args[0], args[1]);
                }
            }
        };

        TimerManager.prototype.next = function() {
            this.isFiring = false;
            this.fire();
        };

        // II. 修改动画函数并在定时器结束后调用element.__TimerManager__.next()

        // 1）下滑函数
        function fnSlideDown(element, time) {
            if (element.offsetHeight == 0) {  //如果当前高度为0，则执行下拉动画
                // 获取元素总高度
                element.style.display = "block";            // 1.显示元素，元素变为可见
                var totalHeight = element.offsetHeight;     // 2.保存总高度
                element.style.height = "0px";               // 3.再将元素高度设置为0，元素又变为不可见
                // 定义一个变量保存元素当前高度
                var currentHeight = 0;                      // 当前元素高度为0
                // 计算每次增加的值
                var increment = totalHeight / (time/10);
                // 开始循环定时器
                setHeight(currentHeight);
                function setHeight(currentHeight){
                    var timer = setTimeout(function(){
                        // 增加一部分高度
                        currentHeight = currentHeight + increment;
                        // 把当前高度赋值给height属性
                        element.style.height = currentHeight + "px";
                        // 如果当前高度大于或等于总高度则关闭定时器
                        if (currentHeight >= totalHeight) {
                            // 关闭定时器
                            clearInterval(timer);
                            // 把高度设置为总高度
                            element.style.height = totalHeight + "px";
                            if (element.__TimerManager__ && element.__TimerManager__.constructor == TimerManager) {
                                element.__TimerManager__.next();
                            }
                        } else {
                            clearInterval(timer);
                            setHeight(currentHeight);
                        }
                    },10)
                }
            } else {  // 如果当前高度不为0，则直接执行队列里的下一个函数
                if (element.__TimerManager__ && element.__TimerManager__.constructor == TimerManager) {
                    element.__TimerManager__.next();
                }
            }
        }

        // 2）上拉函数
        function fnSlideUp(element, time) {
            if (element.offsetHeight > 0) {  // 如果当前高度不为0，则执行上滑动画
                // 获取元素总高度
                var totalHeight = element.offsetHeight;
                // 定义一个变量保存元素当前高度
                var currentHeight = totalHeight;
                // 计算每次减去的值
                var decrement = totalHeight / (time/10);
                // 开始循环定时器
                setHeight(currentHeight);
                function setHeight(currentHeight){
                    var timer = setTimeout(function(){
                        // 减去当前高度的一部分
                        currentHeight = currentHeight - decrement;
                        // 把当前高度赋值给height属性
                        element.style.height = currentHeight + "px";
                        // 如果当前高度小于等于0，就关闭定时器
                        if (currentHeight <= 0) {
                            // 关闭定时器
                            clearInterval(timer);
                            // 把元素display设置为none
                            element.style.display = "none";
                            // 把元素高度值还原
                            element.style.height = totalHeight + "px";
                            if (element.__TimerManager__ && element.__TimerManager__.constructor == TimerManager) {
                                element.__TimerManager__.next();
                            }
                        } else {
                            clearInterval(timer);
                            setHeight(currentHeight);
                        }
                    },10);
                }
            } else {  // 如果当前高度为0， 则直接执行队列里的下一个函数
                if (element.__TimerManager__ && element.__TimerManager__.constructor == TimerManager) {
                    element.__TimerManager__.next();
                }
            }
        }

        // III.定义外部访问接口

        // 1）下拉接口
        Slider.slideDown = function(element, time) {
            TimerManager.makeInstance(element);
            element.__TimerManager__.add(fnSlideDown, arguments);
            return this;
        };

        // 2）上滑接口
        Slider.slideUp = function(element, time) {
            TimerManager.makeInstance(element);
            element.__TimerManager__.add(fnSlideUp, arguments);
            return this;
        };

        // 返回Slider对象
        return Slider;
    })();

    // 使用
    Slider.slideDown(ele,'500');
    Slider.slideUp(ele,'500');

启发思考

我为何放弃Gulp与Grunt，转投npm scripts

作者对 grunt, gulp 吐槽了一下，推崇npm scripts；这个系列有三篇文章，都是在说这三者的东西
http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part1

前端优化不完全指南

本文主要从工作效率、速度性能、稳定性、响应式、兼容性、搜索SEO、信息无障碍等方面进行讲解。
前端优化是一个让人技术提升的point，希望你也能从这里学到一些东西。
http://aotu.io/notes/2016/03/16/optimization/