4-4 场景切换
本节编程练习不计算学习进度，请电脑登录imooc.com操作

场景切换

场景用页面的切换都是在每个场景动作结束后自动切换到另一个场景。一般来说在代码设计上尽量不要让不相关的代码耦合，所以场景之间尽量不要直接调用另外一个场景代码。常规的来说，一般抽出到更上层通信了，提供一个统一的接口让应用的不同部分进行通信

这里具体看下右边代码区域christmas.js中的代码

页面类pageA、pageB、pageC都提供一个完成的回调函数，常规来说，因为有依赖所以就会有回调嵌套的问题。对了，可能想起来另一个解决方法 Deferred了，运用的思路其实差不多，但是这里更为直接的我引入了Observer模式

new pageA(function() {
    new pageB(function() {
        new pageC(function() {
            //执行下一个
        })
    })
})

给每个场景对象订阅一个"完成"的事件，然后在每个场景运行结束发派发这个"完成事件"

订阅场景pageA完成事件

observer.subscribe("completeA", function() {
   //做一些是
})

触发场景pageA完成事件

new pageA(function() {
    observer.publish("completeA"); //触发
})

这里其实是一对一的关系，效果还不是很明显，如果是对一多的关系，比如场景完成后，我们可以注册很多的事件

总的来说，观察者模式所做的工作就是在解耦，让耦合的双方都依赖于抽象，而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。

任务

christmas.js中，通过观察者模式的处理，切面的切换都是通过事件通知。

请参考页面A切换到页面B的代码，触发B页面的代码

然后在代码56行处填写页面B切换到页面C的代码，然后触发pageC页面

index.htmlchristmas.jsobserver.jspageA.jspageB.jspageC.jscommon.css 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>圣诞主题</title>
  7.     <link rel='stylesheet' href='common.css' />
  8.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  9.     <script src="observer.js"></script>
  10.     <script src="pageC.js"></script>
  11.     <script src="pageB.js"></script>
  12.     <script src="pageA.js"></script>
  13.     <script src="christmas.js"></script>
  14. </head>
  15.  
  16. <body>
  17.     <section class="container">
  18.         <!-- 第一幅画面 -->
  19.         <section class="page-a bg-adaptive">
  20.         </section>
  21.         <!-- 第二幅画面 -->
  22.         <section class="page-b bg-adaptive">
  23.         </section>
  24.         <!-- 第三幅画面 -->
  25.         <section class="page-c bg-adaptive">
  26.         </section>
  27.     </section>
  28.     <button>点击运行场景切换</button>
  29.     <script type="text/javascript">
  30.     /**
  31.      * 自适应页面大小
  32.      * @param  {[type]} doc [description]
  33.      * @param  {[type]} win [description]
  34.      * @return {[type]}     [description]
  35.      */
  36.     var docEl = document.documentElement,
  37.         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  38.         recalc = function() {
  39.             //自适应设置容器高度
  40.             var container = document.querySelector(".container")
  41.                 //原始比例
  42.             var proportion = 900 / 1440;
  43.             container.style.height = container.clientWidth * proportion + "px";
  44.         };
  45.     window.addEventListener(resizeEvt, recalc, false);
  46.     document.addEventListener('DOMContentLoaded', recalc, false);
  47.     </script>
  48. </body>
  49.  
  50. </html>
  51.  
  1. /**
  2.  * 慕课网特制
  3.  * 圣诞主题效果
  4.  * @type {Object}
  5.  */
  6.  
  7. /**
  8.  * 切换页面
  9.  * 模拟镜头效果
  10.  * @return {[type]} [description]
  11.  */
  12. function changePage(element, effect, callback) {
  13.     element
  14.         .addClass(effect)
  15.         .one("animationend webkitAnimationEnd", function() {
  16.             callback && callback();
  17.         })
  18. }
  19.  
  20.  
  21. /**
  22.  * 中间调用
  23.  */
  24. var Christmas = function() {
  25.     //页面容器元素
  26.     var $pageA = $(".page-a");
  27.     var $pageB = $(".page-b");
  28.     var $pageC = $(".page-c");
  29.  
  30.     //观察者
  31.     var observer = new Observer();
  32.  
  33.     //A场景页面
  34.     new pageA(function() {
  35.         observer.publish("completeA");
  36.     })
  37.     //进入B场景
  38.     observer.subscribe("pageB", function() {
  39.         new pageB(function() {
  40.             observer.publish("completeB");
  41.         })
  42.     })
  43.     //进入C场景
  44.     observer.subscribe("pageC", function() {
  45.         new pageC()
  46.     })
  47.  
  48.  
  49.     //页面A-B场景切换
  50.     observer.subscribe("completeA", function() {
  51.         changePage($pageA, "effect-out", function() {
  52.             observer.publish("pageB");
  53.         })
  54.     })
  55.     //页面B-C场景切换
  56.     //?
  57.  
  58. };
  59.  
  60.  
  61.  
  62.  
  63. $(function() {
  64.     $("button").click(function(){
  65.         //圣诞主题效果，开始
  66.         Christmas()
  67.     })
  68. })
  69.  
  1. /**
  2.  * 事件
  3.  * 观察者模式
  4.  */
  5. var Observer = (function(slice) {
  6.  
  7.     function bind(event, fn) {
  8.         var events = this.events = this.events || {},
  9.             parts = event.split(/\s+/),
  10.             i = 0,
  11.             num = parts.length,
  12.             part;
  13.  
  14.         if (events[event] && events[event].length) return this;
  15.  
  16.         for (; i < num; i++) {
  17.             events[(part = parts[i])] = events[part] || [];
  18.             events[part].push(fn);
  19.         }
  20.         return this;
  21.     }
  22.  
  23.     function one(event, fn) {
  24.         this.bind(event, function fnc() {
  25.             fn.apply(this, slice.call(arguments));
  26.             this.unbind(event, fnc);
  27.         });
  28.         return this;
  29.     }
  30.  
  31.     function unbind(event, fn) {
  32.         var events = this.events,
  33.             eventName, i, parts, num;
  34.  
  35.         if (!events) return;
  36.  
  37.         parts = event.split(/\s+/);
  38.         for (i = 0, num = parts.length; i < num; i++) {
  39.             if ((eventName = parts[i]) in events !== false) {
  40.                 events[eventName].splice(events[eventName].indexOf(fn), 1);
  41.                 if (!events[eventName].length) { //修正没有事件直接删除空数组
  42.                     delete events[eventName];
  43.                 }
  44.             }
  45.         }
  46.         return this;
  47.     }
  48.  
  49.     function trigger(event) {
  50.         var events = this.events,
  51.             i, args, falg;
  52.  
  53.         if (!events || event in events === false) return;
  54.  
  55.         args = slice.call(arguments, 1);
  56.         for (i = events[event].length - 1; i >= 0; i--) {
  57.             falg = events[event][i].apply(this, args);
  58.         }
  59.         return falg; //修正带返回
  60.     }
  61.  
  62.     return function() {
  63.         this.on =
  64.             this.subscribe = bind;
  65.         this.off =
  66.             this.unsubscribe = unbind;
  67.         this.trigger =
  68.             this.publish = trigger;
  69.         this.one = one;
  70.         return this;
  71.     };
  72. })([].slice);
  73.  
  1. function pageA(callback) {
  2.  
  3.     //模拟执行时间
  4. 	setTimeout(function() {
  5.  
  6. 		callback()
  7.  
  8. 	}, 2000)
  9.  
  10. }
  1.  
  2. function pageB (callback) {
  3.  
  4.  
  5.     //模拟执行时间
  6. 	setTimeout(function() {
  7.  
  8. 		callback()
  9.  
  10. 	}, 1000)
  11. }
  1. function pageC(callback) {
  2.  
  3.  
  4. }
  5.  
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4. }
  5.  
  6. /*body{
  7.     width: 100%;
  8.     height: 100%;
  9. }*/
  10.  
  11. .container {
  12.     width: 100%;
  13.     height: 100%;
  14.     position: relative;
  15.     overflow: hidden;
  16. }
  17.  
  18. .bg-adaptive {
  19.     background-size: 100% 100%;
  20. } 
  21.  
  22. .container .page-a {
  23.     width  : 100%;
  24.     height : 100%;
  25.     background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png");
  26.     position: absolute;
  27.     z-index: 5;
  28. }
  29.  
  30. .container .page-b {
  31.     width  : 100%;
  32.     height : 100%;
  33.     background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png");
  34.     position: absolute;
  35.     z-index: 4;
  36. }
  37.  
  38. .page-c {
  39.     width  : 100%;
  40.     height : 100%;
  41.     background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png");
  42.     position: absolute;
  43.     z-index: 3;
  44. }
  45.  
  46.  
  47.  
  48.  
  49. /**
  50.  * 页面切换
  51.  * 镜头方法
  52.  */
  53. .effect-out{
  54.     -webkit-animation: effectOut 8s ease-in-out forwards;
  55.     -webkit-transform-origin:71% 72%;
  56.     -moz-animation: effectOut 8s ease-in-out forwards;
  57.     -moz-transform-origin:71% 72%;
  58.  
  59.  
  60. }
  61. @-webkit-keyframes effectOut{
  62.     0% { opacity:1; }
  63.     100% { -webkit-transform: scale(20); opacity:0; }
  64. }
  65. @-moz-keyframes effectOut{
  66.     0% { opacity:1; }
  67.     100% { -moz-transform: scale(20); opacity:0; }
  68. }
  69.  
  70. .effect-in{
  71.     z-index: 15;
  72.     display: block;
  73.     opacity:0;
  74.     -webkit-transform: scale(8); 
  75.     -webkit-animation: effectIn 5s ease-in-out forwards;
  76.     -webkit-transform-origin:58.5% 73.5%;
  77.     -moz-transform: scale(8); 
  78.     -moz-animation: effectIn 5s ease-in-out forwards;
  79.     -moz-transform-origin:58.5% 73.5%;
  80.  
  81.  
  82. }
  83. @-webkit-keyframes effectIn{
  84.     100% { -webkit-transform: scale(1); opacity:1; }
  85. }
  86. @-moz-keyframes effectIn{
  87.     100% { -moz-transform: scale(1); opacity:1; }
  88. }
下一节