前端笔记

• 获取年月日时分秒

function getCurrentTime() {
  var year = currentData.getFullYear(); 
  var currentMonth = currentData.getMonth() + 1; 
  var month = currentMonth > 10 ? currentMonth : '0' + currentMonth;
  var currentDay = currentData.getDate();
  var date = currentDay > 10 ? currentDay : '0' + currentDay;
  var currentHour = currentData.getHours();
  var hour = currentHour > 10 ? currentHour : '0' + currentHour;
  var currentMinute = currentData.getMinutes();
  var minute = currentMinute > 10 ? currentMinute : '0' + currentMinute;
  var currentSecond = currentData.getSeconds();
  var second = currentSecond > 10 ? currentSecond : '0' + currentSecond;
  console.log(year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second)
}

• 判断字符串中出现次数最多的字符，统计次数是多少

function computedMostCount() {
    var str = 'ababcdefgadddafjsknmi';
    var result = {};
    var max = -1;
    var maxKey = ''; 
    for (let i=0; i<str.length; i++) {    
        let key = str[i]; 
        key in result ? result[key]++ : result[key] = 1;  
    }  
    for (let key in result) {    
        if (result[key] > max) {
            max = result[key];      
            maxKey = key;    
        }  
    }  
    console.log(maxKey + ':' + max);
}

• 正则：第一个字符是必须是字母，后面的字符可以是字母数组下划线，长度5-20个字符

var reg = /^[a-z][a-zA-Z_0-9]{4, 19}$/;

• js设置固定盒子在页面右下角

function fixedBottom() {   
    var boxElement = document.getElementById('box');   
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;   
    boxElement.style.left = document.documentElement.clientWidth - boxElement.offsetWidth + 'px';   
    boxElement.style.top = document.documentElement.clientHeight - boxElement.offsetHeight + scrollTop + 'px';
}

• 鼠标移动到页面中的任意标签，显示出这个标签的基本轮廓

function moveBorder(element) {
    var childs = element.childNodes;
    
    for (let i=0; i<childs.length; i++){
        let child = childs[i];
        child.onmouseover = function() {
            this.style.border = '1px solid red';
        };
        child.onmouseout = function() {
            this.style.border = 'none';
        };
        moveBorder(child);
    }
}
moveBorder(document.body);

• 防抖与节流

防抖与节流函数是一种最常用的高频触发优化方式，对性能有较大的帮助

防抖（debounce）: 将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户连续输入，只需要在输入结束后做一次校验即可，比如input搜索

html:

<input type="text" id="username" name="username" />

javascript: 

// immediate === true 时，首次按下会立即执行

function debounce(fn, wait, immediate) {
    let timer = null;
    
    return function() {
        let args = arguments;
        let context = this;
        if (immediate && !timer) {
            fn.call(context, args);
        }
        
        timer = setTimeout(() => {
            fn.call(context, args);
        }, wait)
    }
}

function sendAjax() {
    console.log('send ajax request');
}

var debounceAjax = debounce(sendAjax, 1000);
var inputElement = document.getElementById('username');
inputElement.addEventListener('keyup', function(e) {
    debounceAjax(e.target.value);
});

防抖可以理解：法师发技能的时候要读技能条，技能条没读完在按技能就会重新读技能条

节流（throttle）：每隔一段时间执行一次，也就是降低频率，将高频操作优化成低频操作。通常使用场景： 滚动条事件，窗口resize事件，通常每隔100-500ms执行一次

function throttle(fn, wait, immediate) {
    let timer = null;
    let callNow = immediate;
    
    return function() {
        let context = this;
        let args = arguments;
        
        if (callNow) {
            fn.apply(context, args);
            callNow = false;
        }
        
        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(context, args);
                timer = null;
            }, wait)
        }
    }    
}

function resizeClient() {
    console.log('client resize');
}

var throttleResize = throttle(resizeClient, 1000);

window.onresize = function() {
    throttleResize();  
};

节流可以理解：fps游戏的射速，就算一直按着鼠标设计，也只会在规定射速内射出子弹

原创地址，

1. juejin.cn/post/684490…

2. juejin.cn/post/684490…

3. juejin.cn/post/684490…