一周工作总结

总结一下这几周工作中遇到的一些问题

jquery——attr和data的区别

我们都知道为DOM元素增加额外属性，用data-来，比如：

<div class="child" data-id="1"></div>

用jquery获取data-id可以直接用data(),也可以用attr()来获取，但是这两种方法获取的属性还是有区别的，当属性是int的时候，data()获取到的是number，但是attr获取的却是string。

console.log(typeof $('.child').data('id')); //number 
console.log(typeof $('.child').attr('data-id'));//string
if ($('.child').data('id')===$('.child').attr('data-id'))
 {
    console.log('success');
 }
else{
    console.log('fail');
 }//fail

移动端键盘唤起优化体验

移动端的情况下，我们点击输入框，唤起键盘会影响我们原来的布局，要解决的主要有两个问题：
1.键盘遮挡输入框
2.IOS键盘弹起，fix元素失效
第一个问题我们监控input的焦点，然后滚动页面，是输入框露出，
第二个问题我们通过onresize方法来监控键盘弹起（也可以用监控input的焦点来间接监控键盘弹起），然后暂时取消fixed元素。

// 优化输入体验
$('input').on('focus', function () {
 var top = $(this).offset().top;
 // 稍等片刻，让键盘唤起，页面高度变化后再滚动
 window.setTimeout(function() {
  $(window).scrollTop(top - 60);//键盘高度可能有变化，简单设为60
 }, 500);
});
$('input').on('blur', function() {
// 修改bottom让页面重绘，防止fixed元素在iOS键盘收起时卡在屏幕中间
window.setTimeout(function() {
  $(window).scrollTop(0);
}, 500);
});


    let Height =  window.innerHeight;//键盘没有弹出时window.innerHeight
    window.onresize = function () {
            if (Height == window.innerHeight) {
                    $('.btn-wrap').addClass('fixed')//添加fix布局
            }
            else{
                $('.btn-wrap').removeClass('fixed'）取消fix
            }
        };

Vue Video标签的问题

在使用vue的时候，渲染video的时候遇到一个问题，开始的时候是这样渲染的

<video class="video" controls="controls">
    <source :src="videoUrl">
</video> 

然而发现videoUrl变化不重新渲染，于是改为下面这样才生效：

<video class="video" controls="controls" :src="videoUrl"></video>