豆瓣电影：SPA

一、项目介绍

使用原生JS和Jquery做了一个移动端豆瓣电影单页面应用,通过点击切换Top250、北美排行榜、电影搜索三个面板。
Top250面板实现了触底懒加载数据，使用Ajax新增列表项目，数据加载中有Loading动画提示，所有数据加载完后显示底部盒子，点击可回到顶部。电影搜索面板通过<input>标签接收用户搜索内容，通过click()、keyup()方法实现单击搜索按钮或敲打enter键触发事件函数，使用Ajax发送请求处理数据。
使用html模板利用jQuery(html)创建DOM元素，提取公共方法提高了代码简洁性和可复用性。

二、所涉知识

(一)自适应网页设计

在网页代码的头部，加入一行viewport元标签。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
参考：自适应网页设计

(二)JavaScript

(1)join()

join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。
$node.find('.introduction .geners').text(movie.genres.join('、'));

(2)map()

map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。
$node.find('.introduction .directors').text(movie.directors.map(v => v.name).join('、'));

(3)forEach()

forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。

data.subjects.forEach((movie) => {
  movie = movie.subject ? movie.subject : movie; 
  this.$ul.append(utils.createElementItem(movie));
});

(4)setTimeout()

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

_this.clock = setTimeout(function(){
  if (_this.$container.height() - 400 <= _this.$top250.height() + _this.$top250.scrollTop()) {
    _this.renderData();
  }
},100)

(5)clearTimeout()

setTimeou返回一个整数值，表示计数器编号。将该整数传入clearTimeout函数，就可以取消对应的定时器。
if (_this.clock) clearTimeout(_this.clock);

(三)jQuery

1.jQuery.ajax( [settings ] )

执行一个异步的HTTP（Ajax）的请求。

常用参数：

url (默认: 当前页面地址)，类型: String，发送请求的地址。
type (默认: 'GET')，类型: String，请求方式 ("POST" 或 "GET")。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。
data，类型: [Object, String]，发送到服务器的数据，对象必须为"{键:值}"格式。
dataType，类型: String，预期服务器返回的数据类型。

jqXHR 对象：

$.ajax() 返回XMLHttpRequest（jqXHR）对象，该对象是浏览器的原生的XMLHttpRequest对象的一个超集。
从 jQuery 1.5 开始，$.ajax()返回的jqXHR对象 实现了 Promise 接口, 使它拥有了 Promise 的所有属性，方法和行为。
this在所有的回调中的引用，是这个对象在传递给$.ajax的设置中上下文；如果没有指定context（上下文），this 引用的是Ajax设置的本身。

• jqXHR.done(function(data, textStatus, jqXHR) {})：
  一个可供选择的 success 回调选项的构造函数，.done()方法取代了的过时的jqXHR.success()方法。
• jqXHR.fail(function(jqXHR, textStatus, errorThrown) {})：
  一种可供选择的 error 回调选项的构造函数，.fail()方法取代了的过时的.error()方法。
• jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { })：
  一种可供选择的 complete 回调选项的构造函数，.always()方法取代了的过时的.complete()方法。在响应一个成功的请求后，该函数的参数和.done()的参数是相同的：data, textStatus, 和 jqXHR 对象；对于失败的请求，参数和.fail()的参数是相同的：jqXHR 对象, textStatus, 和 errorThrown。
• jqXHR.then(function(data, textStatus, jqXHR) {}, function(jqXHR, textStatus, errorThrown) {})：
  包含了 .done() 和 .fail()方法的功能，（从 jQuery 1.8 开始）允许底层被操纵。

    $.ajax({
            url: 'https://api.douban.com/v2/movie/top250',
            data: {
                start: _this.index,
                count: _this.count,
            },
            dataType: 'jsonp',
        }).done((ret) => {
            this.index += this.count;
            if (this.index > ret.total ) this.isOver = true;
            this.setData(ret);
        }).fail(function(){
            alert('获取数据失败');
        }).always(() => {
            this.isLoading = false;
            this.$iconLoading.css('display','none');
        });

2. jQuery()

CSS选择器作为参数

jQuery()本质上是一个构造函数，主要作用是返回jQuery对象的实例，简写为$()。比如，var listItems = $("li");表面上是选中li元素，实际上是返回对应于li元素的jQuery实例。因为只有这样，才能在DOM对象上使用jQuery提供的各种方法。
$node.find('a').attr('href',movie.alt);

HTML字符串作为参数

如果直接在jQuery构造函数中输入HTML字符串，返回的也是jQuery实例。它与从CSS选择器生成的jQuery实例完全一样，唯一的区别就是，它对应的DOM结构不属于当前文档。

var tpl =
  `<div class="iconfont icon-loading"></div> 
   <div class="bottom">
     <a class="returnTop" href="#">回到顶部</a>
   </div> `
this.$container.append($(tpl));

3.jQuery构造函数返回的结果集

jQuery的核心思想是“先选中某些网页元素，然后对其进行某种处理”（find something, do something），也就是说，先选择后处理，这是jQuery的基本操作模式。所以，绝大多数jQuery操作都是从选择器开始的，返回一个选中的结果集。

(1)index()

index() 方法返回指定元素相对于其他指定元素的 index 位置。这些元素可通过 jQuery 选择器或 DOM 元素来指定。
获得第一个匹配元素相对于其同胞元素的 index 位置：$(selector).index()
获得元素相对于选择器的 index 位置：$(selector).index(element)
_this.$panels.eq($(this).index()).show().siblings().hide();

(2)eq()

如果想要在结果集取出一个jQuery对象的实例，不需要取出DOM对象，则使用eq方法，它的参数是实例在结果集中的位置（从0开始）。
_this.$panels.eq($(this).index()).show().siblings().hide();

4. 结果集的过滤方法

选择器选出一组符合条件的网页元素以后，jQuery提供了许多方法，可以过滤结果集，返回更准确的目标。

(1)siblings()，nextAll()，prevAll()

siblings方法返回当前元素的所有同级元素，nextAll方法返回当前元素其后的所有同级元素，prevAll方法返回当前元素前面的所有同级元素。
$(this).addClass('active').siblings().removeClass('active');

(2)closest()，find()

closest方法返回当前元素，以及当前元素的所有上级元素之中，第一个符合条件的元素。find方法返回当前元素的所有符合条件的下级元素。
$node.find('a').attr('href',movie.alt);

5. DOM相关方法

许多方法可以对DOM元素进行处理。

(1)html()和text()

html()返回该元素包含的HTML代码，text()返回该元素包含的文本。jQuery的许多方法都是取值器（getter）与赋值器（setter）的合一，即取值和赋值都是同一个方法，不使用参数的时候为取值器，使用参数的时候为赋值器。
html()和text()如果没有参数，就会当作取值器使用，取回结果集的第一个元素所包含的内容。如果对这两个方法提供参数，就是当作赋值器使用，修改结果集所有成员的内容，并返回原来的结果集，以便进行链式操作。
$node.find('.introduction .title').text(movie.title);

(2)addClass()，removeClass()，toggleClass()

addClass()用于添加一个类，removeClass()用于移除一个类，toggleClass()用于切换一个类（如果无就添加，如果有就移除）。
$(this).addClass('active').siblings().removeClass('active');

(3)css()

css()用于获取、改变css的值。css()的参数是css属性名，CSS属性名的CSS写法和DOM写法都可以接受，比如font-size和fontSize都行。
$panel.find('.bottom').css('display','block');

(4)val()

val()返回结果集第一个元素的值，或者设置当前结果集所有元素的值。
_this.keyword = _this.$input.val();

(5)attr()和prop()

首先，这里要区分两种属性。一种是网页元素的属性，比如a元素的href属性、img元素的src属性，这要使用attr()读写。另一种是DOM元素的属性，比如tagName、nodeName、nodeType等等，这要使用prop()读写。
<input type="checkbox" checked="checked" />
对于checked属性，attr()读到的是checked，prop()读到的是true。可以看到，attr()读取的是网页上该属性的值，而prop()读取的是DOM元素的该属性的值，根据规范，element.checked应该返回一个布尔值。所以，判断单选框是否选中，要使用prop()

$node.find('a').attr('href',movie.alt);
$node.find('.cover img').attr('src',movie.images.small);

(6)removeAttr()和removeProp()

removeAttr()移除某个HTML属性，removeProp()移除某个DOM属性。

(7)empty()

empty() 从被选元素移除所有内容，包括所有文本和子节点。
_this.$ul.empty();

(8)data()

data()用于在一个DOM对象上储存数据。

6.添加、复制和移动网页元素的方法

jQuery方法提供一系列方法，可以改变元素在文档中的位置。

（1）append方法，appendTo方法

append方法将参数中的元素插入当前元素的尾部，appendTo方法将当前元素插入参数中的元素尾部。
this.$container.append($(tpl));

（2）prepend方法，prependTo方法

prepend方法将参数中的元素，变为当前元素的第一个子元素。如果prepend方法的参数不是新生成的元素，而是当前页面已存在的元素，则会产生移动元素的效果。
prependTo方法将当前元素变为参数中的元素的第一个子元素。

（3）after方法，insertAfter方法

after方法将参数中的元素插在当前元素后面，insertAfter方法将当前元素插在参数中的元素后面。

（4）before方法，insertBefore方法

before方法将参数中的元素插在当前元素的前面，insertBefore方法将当前元素插在参数中的元素的前面。

（5）wrap方法，wrapAll方法，unwrap方法，wrapInner方法

wrap方法将参数中的元素变成当前元素的父元素，wrap方法的参数还可以是一个函数。wrapAll方法为结果集的所有元素，添加一个共同的父元素。unwrap方法移除当前元素的父元素。wrapInner方法为当前元素的所有子元素，添加一个父元素。

（6）clone方法

clone方法克隆当前元素。对于那些有id属性的节点，clone方法会连id属性一起克隆。所以，要把克隆的节点插入文档的时候，务必要修改或移除id属性。

（7）remove方法，detach方法，replaceWith方法

remove方法移除并返回一个元素，取消该元素上所有事件的绑定。detach方法也是移除并返回一个元素，但是不取消该元素上所有事件的绑定。replaceWith方法用参数中的元素，替换并返回当前元素，取消当前元素的所有事件的绑定。

7. 动画效果方法

jQuery提供一些方法，可以很容易地显示网页动画效果。但是，总体上来说，它们不如CSS动画强大和节省资源，所以应该优先考虑使用CSS动画。
如果将jQuery.fx.off设为true，就可以将所有动画效果关闭，使得网页元素的各种变化一步到位，没有中间过渡的动画效果。

动画效果的简便方法

jQuery提供以下一些动画效果方法。
show：显示当前元素。
hide：隐藏当前元素。
toggle：显示或隐藏当前元素。
_this.$panels.eq($(this).index()).show().siblings().hide();

7. 事件处理

(1)事件绑定的简便方法

jQuery提供一系列方法，允许直接为常见事件绑定回调函数：
click，keypress，keyup，keyup，mouseover，mouseout，mouseenter，mouseleave，hover，scroll，focus，blur，resize
如果不带参数调用这些方法，就是触发相应的事件，从而引发回调函数的运行。需要注意的是，通过这种方法触发回调函数，将不会引发浏览器对该事件的默认行为。比如，对a元素调用click方法，将只触发事先绑定的回调函数，而不会导致浏览器将页面导向href属性指定的网址。
hover方法需要特别说明，它接受两个回调函数作为参数，分别代表mouseenter和mouseleave事件的回调函数。
注意，在回调函数内部，this关键字指的是发生该事件的DOM对象。为了使用jQuery提供的方法，必须将DOM对象转为jQuery对象，因此写成$(this)。

$panel.find('.returnTop').click(function(){
  $panel.scrollTop(0);
});
this.$input.keyup(function(e){
  if(e.keyCode === 13) {
    _this.$button.click();
  };
});
this.$top250.scroll(function(){
  if (_this.clock) clearTimeout(_this.clock);
  _this.clock = setTimeout(function(){
    if (_this.$container.height() - 400 <= _this.$top250.height() + _this.$top250.scrollTop()) {
      _this.renderData();
    }
  },100)
});

(2)on方法，trigger方法，off方法

除了简便方法，jQuery还提供事件处理的通用方法。

on方法是jQuery事件绑定的统一接口。

事件绑定的那些简便方法，其实都是on方法的简写形式。on方法接受两个参数，第一个是事件名称，第二个是回调函数。
on方法允许一次为多个事件指定同样的回调函数。

$('input[type="text"]').on('focus blur', function (){
  console.log('focus or blur');
});

on方法还可以为当前元素的某一个子元素，添加回调函数。
以下代码为ul的子元素li绑定click事件的回调函数。采用这种写法时，on方法接受三个参数，子元素选择器作为第二个参数，夹在事件名称和回调函数之间。
这种写法有两个好处。首先，click事件还是在ul元素上触发回调函数，但是会检查event对象的target属性是否为li子元素，如果为true，再调用回调函数。这样就比为li元素一一绑定回调函数，节省了内存空间。其次，这种绑定的回调函数，对于在绑定后生成的li元素依然有效。

$('ul').on('click', 'li', function (e){
  console.log(this);
});

on方法还允许向回调函数传入数据。
以下代码在发生click事件之后，会通过event对象的data属性，在控制台打印出所传入的数据（即“张三”）。

$("ul" ).on("click", {name: "张三"}, function (event){
    console.log(event.data.name);
});

trigger方法

trigger方法用于触发回调函数，它的参数就是事件的名称。以下代码触发li元素的click事件回调函数。与那些简便方法一样，trigger方法只触发回调函数，而不会引发浏览器的默认行为。
$('li').trigger('click')

off方法

off方法用于移除事件的回调函数，以下代码移除li元素所有的click事件回调函数。
$('li').off('click')

(3)event对象

当回调函数被触发后，它们的参数通常是一个事件对象event。以下代码的回调函数的参数e，就代表事件对象event。

$(document).on('click', function (e){
    // ...
});

event对象有以下属性：
type：事件类型，比如click。
which：触发该事件的鼠标按钮或键盘的键。
target：事件发生的初始对象。
data：传入事件对象的数据。
pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角）。
event对象有以下方法：
preventDefault：取消浏览器默认行为。
stopPropagation：阻止事件向上层元素传播。

(四)ES6

箭头函数（arrow）

(1)定义：

ES6允许使用“箭头”（=>）定义函数。如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

(2)实例：回调函数的简化

箭头函数的一个用处是简化回调函数。

(3)注意点：

• 函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。
• 不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
• 不可以使用arguments对象，该对象在函数体内不存在。

data.subjects.forEach((movie) => {
  movie = movie.subject ? movie.subject : movie; 
  this.$ul.append(utils.createElementItem(movie));
});

(五)CSS3

CSS Animation

(1)基本用法

首先，CSS Animation需要指定动画一个周期持续的时间，以及动画效果的名称。

div:hover {
  animation: 1s rainbow;
}

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

(2)animation的各项属性

animation 属性是一个简写属性，用于设置六个动画属性：
animation: name duration timing-function delay iteration-count direction;

属性	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

main section .container .icon-loading:before {
    display: inline-block;
    font-size: 34px;
    animation: rotate 1s linear infinite;
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

三、重要方法

(一)公用方法

//准备提示节点
preparePrompt: function() {
    var tpl =
           `<div class="iconfont icon-loading"></div> 
            <div class="bottom">
                <a class="returnTop" href="#">回到顶部</a>
            </div> `
    this.$container.append($(tpl));
},
//创建并设置电影节点
createElementItem: function(movie){
    var tpl = 
            `<li class="item">
                <a href="">
                    <div class="cover">
                        <img src="">
                    </div>
                    <div class="introduction">
                        <h3 class="title"></h3>
                        <p><span class="score"> </span> 分 / <span class="collect"></span> 收藏</p>
                        <p><span class="year"></span> / <span class="geners"></span></p>
                        <p>导演：<span class="directors"></span></p>
                        <p>主演：<span class="casts"></span></p>
                    </div>
                </a>
            </li>`
    var $node = $(tpl);
    $node.find('a').attr('href',movie.alt);
    $node.find('.cover img').attr('src',movie.images.small);
    $node.find('.introduction .title').text(movie.title);
    $node.find('.introduction .score').text(movie.rating.average);
    $node.find('.introduction .collect').text(movie.collect_count);
    $node.find('.introduction .year').text(movie.year);
    $node.find('.introduction .geners').text(movie.genres.join('、'));
    $node.find('.introduction .directors').text(movie.directors.map(v => v.name).join('、'));
    $node.find('.introduction .casts').text(movie.casts.map(v => v.name).join('、'));
    return $node;
},
//设置数据
setData: function(data){
    data.subjects.forEach((movie) => {
        movie = movie.subject ? movie.subject : movie; 
        this.$ul.append(utils.createElementItem(movie));
    });
},
//展示底部
showBottom: function($panel){
    $panel.find('.bottom').css('display','block');
},
//回到顶部
returnTop: function($panel) {
    $panel.find('.returnTop').click(function(){
        $panel.scrollTop(0);
    });
},

(二)TOP250方法

//处理触底加载
this.$top250.scroll(function(){
    if (_this.clock) clearTimeout(_this.clock);
    _this.clock = setTimeout(function(){
        if (_this.$container.height() - 400 <= _this.$top250.height() + _this.$top250.scrollTop()) {
            _this.renderData();
        }
    },100)
});
//获取数据
getData: function(){
    var _this = this;
    this.$iconLoading = this.$top250.find('.icon-loading');
    this.isLoading = true;
    this.$iconLoading.css('display','block');
    //发送请求
    $.ajax({
        url: 'https://api.douban.com/v2/movie/top250',
        data: {
            start: _this.index,
            count: _this.count,
        },
        dataType: 'jsonp',
    }).done((ret) => {
        this.index += this.count;
        if (this.index > ret.total ) this.isOver = true;
        this.setData(ret);
    }).fail(function(){
        alert('获取数据失败');
    }).always(() => {
        this.isLoading = false;
        this.$iconLoading.css('display','none');
    });
},

(三)搜索方法

//获取数据
getData: function(callback){
    if (this.isLoading) return;
    var _this = this;
    this.$iconLoading = this.$search.find('.icon-loading');
    this.$iconLoading.css('display','block');
    this.isLoading = true;
        $.ajax({
        url: 'https://api.douban.com/v2/movie/search',
        data: {
            q: _this.keyword
        },
        dataType: 'jsonp',
    }).done((ret) => {
        this.setData(ret);
        callback(this.$search);
    }).fail(function(){
        alert('获取数据失败');
    }).always(() => {
        this.isLoading = false;
        this.$iconLoading.css('display','none');
    })  
},

(四)面板方法

//处理tab切换
bind: function(){
    let _this = this;
    this.$tabs.click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        _this.$panels.eq($(this).index()).show().siblings().hide();
    }); 
},

源码地址
预览地址