小程序中的ES6 Class

来源：互联网发布：python 获取日期编辑：程序博客网时间：2024/06/13 06:03

movie-detail.js原始写法

var app = getApp();//引用var util = require('../../../utils/utils.js')//引用数据请求的公共函数Page({  //初始化数据  data:{   movie:{}  },//es6方式 module,class,promise,=>  onLoad:function(options){    var movieId = options.id;    var url = app.globalData.doubanBase+ "/v2/movie/subject/"+movieId;util.http(url,this.processDoubanData,"GET","json");  },  //数据处理函数  processDoubanData:function(data){    //对数据源判空    if(!data){      return;    }    //定义一个空的js对象（导演director）为什么单独处理director，因为数据这个地方总是为空，其他数据有地方为空时，也要做相应处理    var director = {      avatar:"",      name:"",      id:""    }    //数据容错    if(data.directors[0] !=null){      if(data.directors[0].avatars !=null){        director.avatar = data.directors[0].avatars.large      }      director.name = data.directors[0].name;      director.id = data.directors[0].id;    }     var movie = {      movieImg :data.images ? data.images.large:"",      country:data.countries[0],      title:data.title,      originalTitle:data.original_title,      wishCount:data.wish_count,      commentCount:data.comments_count,      year:data.year,      generes:data.genres.join("、"),    stars:util.convertToStarsArray(data.rating.stars),      score:data.rating.average,      director:director,      casts:util.convertToCastString(data.casts),      castsInfo:util.convertToCastInfos(data.casts),      summary:data.summary    }    //数据绑定    this.setData({      movie:movie    })  },  // 查看图片  viewMoviePostImg:function(event){    var src =event.currentTarget.dataset.src;    wx.previewImage({      current: src, // 当前显示图片的链接，不填则默认为 urls 的第一张      urls: [src],      success: function(res){        // success      },      fail: function(res) {        // fail      },      complete: function(res) {        // complete      }    })  }})

Es6写法，新建Movie.js类

var util = require('../../../../utils/utils.js');// 创建Movie对象class Movie {    //构造函数    constructor(url) {        this.url = url;    }    //定义两个成员变量getMovieData,processDoubanData    getMovieData(cb) {        this.cb = cb;        util.http(this.url, this.processDouban.bind(this));    }    processDoubanData(data) {        if (!data) {            return;        }        var director = {            avatar: "",            name: "",            id: ""        }        //数据容错        if (data.directors[0] != null) {            if (data.directors[0].avatars != null) {                director.avatar = data.directors[0].avatars.large            }            director.name = data.directors[0].name;            director.id = data.directors[0].id;        }        var movie = {            movieImg: data.images ? data.images.large : "",            country: data.countries[0],            title: data.title,            originalTitle: data.original_title,            wishCount: data.wish_count,            commentCount: data.comments_count,            year: data.year,            generes: data.genres.join("、"),            stars: util.convertToStarsArray(data.rating.stars),            score: data.rating.average,            director: director,            casts: util.convertToCastString(data.casts),            castsInfo: util.convertToCastInfos(data.casts),            summary: data.summary        }        this.cb(movie);    }}//class对象是个模块，使用export把对象输出出去export{Movie}

movie-detail.js更改之后的代码

import {Movie} from 'class/Movie.js'    //引入类var app = getApp();//引用Page({  //初始化数据  data:{   movie:{}  },//es6方式 module,class,promise,=>  onLoad:function(options){    var movieId = options.id;    var url = app.globalData.doubanBase+ "/v2/movie/subject/"+movieId;    var movie = new Movie(url);    //class类Movie的方法getMovieData，接收一个回调函数，因为回调里面有http请求是异步的，所以要用这种方法    //假如回调是同步的，可以使用下面的方法直接取值    // var movieData= movie.getMovieData();    //function(movie)中的movie是getMovieData方法内处理过返回的movie    var that =this;    movie.getMovieData(function(movie){      that.setData({        movie:movie      })    })  },  // 查看图片  viewMoviePostImg:function(event){    var src =event.currentTarget.dataset.src;    wx.previewImage({      current: src, // 当前显示图片的链接，不填则默认为 urls 的第一张      urls: [src],    })  }})

0 0