心得体会

来源：互联网发布：图像处理滤波器java 编辑：程序博客网时间：2024/05/11 12:06

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 高度不相等的问题

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

<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;        }

阅读全文

0 0