前端JS-Day23

fastclick插件的使用：解决移动端触摸300ms延时问题

 使用操作：

if('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }

 

 

本地存储：

sessionStorage：生命周期为关闭浏览器窗口！

 

locationStorage：生命周期永久！

 

复杂类型存储：存入时利用JSON.stringify将复杂类型转换为JSON字符串存入，取出时利用JSON.parse将存储中的JSON字符串转换为对象取出。

 

localStorage和sessionStorage区别：

1.localStorage生命周期永久，除非手动删除否则一直存在。sessionStorage生命周期为浏览器页面，关闭页面则消失。

2.localStorage在多个页面间可以数据共享（在同一浏览器下），sessionStorage在同一个页面下数据可以共享。

 

记住用户名案例：

<input type="text" id="username">
<input class="check" type="checkbox" name="" id="remember">记住用户名
    <script>
        let user = document.querySelector('#username');
        let remember = document.querySelector('#remember');

        if(localStorage.getItem('username')) {
            user.value = localStorage.getItem('username');
            remember.checked = true;
        }

        remember.addEventListener('change', function() {
            if(remember.checked) {
                localStorage.setItem('username', user.value);
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>

 

高阶函数：函数表达式和回调函数

函数表达式：把函数当成数据，把函数赋值给变量。

回调函数：把函数当作另外一个函数的参数传递，这个函数就叫做回调函数，一般使用匿名函数。

 

重绘和回流：

 

回流：浏览器重新渲染页面。影响到布局就会回流！

重绘：仅改变元素的部分特性无需重新渲染。

 

 

递归函数：自己调用自己的函数。

利用setTimeout延时函数实现setInterval：

<div class="clock"></div>
    <script>
        let clock = document.querySelector('.clock');
        function myInterval() {
            let time = new Date();
            clock.innerText = time.toLocaleString();
            setTimeout(myInterval, 1000);
        }
        // 启动定时任务
        myInterval();
    </script>

setTimeout和setInterval的区别：

 

正则表达式：具体内容

 

 

 语法：

正则字符串对象的test方法用于检测字符串内是否出现了正则对象，返回值true即为存在，反正为false。

 元字符：

 

 

 

 1.边界符：

^和$一起使用则为精确匹配！

<script>
        console.log(/^a/.test('aba')); //true
        console.log(/a$/.test('aba')); //true
        console.log(/^a$/.test('aa')); //false
        console.log(/^a$/.test('a'));  //true 精确匹配
</script>

2.量词：

3.字符类：

[ ]匹配字符集合

 

 

 

修饰符：i则不区分大小写，g匹配所有结果则是全局匹配。

 

 

 replace方法：