七夕项目js实现-2-3

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

前言

​ 本节没有继续进行主剧情,主要是对代码进行整理,封装是为了后面开发能简化、复用。所以这节也是很有必要的。也用到一些闭包的知识,闭包的主要优点,是隔离的作用域。你在方法里定义的变量不会污染全局变量。这个如果暂时理解不了,先往下进行,慢慢的就会有体会了。
有视频的课大家直接看视频,我直接对着没视频的课代码撸起!
​ 请注意章节,与慕课上的章节一一对应。慕课地址:传送门 走你!

撸代码

  1. 抽离css—>新建一个css文件,如“styles.css”,将页面的所有css抽离到styles中,然后在页面引入这个文件。

    styles.css文件

    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
    * {
    padding: 0;
    margin: 0;
    }
    ul,
    li {
    list-style-type: none;
    }
    #content {
    width: 100%;
    height: 100%;
    /* top: 20%;
    left: 20%; */
    overflow: hidden;
    position: absolute;
    }
    .content-wrap {
    position: relative;
    }
    .content-wrap>li {
    background: #CAE1FF;
    color: red;
    float: left;
    overflow: hidden;
    position: relative;
    }
    li:nth-child(2) {
    background: #9BCD9B;
    }
    li:nth-child(3) {
    background: yellow;
    }
    button {
    width: 100px;
    height: 50px;
    }
    .button {
    position: absolute;
    bottom: 0;
    }
  2. 抽离js—>新建一个js文件,如“Swipe.js”,将页面的所有js抽离到Swipe中,然后在页面引入这个文件。css剪切粘贴就好,js还是需要修改下的

    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
    //页面滚动方法
    function Swipe(container) {
    // 获取第一个子节点
    var element = container.getElementsByClassName('content-wrap');
    // li页面数量
    var slides = element[0].getElementsByTagName("li");
    // // 获取容器尺寸
    var containerCss = window.getComputedStyle(container, null);
    var width = containerCss.width;
    var height = containerCss.height;
    // 设置li页面总宽度
    element[0].style.width = parseInt(width) * parseInt(slides.length) + 'px';
    element[0].style.height = height;
    // 设置每一个页面li的宽度
    for (var i = 0; i < slides.length; i++) {
    slides[i].style.width = containerCss.width;
    slides[i].style.height = containerCss.height;
    }
    //滑动对象
    var slider = {};
    slider.scrollTo = function(x,feed){
    element[0].style.transition = 'all '+feed+'ms linear';
    element[0].style.transform = 'translatex(-' + parseInt(x) + 'px)'
    }
    return slider ;
    }

    简单的描述下,定义一个Swipe方法,将之前获取的id=content的节点作为参数传进去。定义一个slider对象并且作为此方法的返回值,为了在调用这个方法后,能获取到slider对象,进行slider的参数调用。

  3. 剩下html

    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
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题</title>
    <link rel='stylesheet' href="./css/style.css" />
    <script src="./js/Swipe.js"></script>
    </head>
    <body>
    <div id='content'>
    <ul class='content-wrap'>
    <!-- 第一副画面 -->
    <li> 页面1 </li>
    <!-- 第二副画面 -->
    <li> 页面2 </li>
    <!-- 第三副画面 -->
    <li> 页面3 </li>
    </ul>
    <div class="button">
    <button>点击切换页面</button>
    </div>
    </div>
    <script type="text/javascript">
    var content = document.getElementById('content');
    var slider = Swipe(content);
    var button = document.getElementsByTagName('button');
    button[0].addEventListener('click', function () {
    slider.scrollTo(content.offsetWidth * 2, 5000);
    })
    </script>
    </body>
    </html>

结束语

文件目录结构
  imooc
        — css
          — styles.css
        — js
          — Swipe.js
        — index.html

本节将js提到方法里,并且返回对象这块是重点。这也是所谓的封装。写完后,你不需要再关心Swipe.js里面的实现,你就需要知道需要传什么,给你返回什么就好。

代码我已上传百度云盘,欢迎大家下载查看。。。
链接:http://pan.baidu.com/s/1nvt9Qsh 密码:pexw
如有疑问请在下方留言。。。