JS题应用

作者: YouKnowznM | 来源:发表于2017-11-23 11:39 被阅读0次

JS题应用
任务11
react-native版知乎日报APP（三）目录结构与文件说
js题
js题
js题
js题
js题
js题
vue使用全局filter方法骚操作

实现一个动画函数，无需考虑透明度

function animate(ele, tarStyle, tarValue) {
    var fullStyleValue = getComputedStyle(ele)[tarStyle]
    var currentValue = parseFloat(fullStyleValue)
    var animationId = setInterval(function() {
        if (currentValue !== tarValue) {
            currentValue += Math.ceil((tarValue - currentValue) / 10)
        } else {
            clearInterval(animationId)
        }
        ele.style[tarStyle] = currentValue + 'px'
    }, 20)
}

节流函数的实现（类似Vue1的debounce）

function debounce(fn, delay) {
    var timer = null
    return function () {
        var context = this
        var args = arguments
        clearTimeout(timer)
        timer = setTimeout(function () {
            fn.apply(context, args)
        }, delay)
    }
}

点击li时alert索引

<ul id="container">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

var lis = document.getElementsByTagName('li')

// 1 - 事件代理
document.getElementById('container').addEventListener('click', function(e) {
    if (e.target.nodeName === 'LI') {
        console.log(Array.prototype.indexOf.call(lis, e.target));
    }
})

// 2 - 分别加onclick
Array.prototype.forEach.call(lis, function(item, index) {
    item.onclick = function() {
        console.log(index);
    }
})

// 3 - 单个加onclick，用let
for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function() {
        console.log(i);
    }
}

// 4 - 单个加onclick，把i赋值给内部函数
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = (function(arg) {
        return function() {
            console.log(arg);
        }
    })(i)
}

获取元素聚页面左边、顶部的距离

// 一直向上获取目标元素的父定位元素。注意不能用getBoundingClientRect()方法，那个返回的是距离视口的距离
function offset(t) {
    var top = t.offsetTop
    var left = t.offsetLeft
    var posParent = t.offsetParent
    while (posParent !== null) {
        top += posParent.offsetTop
        left += posParent.offsetLeft
        posParent = posParent.offsetParent
    }
    return { top: top, left: left }
}

常规URL的正则匹配

//开始 + 可选的http或https协议名 + 一个以上的（一个以上的字母或数字或'-' + '.'） + 一个以上的字母或数字 + 一个以上的（'/' + 一个以上的非空格字符 ） + 结尾
/^(http:\/\/|https:\/\/)?([\w-]+\.)+[\w-]+(\/\S+)+$/