js（art-­template、cookie、session、分页、注册、form、audio、video、移动端event、touch.js）

art-­template

• 1、介绍：art-­template是一个简单且超快速的模板引擎，可通过范围内预先声明的技术优化模板渲染速度，从而实现接近JavaScript极限的运行时性能，同时它支持nodeJS和浏览器
• 2、基本使用：
  • 引入art-­template.js
  • 初始化模板 template(‘模板ID’,’数据’) 即可实现初始化模板
  • 模板中要使用的数据就是模板中要渲染的数据
• 3、编写模板：
  • < script type=“text/html” id=" "></ script>
  • type属性表示的意思是script标签中代码的解析规则，因此在模板script标签中是按照 html的语法来解析代码的
  • 插值表达式：{ {要插入的数据}}
• 4、转义：
  • { {数据}} 不能解析标签
  • { {#数据}} 可以解析标签

  <script src="./art_templaty_min.js"></script>
  <script type="text/html" id="first">
    {
   {
   title}}
    {
   {
   #title}}
  </script>
  <script>
    var obj = {
   
      title: '<h1>我是第一个模板引擎数据<h1>'
    }
    var temp = template('first', obj)

    var oDiv = document.querySelector('div')
    oDiv.innerHTML = temp
  </script>

• 5、循环语法：
  • { {each 要循环的数据 数组项变量 i}}
    html结构
    { {/each}}
• 6、判断语法：
  • 如果满足条件就渲染结构，如果不满足就不渲染
  • { {if 判断条件}}
    html结构
    { {/if}}

  <script src="./art_templaty_min.js"></script>
  <script type="text/html" id="first">
    {
   {
   each arr item i}}
    <h3>{
   {
   item}}----{
   {
   i}}</h3>
    {
   {
   /each}}

    {
   {
   if isTrue}}
      大家好，我是判断语法
    {
   {
   /if}}
  </script>
  <script>
    var data = {
   
      arr: ['张三', '李四', '王五', '赵六', '田七'],
      isTrue: true
    }
    var temp = template('first', data)
    var oDiv = document.getElementsByTagName('div')[0]
    oDiv.innerHTML = temp
  </script>

存储

cookie

• 会有一个过期时间，如果不设置过期时间那么关闭页面就会消失，如果想要删除这个cookie的话就要设置一个过期时间，存储大小只有4kb左右
• 设置： document.cookie = “键=值”

    var oDate = new Date()
    console.log(oDate);
    //设置cookie
    // document.cookie = "name=zhangSan;expires=Wed Sep 30 2021 15:13:48 GMT+0800 (中国标准时间)"
    document.cookie = "age=18;expires=Wed Sep 30 2022 15:13:48 GMT+0800 (中国标准时间)"
    //获取cookie
    var cook = document.cookie
    console.log(cook);  //name=zhangSan; age=18
    //删除cookie
    document.cookie = "age=18;expires=Wed Sep 30 2019 15:13:48 GMT+0800 (中国标准时间)"
    setCookie('city','guangZhou',10)
    console.log(getCookie('city'));
    removeCookie('name')
    console.log(getCookie('name'));

session

• localStorage
  • 特点：是永久存储。即使关闭浏览器也不会消失，除非主动删除，存储大小一般5M
• sessionStorage 会话级别存储
  • 特点：关闭浏览器，数据自动消失，存储大小5M，只允许统一窗口访问
• 设置
  • 变量=window.localStorage
  • 变量.setItem(‘键’,‘值’)
• 获取
  • 变量.getItem(‘键’)
• 修改
  • 变量.键 = 值
• 全部删除
  • 变量.clear()
• 具体删除
  • 变量.removeItem(‘键’)

    //1、设置     变量=window.localStorage      变量.setItem('键','值')
    var storage = window.sessionStorage

    storage.setItem('city', 'guangZhou')
    storage.setItem('name', 'liSi')
    storage.setItem('age', 80)

    //2、获取     变量.getItem('键')
    console.log(storage.getItem('city'));
    
    //3、修改     变量.键 = 值
    storage.city = 'nanSha'

    //4、删除
    //4.1全部删除     变量.clear()
    // storage.clear()
    //4.2、具体删除   变量.removeItem('键')
    storage.removeItem('age')

项目主要功能

评论分页：（实际开发中每个页面的数据都是从后端请求过来的，不需要前端做分页）

     //标记当前页面是第几页，默认为1
     var page = 1
     //封装当前页面显示的内容
     function fn(page) {
   
         var str = ''
         if (page == allPage) {
   
             for (var i = 4 * page - 4; i < arrComment.length; i++) {
   
                 str += '<li><div class="user clearfix"><div class="lf"><img src="' + arrComment[i].src + '" alt=""></div><p class="name">' + arrComment[i].id + '&nbsp;' + arrComment[i].name + '</p><p class="date">' + time(arrComment[i].time) + '</p></div><p class="cont">' + arrComment[i].message + '</p><span>' + arrComment[i].top + '</span></li>'
             }
         } else {
   
             for (var i = 4 * page - 4; i < 4 * page; i++) {
   
                 str += '<li><div class="user clearfix"><div class="lf"><img src="' + arrComment[i].src + '" alt=""></div><p class="name">' + arrComment[i].id + '&nbsp;' + arrComment[i].name + '</p><p class="date">' + time(arrComment[i].time) + '</p></div><p class="cont">' + arrComment[i].message + '</p><span>' + arrComment[i].top + '</span>