网易云项目一些总结

细心，注意传参的细致

一、

本地缓存sessionStorage和localStorage真的很好用

localStorage关闭浏览器后缓存内容就请除

sessionStorage一直存在于浏览器缓存中，不清除就一直存在

二、

再缓存中存数组需要预先转为JSON字符串，使用的时候在转回数组

JSON.stringify转为字符串

JSON.parse解析字符串

三、

写 ajax 提交的时候遇到一个问题，在执行 ajax 提交之后，浏览器页面自动刷新了，主要是没有 由于form 表单的默认提交行为。form表单的提交按钮<input type="submit" id='btn' value="提交" >点击会提交到from的action指定的地址中。以下是几种阻止 form 表单默认提交行为的方式。

1.使用button 按钮提交表单的时候，将提交按钮 <input type="submit" id='btn' value="提交" >换为<input type="button" id='btn' value="提交" >（最常用）

2.event.preventDefault(); 在提交事件绑定的方法的最后 使用event.preventDefault();方法；

详细见下面链接

http://t.csdn.cn/tf2Xw

四、

对audio音频的操作方式，见下面链接

http://t.csdn.cn/gd9Tx

项目中用到了比较重要的属性：当前播放时间currentTime，滚动条和歌词滚动的连接通过这个属性

监听音乐播放代码

 audioDOM.addEventListener('canplaythrough', function () {
            //canplaythrough是音频加载完全完成了
        audioDOM.addEventListener('timeupdate', function () {
         //timeupdate时间更新这个time指的是currentTime ，最频繁是“每250毫秒触发一次”。
           //在这里面写想要执行的操作
        })
      })

五、

正则表达式的作用：1.验证数据的有效性2.替换文本内容3.从字符串中提取子字符串

切割歌词时用到的两个正则方法

1、match()方法       作用： 该方法用于在字符串内检索指定的值，或找到一个或者多个正则表达式的匹配。类似于indexOf()或者lastIndexOf();

let time = item.match(reg)

2、g : 表示全局匹配。

let reg = /\[\d*:\d*\.\d*]/g

详细见下面

http://t.csdn.cn/gebaw

正则表达式的作用是什么-php教程-PHP中文网

六、

attr 和 prop 的区别介绍：

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

<a href="https://www.runoob.com" target="_self" class="btn">菜鸟教程</a>

这个例子里 <a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 <a> 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法。

<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

这个例子里 <a> 元素的 DOM 属性有: href、id 和 action，很明显，前两个是固有属性，而后面一个 action 属性是我们自己自定义上去的，<a> 元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时，建议使用 attr 方法。

七、

 arr.forEach(function(value, index) {   })

可以循环遍历数组，不可以循环遍历对象

 $.each(qq,function(key, val){   })

可以循环遍历数组，也可以循环遍历对象

for（      of     ）

可以循环遍历数组，不可以循环遍历对象

for (   in    )

可以循环遍历数组，也可以循环遍历对象

let ww ={
      q:11,
      w:22,
      e:33,
      r:44
    }
    for( v in ww){
      console.log(v);//q w e r
      console.log(ww[v]);//11 22 33 44
    }

Object.keys(ww)可以循环遍历对象

Object.keys()是ES5新增的一个对象方法，该方法返回对象自身属性名组成的数组，他会自动过滤掉原型链上的属性，然后可以通过数组的forEach()方法来遍历。

Object.getOwnPropertyNames(ww)可以循环遍历对象

　也是ES5新增的一个对象方法，该方法返回对象自身属性名组成的数组，包括不可枚举的属性，也可以通过数组的forEach()方法来遍历。

let ww ={
      q:11,
      w:22,
      e:33,
      r:44
    }

console.log(Object.keys(ww));//[q,w,e,r]
console.log(Object.getOwnPropertyNames(ww));//[q,w,e,r]