慕课网

第1章效果预览与介绍
视频：1-1 课程简介(03:16)

第2章设计思路与蕴涵的知识点
视频：2-1 整体介绍(01:40)
视频：2-2 编程思路(02:15)

第8章最终效果与总结
编程：8-1 最终效果与总结

代码封装

初学着写JS可以说都是毫无章法可言的，基本上是想到什么就写什么，就是一个接一个的函数function，遇到重复的还得copy，如果一不小心函数重名了，还真不知道从何开始查找错误，因为大家总是用面向过程的编程思想来写JS代码。当然也不是错误，只是从长远的发展角度来说，我们更希望代码是易维护、易扩展的也是程序员经常挂在嘴边的口头禅"高内聚低耦合"。

基础性的东西这里不过多讨论。以圣诞主题为例，拥有3个场景页面，在设计上，我会将每一个场景当作一个独立的"场景对象"，场景内部都封装了各自的子对象，对象与对象之间通过接口调用。简单的说就是将行为封装分布在各个对象中，并让这些对象自己各自负责自己的行为，这也是面向对象设计的一个优点。

就拿页面切换的效果来说，场景A需要切换到场景B，那么元素A不需要关心页面是怎么切换的，它只能要调用到一个接口方法能让页面切换就行了

基于这样的理论，我们就开始简单的改造整个代码结构这块

设计3个独立的JS文件分别是page-a.js、page-b.js、page-c.js，分别对应了3个场景类，把每一个场景的内容封装到每一个场景类中

然后在三个场景类之间通过接口去调用，比如切换页面，所以需要创建一个"中介"对象(christmas.js)充当，接口分配任务。

JavaScript的的类的概念也不是那么"正宗的"，同时也没有规范上的抽象类与接口的支持，所以很大程度上实现封装都是靠闭包去模拟，具体可以参考右边代码区域

任务

?不会了怎么办

index.html
christmas.js
pageA.js
pageB.js
pageC.js
common.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>圣诞主题</title> <link rel='stylesheet' href='common.css' /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script src="pageC.js"></script> <script src="pageB.js"></script> <script src="pageA.js"></script> <script src="christmas.js"></script> </head> <body> <section class="container">  <section class="page-a bg-adaptive"> </section>  <section class="page-b bg-adaptive"> </section>  <section class="page-c bg-adaptive"> </section> </section> 选择页面： <select id="choose"> <option value="page-a" selected="">1</option> <option value="page-b">2</option> <option value="page-c">3</option> </select> <script type="text/javascript"> /** * 自适应页面大小 * @param {[type]} doc [description] * @param {[type]} win [description] * @return {[type]} [description] */ var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { //自适应设置容器高度 var container = document.querySelector(".container") //原始比例 var proportion = 900 / 1440; container.style.height = container.clientWidth * proportion + "px"; }; window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); </script> </body> </html>

/** * 慕课网特制 * 圣诞主题效果 * @type {Object} */ /** * 切换页面 * 模拟镜头效果 * @return {[type]} [description] */ function changePage(element,effect,callback){ element .addClass(effect) .one("animationend webkitAnimationEnd", function() { callback && callback(); }) } /** * 中间调用 */ var Christmas = function() { //页面容器元素 var $pageA = $(".page-a"); var $pageB = $(".page-b"); var $pageC = $(".page-c"); //切换切换 $("#choose").on("change", function(e) { //页面名称 var pageName = e.target.value; switch (pageName) { case "page-b": //切换到页面B，然后捕获到切换后的通知 changePage($pageA, "effect-out", function() { new pageB() }) break; case "page-c": //切换到页面C，然后捕获到切换后的通知 changePage($pageC, "effect-in", function() { new pageC() }) break; } }) }; $(function() { //圣诞主题效果，开始 Christmas() })

function pageA (argument) { alert("页面C") }

function pageB (argument) { alert("页面B") }

function pageC (argument) { alert("页面C") }

*{ margin: 0; padding: 0; } /*body{ width: 100%; height: 100%; }*/ .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .bg-adaptive { background-size: 100% 100%; } .container .page-a { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d07770001790814410901.png"); position: absolute; z-index: 5; } .container .page-b { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d09fa000145a614410901.png"); position: absolute; z-index: 4; } .page-c { width : 100%; height : 100%; background-image: url("http://img1.sycdn.imooc.com//565d0b280001788014410901.png"); position: absolute; z-index: 3; } /** * 页面切换 * 镜头方法 */ .effect-out{ -webkit-animation: effectOut 8s ease-in-out forwards; -webkit-transform-origin:71% 72%; -moz-animation: effectOut 8s ease-in-out forwards; -moz-transform-origin:71% 72%; } @-webkit-keyframes effectOut{ 0% { opacity:1; } 100% { -webkit-transform: scale(20); opacity:0; } } @-moz-keyframes effectOut{ 0% { opacity:1; } 100% { -moz-transform: scale(20); opacity:0; } } .effect-in{ z-index: 15; display: block; opacity:0; -webkit-transform: scale(8); -webkit-animation: effectIn 5s ease-in-out forwards; -webkit-transform-origin:58.5% 73.5%; -moz-transform: scale(8); -moz-animation: effectIn 5s ease-in-out forwards; -moz-transform-origin:58.5% 73.5%; } @-webkit-keyframes effectIn{ 100% { -webkit-transform: scale(1); opacity:1; } } @-moz-keyframes effectIn{ 100% { -moz-transform: scale(1); opacity:1; } }

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

4-3 代码封装

代码封装

任务

写笔记

收藏课程后，能更快找到我哦～