JS在项目里怎么应用

前言

• 在实际项目里面，我们使用面向对象编程进行编程
• 在面向对象编程里面我们大致分为四个部分(个人分法)
• 开头、获取数据、渲染、方法函数
• 开头：一开始就会执行的代码放在开头里面比如一开始便要获取数据的方法
• 获取数据我们统一放在一个对象里面
• 渲染：使用后台数据渲染页面
• 方法函数:渲染页面时需要单个处理时写的方法放在一个对象里面

原生JS项目大致分层

var Object ={
    // 开头
    created(){
        
    },
    // 渲染
    renderList(){

    },
    // 数据获取
    getList(){

    },
    // 处理方法函数
    setList(){

    }
}
一开始便运行开头
Object.created();

• js原生项目实际应用

• 一般页面的渲染

// 定义一个对象,负责整个页面的交互
/**
 * 页面执行顺序
 * 1. 拿数据
 */

var home = {
  // 入口方法,执行页面开始的操作
  created() {
    home.getFilmList()
  },

  // 渲染列表
  renderList: function (films) {
    var htmlStr = ''
    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
  },

  // 拼接演员列表字符串
  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
    }
  },

  // 获取列表数据
  getFilmList: function () {
    var url = 'http://132.232.87.95:3000/api/film/getList?page=1'
    axios(url