JS原生项目

JS原生项目

• 知识点-思维导图

  
  js原生项目.png

JS作用

• 实际项目里js的应用点
  1.获取数据渲染页面
  2.页面上数据的处理
  3.页面跳转时数据的传输
• 可见，JS的真正作用是处理数据
  下面是我根据导图，结合项目代码进行的一些总结

项目总结

基本知识点

一、面向对象编程方式

• 我们把要处理的页面当一个对象比如对影片列表处理的时候

var pian = {
// 对影片页面处理，我们创建一个对应的对象pian（直接用拼音哈哈）
    start: function () {
// 开始就执行函数的我们用一个函数来装
        var str = location.href;
        var index = str.indexOf('=') + 1;
        var filmId = str.slice(index);
        var url = 'http://132.232.87.95:3000/api/film/getDetail?filmId='+filmId
        axios.get(url).then(function (res) {
            if (res.data.status == 0) { 
                pian.renderList(res.data.film);
            }
        }).catch(function () { 

        })
    },
    renderList: function (film) {
// 渲染的我们也用一个函数来表示
        document.querySelector('#img').src = film.poster;
        document.querySelector('#name').innerText = film.name;
        document.querySelector('#grade').innerText = film.grade;
        document.querySelector('#category').innerText = film.category;
    }

}
pian.start();
// 一开始就运行这个开头执行的函数

• 面向对象编程，把编辑的页面当成对象，然后分几个功能层，开始执行和待执行以及触发执行的代码，作用是让代码更有条理不至于乱七八糟的

二、获取dom节点

• 我们要对页面进行操作，第一步肯定是找到对应的标签，然后对这个标签进行编辑
• 常用的都会说是document.getElementById和document.getElementsByClassName

document.getElementById       //   根据ID获取节点
document.getElementsByClassName  // 根据class获取节点

• 但是最推荐的还是document.querySelector
  因为document.querySelector有这个两个的功能

document.querySelector('#')     // 根据ID获取的时候用 #
document.querySelector('.')      //  根据class获取的时候用 .

作用总结

一、for循环

项目里我们渲染页面大部分依靠的都是for循环，这里依靠的是for循环可以遍历数组的特性

• for循环遍历 for(i=0;i<arr.length;i++){arr[i]} 这个时候arr[i]代表数组arr里的每一个元素，这便是遍历

for (var j = 0;j < films.length;j++) {
      var film = films[j]
      var filmId = film.filmId; 
      var actorsStr = home.actorsToString(film.actors)
      var str = `  <div class="flex-sb mg-t-8 bd-gray pd-b-15 mg-l-17 rel">
                <a class="flex-sb w100pc" href="pian.html?filmId=${filmId}">
                    <img class="h70 w50" src="${film.poster}" alt="">
                    <!-- 电影文字介绍 -->
                    <div class="lh20 fg1 mg-l-15">
                        <div class="flex ai-center">
                            <p class="f14">${film.name}</p>
                            <span class="lable2D f10" style="">2D</span>
                        </div>
                        <div class="f12 gray mg-t-5">
                            <p>观众评分 <span style="color:#fed177;">${film.grade}</span> </p>
                            <p class="display w160">主演: ${film.director}</p>
                            <p><span style="color: orange">${film.nation}</span> | ${film.runtime} 分钟</p>
                        </div>
                    </div>
                    <a class="abs" style="right:0" href=" ">
                        <button class="bg-fff h20 w50 orangr mg-r-18"
                            style="height:24px; border: 1px solid#ef7131; border-radius: 3px;">购票</button>
                    </a>
                </a>
            </div>`
      htmlStr += str
    }
    var $list = document.querySelector('.list')
    $list.innerHTML = htmlStr
  },

• `` 模板字符串 里面可以存放html代码和变量，经常用于渲染页面
• 在模板字符串里，我们用后台的数据放到对应内容标签里用${变量}
• ${xx}在模板字符串``下才有用所以搭配使用

二、if分支语句

• 在项目里我们经常用到if语句，当用户登录怎样，没登录又怎样，很方便
  这是获取后台数据部分的代码
• 在渲染列表里我们经常用${xx}来填充节点，达到渲染的效果

getFilmList: function () {
    var url = 'http://132.232.87.95:3000/api/film/getList?page=1'
    axios(url).then(function (res) {
      if (res.data.status == 0) {
        home.renderList(res.data.films)
      } else {
        alert(res.data.msg)
      }
    // 请求成功之后,执行这个函数
    }).catch(function (error) {
      alert(error)
    // 请求失败之后,执行这个函数
    })
  }

• axios：这里我们用到了axios来获取后台接口的数据
  需要注意的是，先了解接口结构以及里面的数据层，否者即使获取到了也用不了
• 然后在这里我们就使用了if分支语句进行了一些判断，因为先了解到数据接口里的结构层次，然后我们做一个判断，如果成功就执行我们的渲染函数，并把数据传给函数
• 获得数据后有些需要特殊处理的，单独建立一个函数来处理，而if语句最常用

// 拼接演员列表字符串
  actorsToString: function (actors) {
    if (!actors) {
      return ''
    } else {
      var str = ''
      for (var i = 0;i < actors.length;i++) {
        var actor = actors[i]
        str += actor.name + ' '
      }
      return str
    }

• 上面这个拼接演员列表字符串的函数，我们可以把它当成一个封装好的函数，需要拼接演员列表字符串的时候直接拿来用就可以了

三、日期函数的使用

• 日期函数 new Date()

格式化日期  time为毫秒数
formatDate: function(time) {
    var date = new Date(time);
    var Y = date.getFullYear();
    var M = orderDetails.addZero(date.getMonth() + 1);
    var D = orderDetails.addZero(date.getDate());
    var h = orderDetails.addZero(date.getHours());
    var m = orderDetails.addZero(date.getMinutes());
    var s = orderDetails.addZero(date.getSeconds());
    // var dayStr = `${Y}-${M}-${D} ${h}:${m}:${s}`
    var dayStr = `${Y}-${M}-${D} ${h}:${m}:${s}`;
    return dayStr;
  },

• 根据毫秒数返回星期

getWeekDay: function(time) {
    var date = new Date(time);
    var day = date.getDay();
    var week = {
      "0": "星期日",
      "1": "星期一",
      "2": "星期二",
      "3": "星期三",
      "4": "星期四",
      "5": "星期五",
      "6": "星期六"
    };
    return week[day];
  },

四、页面跳转传参

• 传：渲染的时候给链接后面加上如<a href="orderDetails.html?oderId=${orderId}">

`<a href="orderDetails.html?oderId=${orderId}">`
模板字符串中通过在路径后面加?参数名=${参数}实现跳转传参

• 接收：在一开始的时候在开头函数里通过location.href获取网址然后截取字符串

// 使用location.href 获取当前网址
    var url = location.href;

    // 从字符串url里提取(截取)orderId
    // 使用indexOf找到=的位置(下标) 的后一位
    var index = url.indexOf('=') + 1;

    // 使用slice截取从=后的一位开始后面全部的字符串
    var orderId = url.slice(index);

    orderDetails.getDetails(orderId);
    将截取的参数给获取后台数据的函数

五、正则表达式在项目里的应用

• 通过正则表达式可以验证电话号码格式以及其他的格式然后结合if分支语句进行判断然后执行对应的函数

// 设置电话号码输入格式
  isKo: function() {
    var phone = document.querySelector("#phone").value;
    if (0 <= phone.length <= 11) {
      if (phone.length == 11) {
        if (/^1[34578]\d{9}$/.test(phone) == false) {
          alert("输出格式错误,请输入正确的电话号码");
        } else {
          login.getCode();
        }
      } else {
        alert("电话号码是11位数");
      }
    } else {
      alert("电话号码是11位数");
    }
  },

• 正则表达式结合函数replace实现字符串替换的功能

需求：根据接口判断是否登录，然后把接口里的号码赋给phone然后以123*****1234的形式显示
goLogin: function () {
        // document.querySelector('#name').innerText=phone;
        var url = 'http://132.232.87.95:3000/api/user/getUserInfo';
        // 登入接口
        axios.get(url).then(function (res) {
            if (res.data.status === 0) {
            // 判断是否登录
                var $phone = document.querySelector('#phone');
                var phone = res.data.userinfo.mobilePhoneNumber;
          // 赋值给phone
                var phoneStr = phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2');
        // 替换成123*****1234的形式 
                // 填充标签
                $phone.innerText = phoneStr;
            } else {
                var $phone = document.querySelector('#phone');
                $phone.innerText = '立即登录';
            }
        }).catch(function () {
             
         })
    }

• (/^(\d{3})\d{4}(\d{4})1****1****1表示第一组$2表示第二组,以前3个数字后4个数字中间用****代替，最后效果就是123*****1234

六、发送验证码时的操作细节

• 倒计时 一般用input标签做

getCode: function() {
    // 获取节点
    var str = document.querySelector("#getcode");
    // 调用函数之后不能在被点击仅限于input标签
    // disabled 的意思是禁止点击
    str.disabled = true;
    // 设置定时器变量名为timer这些基本都是用这个单词的
    var timer = setInterval(function() {
      // 给获取节点里面的value值赋值，赋的值是num自减这样就达到了倒计时的效果
      str.value = --login.num;
      // 设置在数字为零的时候停止
      if (login.num === 0) {
        clearInterval(timer);
        // 为零的时候input的value值变为重新发送
        str.value = "重新发送";
        // 这个时候num的值为0，再次点击会从零开始，所以要重置一下num的值
        login.num = 60;
        // 调用函数之后能在被点击仅限于input标签
        str.disabled = false;
      }
    }, 1000);

• 作用域

直接在script下的变量为全局变量
/* 声明全局变量
        全局变量，全局都可以使用引用的变量
    */
    var man = {
        name : '勇'
    }
<!-- 把全局变量放在头部，这样的话下面的js才能访问到 
        代码的顺序从上到下
    -->
// 函数里的变量为局部变量 
// add(){}里的变量为局部变量
    function add(){
        var a = 10;
        var b = 5; 
        var sum = a+b;
        console.log(sum);
        // 局部作用域，局部变量，里面可以访问
    }
局部变量外部访问不到，访问就得调用函数

2.全局作用域，在全局作用域下声明的变量是全局变量，在script标签里面（子级）声明的变量为全局变量
    /*自我总结：通过全局变量可以方便js代码的处理，全局变量的可以放在
    头部按顺序来排，(类似这个用到卖座项目里面的话，后台数据的代码由于是属于全局变量
    可以放在home.html的body上面，这样一来home.js文件里的代码块就可以很好的管理)*/

3.局部作用域和局部变量
    // 函数就是一个局部作用域，里面的变量为局部变量
    a.函数内部可以访问函数外部的变量
    b.函数外部不可以访问函数内部的变量
    c.多个作用域用作用域链进行链接
    d.没有块级作用域(区分作用域是以函数作为区分条件)