心得体会

1. 匿名函数自执行

var x = 1;
(function(){
     console.log(x);
     x += 1;
     return x
})();
console.log(x);

这个匿名函数就是「内部函数」，「外部函数」就是全局作用域从而形成闭包。
=>自定义函数，均可访问window对象中的变量。

2. 解决Android手机端点击input弹出键盘遮盖问题:

Ios端下虚拟键盘与window不在一个层面，但在Android下会形成遮盖情况，思路是当浏览器高度变化时使fixed层的div变为relative/static.

// 下载层处理
    var xx = 0;
    $(window).on('resize', function() {
        if(xx == 0){
            $('.banner').css('position','relative');
            xx = 1;
        }else {
            $('.banner').css('position','fixed');
            xx = 0;
        }
    });

3. web端页面跳转 App store/App

页面布局结构：

<div class="banner">
    <img src="../img/activity/new_user2.png" />
    <div class="downLoad" onclick="download()">
        <a id="CallApp" href="javascript:void(0);">下载APP</a>
        <input id="DownloadApp" type="hidden" value="http://web.3pzs.com/app_update1/android5.apk">
        <input id="DownloadApp2" type="hidden" value="https://itunes.apple.com/us/app/shan-pin-zhai-song/id1165264474?l=zh&ls=1&mt=8">
    </div>
</div>

其中两个input的value值为Ios,Android两端的通用链接（universal link），创建iframe跳转。
ps: 这里设置了一个延迟显示，1.5s后不管手机是否有App，均跳转到App store 页面。

以下点击下载按钮的方法：

// 触发事件
function download() {
    $('.confirm-btn').on('click', function() {
        // 判断是ios，还是Android
        if(ua.indexOf('os') > 0) {
            window.location = config.download_url2;
        } else {
            window.location = config.download_url;
        }
    });

    var ua = navigator.userAgent.toLowerCase(); 
    $('#CallApp').attr('href', 'spzjs://');
    // 设置时间变量
    var t;
    // 命名空间config
    config = {
        /*scheme:必须，通配头由ios，Andriod提供*/
        scheme: 'spzjs://',
        download_url: document.getElementById('DownloadApp').value,
        download_url2: document.getElementById('DownloadApp2').value,
        // 时间间隔
        timeout: 1500
    };

    // 打开客户端方法
    function openclient() {
        var startTime = Date.now();
        var ifr = document.createElement('iframe');

        ifr.src = config.scheme;
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        var t = setTimeout(function() {
            var endTime = Date.now();

            if(!startTime || endTime - startTime < config.timeout + 200) {
                $('.shade').fadeIn(300);
                $('.login-block').hide();
                $('.input-modal').fadeIn(300);

            }
        }, config.timeout);

        window.onblur = function() {
            clearTimeout(t);
        }
    }

    openclient();
}

4. js Tips

1.两个obj是否全等：
(1)
if(JSON.stringify(ObjA) == JSON.stringify(ObjB)){
    console.log('全等！')
}
(2)
function isEqual(obj1, obj2){  
    if(isEqual.result === undefined){  
        isEqual.result = false;  
    }  
    if(obj1 === obj2){  
       return true;  
    }  
    for(var i in obj1){  
        if(i in obj2){  
            //如果是对象，那么递归  
            if(isObject(obj1[i])){  
                isEqual.result = false;  
                isEqual(obj1[i], obj2[i]);  
            }else{  
                //如果为null或undefined 将不具备 toString方法  
                if(obj1[i] !== null && obj2[i] !== null && obj1[i] !== undefined && obj2[i] !== undefined){  
                    if(obj1[i].toString() !== obj2[i].toString()){  
                //转换为字符串判断是否全等。  
                        isEqual.result = false;  
                    }else{  
                        isEqual.result = true;  
                    }  
                }else{  
                    if(obj1[i] === obj2[i]){  
                        isEqual.result = true;  
                    }else{  
                        isEqual.result = false;  
                    }  
                }  
            }  
        }else{  
            isEqual.result = false;  
        }  
    }  
   return isEqual.result;  
}  

2. 两个以上的input，点击其中一个有删除按钮，点击另一个之前消失，当前有：

    $('.input-district-row input').on('input focus', function() {
        if($(this).val() != '') {
            $(this).next().show();
        } else {
            $(this).next().hide();
        }
        $(this).parents().siblings().find('.search-clear').hide()      
    });

3.禁止拖动
    $('body').on('touchmove', function(e) {
        e.preventDefault()
    });

5. input 与 span 高度不相等的问题

1. 将他们都设置为: float: 'left'; 然后固定高度，但安卓手机会出现1px的误差问题， 此时解决办法是将input的高度设置为0， padding设置为原来高度的一半。

2. 亦或清除换行的影响解决这个问题：

<input>
<span>

改为

<input
><span>

6. echo.js 图片预加载

基本思路是找到元素的相对与视口的位置，如果在的话直接将src变为data-echo里的数据加载，不在的话增加滚动监听事件，到达视口的时候加载。 （ps: 如果是异步加载出来的图片应该在回调函数的最后进行init()）

        function(root) {
            // 命名空间export
            var exports = {};
            var callback = function() {};
            var offset, poll, throttle, unload;
            var inView = function(element, view) {
                // getBoundingClientRect 获得页面中元素的左，上，右和下分别相对浏览器视窗的位置。
                var box = element.getBoundingClientRect();
                return(box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
            };
            var debounce = function() {
                clearTimeout(poll);
                poll = setTimeout(exports.render, throttle);
            };
            // 初始化
            exports.init = function(opts) {
                opts = opts || {};
                var offsetAll = opts.offset || 0;
                var offsetVertical = opts.offsetVertical || offsetAll;
                var offsetHorizontal = opts.offsetHorizontal || offsetAll;
                var optionToInt = function(opt, fallback) {
                    return parseInt(opt || fallback, 10);
                };
                offset = {
                    t: optionToInt(opts.offsetTop, offsetVertical),
                    b: optionToInt(opts.offsetBottom, offsetVertical),
                    l: optionToInt(opts.offsetLeft, offsetHorizontal),
                    r: optionToInt(opts.offsetRight, offsetHorizontal)
                };
                // 延迟
                throttle = optionToInt(opts.throttle, 250);
                unload = !!opts.unload;
                callback = opts.callback || callback;
                exports.render();
                // 事件监听
                if(document.addEventListener) {
                    root.addEventListener('load', debounce, false);
                    root.addEventListener('scroll', debounce, false);
                } 
                // 兼容ie的attachEvent
                else {
                    root.attachEvent('onload', debounce);
                    root.attachEvent('onscroll', debounce);
                }
            };
            // 渲染
            exports.render = function() {
                var nodes = document.querySelectorAll('img[data-echo]');
                var length = nodes.length;
                var src, elem;
                var view = {
                    l: 0 - offset.l,
                    t: 0 - offset.t,
                    b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
                    r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
                };
                for(var i = 0; i < length; i++) {
                    elem = nodes[i];
                    // 在视口
                    if(inView(elem, view)) {
                        // 未加载
                        if(unload) {
                            elem.setAttribute('data-echo-placeholder', elem.src);
                        }
                        elem.src = elem.getAttribute('data-echo');
                        // 已加载
                        if(!unload) {
                            elem.removeAttribute('data-echo');
                        }
                        callback(elem, 'load');
                    }
                    // 不在视口
                    else if(unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
                        elem.src = src;
                        elem.removeAttribute('data-echo-placeholder');
                        callback(elem, 'unload');
                    }
                }
                if(!length) {
                    exports.detach();
                }
            };
            // 取消事件触发
            exports.detach = function() {
                if(document.removeEventListener) {
                    root.removeEventListener('scroll', debounce);
                } else {
                    root.detachEvent('onscroll', debounce);
                }
                clearTimeout(poll);
            };
            return exports;
        }