<import src="../stars/stars-template.wxml" />
<view class="md-container">
  <image class="head-img" src="{{movie.movieImg}}" mode="aspectFill" />
  <view class="head-img-hover" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg">
    <text class="main-title">{{movie.title}}</text>
    <text class="sub-title">{{movie.country + " . " + movie.year}}</text>
    <view class="like">
      <text class="highlight-font">{{movie.wishCount}}</text>
      <text class="plain-font">人喜歡</text>
      <text class="highlight-font">{{movie.commentCount}}</text>
      <text class="plain-font">條評(píng)論</text>
    </view>
  </view>
  <image class="movie-img" src="{{movie.movieImg}}" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"></image>
  <view class="summary">
    <view class="original-title">
      <text>{{movie.originalTitle}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">評(píng)分</text>
      <template is="starsTemplate" data="{{stars:movie.stars, score:movie.score}}" />
    </view>
    <view class="flex-row">
      <text class="mark">導(dǎo)演</text>
      <text>{{movie.director.name}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">影人</text>
      <text>{{movie.casts}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">類(lèi)型</text>
      <text>{{movie.generes}}</text>
    </view>
  </view>
  <view class="hr"></view>
  <view class="synopsis">
    <text class="synopsis-font">劇情簡(jiǎn)介</text>
    <text class="summary-content">{{movie.summary}}</text>
  </view>
  <view class="hr"></view>
  <view class="cast">
    <text class="cast-font"> 影人</text>
    <scroll-view class="cast-imgs" scroll-x="true" style="width:100%">
      <block wx:for="{{movie.castsInfo}}" wx:for-item="item">
        <view class="cast-container">
          <image class="cast-img" src="{{item.img}}"></image>
          <text class="cast-name">{{item.name}}</text>
        </view>
      </block>
    </scroll-view>
  </view>
</view>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53

在ES6前， 前端就使用RequireJS或者seaJS實(shí)現(xiàn)模塊化， requireJS是基于AMD規(guī)范的模塊化庫(kù)， 而像seaJS是基于CMD規(guī)范的模塊化庫(kù)， 兩者都是為了為了推廣前端模塊化的工具， 更多有關(guān)AMD和CMD的區(qū)別， 后面參考給了幾個(gè)鏈接；現(xiàn)在ES6自帶了模塊化， 也是JS第一次支持module， 在很久以后 ，我們可以直接作用import和export在瀏覽器中導(dǎo)入和導(dǎo)出各個(gè)模塊了， 一個(gè)js文件代表一個(gè)js模塊；現(xiàn)代瀏覽器對(duì)模塊(module)支持程度不同， 目前都是使用babelJS， 或者Traceur把ES6代碼轉(zhuǎn)化為兼容ES5版本的js代碼。

ES6的模塊化的基本規(guī)則或特點(diǎn)：

1：每一個(gè)模塊只加載一次， 每一個(gè)JS只執(zhí)行一次， 如果下次再去加載同目錄下同文件，直接從內(nèi)存中讀取。 一個(gè)模塊就是一個(gè)單例，或者說(shuō)就是一個(gè)對(duì)象；

2：每一個(gè)模塊內(nèi)聲明的變量都是局部變量， 不會(huì)污染全局作用域；

3：模塊內(nèi)部的變量或者函數(shù)可以通過(guò)export導(dǎo)出；

4：一個(gè)模塊可以導(dǎo)入別的模塊

var util = require('../../../../utils/util.js')
class Movie {
    constructor(url) {
        this.url = url;
    }

    getMovieData(cb) {
        this.cb = cb;
        util.http(this.url, this.processDoubanData.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);
    }
}

export { Movie }