心得体会
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);">下载APPa>
<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;
}