页面切换部分的代码封装，H5+JS+CSS3实现七夕言情教程-慕课网

第8章背景音乐
编程：8-1 HTML5 audio

页面切换部分的代码封装

封装，即隐藏对象的属性和实现细节，仅对外公开接口。

封装的目的是增强安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口，以特定的访问权限来使用类的成员

这个主题案例，我采用的是面向接口编程的写法，简单的说就是将行为封装分布在各个对象中，并让这些对象自己各自负责自己的行为，这也是面向对象设计的一个优点

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

基于这样的理论，我们就开始改造一下页面切换的零碎的代码块

页面布局与切换是一个整体，我们想调用切换的时候，并不关心其内部处理的手段，所以我们只需要提供一个可以调用的接口就可以，新建一个Swipe.js文件，内部定义一个Swipe工厂方法，内部会产生一个swipe的滑动对象，暴露了scrollTo的接口

JavaScript中没有抽象类与接口的支持，所以很大程度上实现封装都是靠闭包去模拟

具体我看看右边代码块Swipe.js的实现与index.html中调用

任务

在31行填入相应代码，通过调用接口让页面滚动

swipe.scrollTo($("#content").width() * 2, 5000);

?不会了怎么办

index.html
style.css
Swipe.js

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
* {
    padding: 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
/////////
//页面滑动 //
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

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

问答
评论
笔记
资料下载
代码

全部精华我要发布

为什么一封装了运行页面效果就变了，三个页面都跑一起了，而且之前实现的都没了，这是什么原因

最赞回答 / 慕无忌0566227

引入.css与.js

4 回答 947 浏览

2022-03-30

js中所有类型声明都是用var。var swipe;可以理解为创建了一个名字叫swipe的容器。var swipe={};这就让swipe这个容器具体到是一个用来存储对象的容器。然后就可以根据自己的需求做出各种操作了。1.赋值：比如用来存储一个人的信息：swipe.name='tom';swipe.age='18';swip.sex='男';（可以根据情况继续添加）name,age,sex就是swipe的一些属性。俗称为key，tom,18,男就是属性的内容俗称value这时swipe的内容就是{'nam...

1 回答 1950 浏览

2019-02-12

这里的return this就是return swiper吗，

最新回答 / 顾剑深情_

不是吧

4 回答 1494 浏览

2019-01-27

请问给元素添加css属性的格式，下面这两种各是什么方法，有什么区别？

已采纳回答 / 一世韶华

是一样的，只是需要修改css样式的对象不同，slides是element的所有子元素吧<...图片...>

1 回答 1649 浏览

2017-09-07

不会脚本的插入也不知道如何弄脚本

最新回答 / 慕斯317419

直接根据老师的教程填入就行了啊，很简单的

1 回答 911 浏览

2017-07-28

结果怎么回事

最新回答 / 拿起键盘就是敲

可能有些东西火狐不兼容

1 回答 794 浏览

2017-07-21

最后为什么要return swipe啊

最赞回答 / qq_蓝皮鼠_0

封装function Swipe(container)是构造函数，里面生成了一个对象swipe，scrollTo（）方法就是swipe对象的方法，如果不返回它的话，var swipe = Swipe($("#content"));这句代码的运行结果就不是得到你在构造函数里面生成的对象，而是undefined。

1 回答 1175 浏览

2019-07-02

script 的src=""的这句话是什么意思？

最新回答 / 慕妹1162768

<...code...>

5 回答 3856 浏览

2020-10-18

swipe.scrollTo($("#content").width() * 2, 5000)这个里面的参数为什么要*2呀

最新回答 / 慕后端6626977

因为要从第一个，滚动到第三个呀

2 回答 1004 浏览

2018-06-16

Swipe.js中swipe.scrollTo属性中的函数最后返回this干嘛？？？？

已采纳回答 / 泪o0无痕

这是为了链式调用，所以最后会返回该对象

1 回答 1778 浏览

2017-01-10

自己把code粘贴下来，运行效果跟网站的效果不一？

最新回答 / Arya1

没有把swipe的js文件引入

3 回答 1133 浏览

2017-05-12

button为什么写了absolute后就跑到页面最下方了？

已采纳回答 / 慕婉清9494727

position：absolute是绝对定位，相对于屏幕的绝对位置，不受其他因素影响，bottom：0是距离底部0px的意思

1 回答 1691 浏览

2017-02-14

能否在Swipe中直接传入参数

最新回答 / wsr_6783852470

return this：是返回根目录return swipe：是返回swipe

1 回答 1235 浏览

2016-08-23

scrollTo = function(){}

最赞回答 / Having_Fun

swipe.scrollTo = function(x, speed) {……}这个是给swipe对象添加一个类函数（函数名为scrollTo）scrollTo = function(){}表示定义一个匿名函数并赋值给scrollTo，这样就可以用scrollTo来调用这个函数功能（我也是新手，共同学习）

4 回答 1070 浏览

2022-08-09

全部我要发布

最热最新

只看我的

七夕主题课程素材图片立即下载
七夕主题课程音乐素材立即下载

2-3 页面切换部分的代码封装