从零開始学习制作H5应用——V5.0：懊悔机制，整理文件夹，压缩，模板化

经过前面四个版本号的迭代。我们已经制作了一个从视觉和听觉上都非常舒服的H5微场景应用，没有看过的请戳以下：

V1.0——简单页面滑动切换

V2.0——多页切换。透明过渡及交互指示

V3.0——增加loading,music及自己主动切换

V4.0——增加文字并给文字加特效

可是，还没有完，这一次，我们将做一些十分重要的收尾工作，才干真正完毕我们的第一个H5应用。所以。let’s do it!

任务

1、增加懊悔机制——页面上滑切换功能；

2、整理文件夹

3、压缩样式与脚本文件

4、模板化

分析

1、世上没有懊悔药。可是应用须要更好的用户体验，就要考虑到用户的懊悔，为用户提供一种懊悔机制，比方我们日常软件上有删除，就有撤销删除。一样地，我们的应用假设仅仅有切换到下一页而没有切换到上一页的功能的话，对于用户来说，是没有安全感的。由于不可控，由于无法懊悔。诚然。用户能够进行第二轮切换切换到上一页。可是这样的操作成本本身太高不可取，所以我们一定要为用户增加懊悔机制，在我们的应用里。表现为页面的向上切换。

2、一个良好的文件夹结构对于一个应用来说是必要的，它对于程序的可维护性，可扩展性十分重要，所以在项目正式上线公布前。我们要整理好文件文件夹。甚至，能够提前到项目開始阶段。就要计划好项目的文件夹结构。

3、对于用户体验来说，页面的第一次载入速度永远是最重要的，假设用户等待了十几秒你的页面还没载入完毕。那么里面无论有多好的内容。多好看的样式。用户也不再感兴趣，所以，为了提高载入速度，我们有必要对样式文件和脚本问价进行压缩。

4、实际工作中，我们要做的非常多项目可能都是使用相同的格式和功能，仅仅是内容不一样罢了，这时候。你绝逼不会每个项目都将前一个项目复制一份。然后钻到页面中改内容和样式，假设仅仅有几份你还能忍受。可假设有一千份。你会累死！

所以，将我们的项目模板化。以后全部的相似项目全都通过模板生成，是一个不错的选择。

实现

第一步：懊悔机制

我们已经有了一个页面切换函数，并且我们不想将这个函数复制一遍然后将里面的序号递增改为序号递减。所以，我们怎么做。对。给页面函数加一个參数。在函数体里根据參数值来决定它切换的方向。代码例如以下：

myfn.js

/**
 * Created by hjb2722404 on 2015/6/4.
 */

$(function(){
    var curpage=1;
    var totalpage,nextpage,prepage,lastpage,nexttotalpage,pretotalpage;

    //获取总页数,以及总页数的+1/-1后的序号。供后面for循环使用

    totalpage = $(".page").length;
    nexttotalpage = totalpage + 1;
    pretotalpage = totalpage - 1;

    window.onload = function(){
        $(".loader").css("z-index","1");
        $(".upicon").css("z-index","1000");
        initAudio("audio");
    }

    var audio;
    function initAudio(id){
        audio =  document.getElementById(id);
    }

    document.addEventListener('touchmove',function(event){
        event.preventDefault(); },false);

    $(".page").swipeUp(function(){
        swichpage("up");
    })

    $(".page").swipeDown(function(){
        swichpage("down");
    })

//控制音乐播放停止和音乐ico图标变换
    $("#audioPlay").on('click',function(){
        if(audio.paused){
            audio.play();
            this.style.backgroundImage="url(images/music_play.png)";
        }else{
            audio.pause();
            this.style.backgroundImage="url(images/music_pause.png)";
        }
    });

    function rnd(start, end){
        return Math.floor(Math.random() * (end - start) + start);
    }

    var inClassArray = ['pt-page-flipInLeft','pt-page-rotatePullLeft','pt-page-rotateCubeTopIn'];
    var temLength = inClassArray.length;

    function swichpage(toward) {

//推断当前页是否为最后一页
        //假设是最后一页，显示第一页，并移除全部page上的全部css效果类。否则显示下一页。并移除上一页的切换动画效果
        if (curpage == totalpage && nextpage != pretotalpage ) {
            for (var i = 1; i < nexttotalpage; i++) {
                $(".page" + i).removeClass("hide");
                $(".page" + i).removeClass("show");
                $(".page" + i).removeClass("pt-page-moveFromBottomFade");
            }
            $(".page1").addClass("show");
            $(".page1").addClass("pt-page-moveFromBottomFade");
            curpage = 1;
        } else {
            if(toward=="up"){
                console.log("up");
                nextpage = curpage + 1;
                lastpage = curpage - 1;
                var inClass ="pt-page-moveFromBottomFade";
                var outClass="pt-page-moveToTopFade";
            }else if(toward=="down"){
                if(curpage == 1){
                    return false;
                }
                console.log("down");
                nextpage = curpage - 1;
                lastpage = curpage + 1;
                var outClass ="pt-page-moveToBottomFade";
                var inClass="pt-page-moveFromTopFade";
            }
            $(".page" + curpage).removeClass(inClass);
            $(".page" + curpage).addClass(outClass);
            $(".page" + curpage).removeClass("show");
            $(".page" + curpage).addClass("hide");
            $(".page" + nextpage).removeClass("hide");
            $(".page" + nextpage).addClass("show");
            $(".page" + nextpage).addClass(inClass);
            var randomNum = rnd(0,temLength);
            setTimeout(function(){
                $(".textbox"+nextpage).css('display','block');
                $(".textbox"+nextpage).addClass(inClassArray[randomNum]);
            },1000);
            $(".page" + lastpage).removeClass(outClass);
            curpage = nextpage;
        }
    }

    setInterval(function(){
        swichpage("up");
    },8000);

})

第二步：整理文件夹

整理后的文件夹结构例如以下：

别忘了改动各个文件里的引用

比如：index.html

<link rel="stylesheet" href="css/animate.css" type="text/css"/>
<link rel="stylesheet" href="css/animations.css" type="text/css"/>
<link rel="stylesheet" href="css/loading.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
……
<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script src="js/myfn.js"></script>
</body>

第三步：压缩。

这里，我们要压缩的是CSS文件和JS文件，必要时候也能够利用工具将几个JS文件或CSS文件合并为一个文件。我们这里仅仅演示一下压缩我们的主样式表style.css和主脚本文件myfn.js文件

首先来看看压缩前的style.css:

#pages {
  width: 100%;
  heigt: 100%;
}
.page {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  z-index: 1;
}

.page1 {
  background: blue;
  display: block;
  z-index: 100;
}

.hide {
  z-index: 99;
}
.show {
  z-index: 100;
}
.upicon {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  margin-left: -30px;
  z-index: 1000;
}
.upicon img {
  width: 60px;
}
#audioPlay {
  width: 38px;
  height: 38px;
  background-image: url("../images/music_play.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 5%;
  right: 5%;
  z-index: 9999999;
}

然后是压缩后的style.min.css，我用的是在线压缩工具：

看看压缩前后的文件大小对照：

再来看看myfn.js的压缩，压缩前：

myfn.js

/**
 * Created by hjb2722404 on 2015/6/4.
 */

$(function() {
    var curpage = 1;
    var totalpage, nextpage, prepage, lastpage, nexttotalpage, pretotalpage;

    //获取总页数,以及总页数的+1/-1后的序号。供后面for循环使用

    totalpage = $(".page").length;
    nexttotalpage = totalpage + 1;
    pretotalpage = totalpage - 1;

    window.onload = function() {
        $(".loader").css("z-index", "1");
        $(".upicon").css("z-index", "1000");
        initAudio("audio");
    }

    var audio;

    function initAudio(id) {
        audio = document.getElementById(id);
    }

    document.addEventListener('touchmove', function(event) {
        event.preventDefault();
    }, false);

    $(".page").swipeUp(function() {
        swichpage("up");
    })

    $(".page").swipeDown(function() {
        swichpage("down");
    })

    //控制音乐播放停止和音乐ico图标变换
    $("#audioPlay").on('click', function() {
        if (audio.paused) {
            audio.play();
            this.style.backgroundImage = "url(images/music_play.png)";
        } else {
            audio.pause();
            this.style.backgroundImage = "url(images/music_pause.png)";
        }
    });

    function rnd(start, end) {
        return Math.floor(Math.random() * (end - start) + start);
    }

    var inClassArray = ['pt-page-flipInLeft', 'pt-page-rotatePullLeft', 'pt-page-rotateCubeTopIn'];
    var temLength = inClassArray.length;

    function swichpage(toward) {

        //推断当前页是否为最后一页
        //假设是最后一页。显示第一页，并移除全部page上的全部css效果类。否则显示下一页。并移除上一页的切换动画效果
        if (curpage == totalpage && nextpage != pretotalpage) {
            for (var i = 1; i < nexttotalpage; i++) {
                $(".page" + i).removeClass("hide");
                $(".page" + i).removeClass("show");
                $(".page" + i).removeClass("pt-page-moveFromBottomFade");
            }
            $(".page1").addClass("show");
            $(".page1").addClass("pt-page-moveFromBottomFade");
            curpage = 1;
        } else {
            if (toward == "up") {
                console.log("up");
                nextpage = curpage + 1;
                lastpage = curpage - 1;
                var inClass = "pt-page-moveFromBottomFade";
                var outClass = "pt-page-moveToTopFade";
            } else if (toward == "down") {
                if (curpage == 1) {
                    return false;
                }
                console.log("down");
                nextpage = curpage - 1;
                lastpage = curpage + 1;
                var outClass = "pt-page-moveToBottomFade";
                var inClass = "pt-page-moveFromTopFade";
            }
            $(".page" + curpage).removeClass(inClass);
            $(".page" + curpage).addClass(outClass);
            $(".page" + curpage).removeClass("show");
            $(".page" + curpage).addClass("hide");
            $(".page" + nextpage).removeClass("hide");
            $(".page" + nextpage).addClass("show");
            $(".page" + nextpage).addClass(inClass);
            var randomNum = rnd(0, temLength);
            setTimeout(function() {
                $(".textbox" + nextpage).css('display', 'block');
                $(".textbox" + nextpage).addClass(inClassArray[randomNum]);
            }, 1000);
            $(".page" + lastpage).removeClass(outClass);
            curpage = nextpage;
        }
    }

    setInterval(function() {
        swichpage("up");
    }, 8000);

})

压缩后的myfn.min.js:

myfn.min.js

看看压缩前后大小对照：

压缩后大小仅仅是压缩前一半大小。

别忘了在index.html中把引用改了。

index.html

……
   <link rel="stylesheet" href="css/style.min.css" type="text/css"/>
……

<script src="js/myfn.min.js"></script>

第四步，模板化

模板化的思路是将Index.html页面中全部的变量（比方图片路径。内部样式的值等等）用变量符号取代。将来由后端程序解析替换为数据库中的数据。动态生成终于静态页面。

模板化的还有一个优点是。由于模板化支持循环输出，所以我们不必再在页面中将格式相同的元素复制N份。

这里我们约定全部由模板解析的变量格式为 {{$变量名}}。for循环的写法为{{for n=N $array}}...{{for end}}。if推断的写法为：{{if condition}}...{{if end}}根据这个原则，我们将index.html模板化为index.htm，模板化之后的代码例如以下：

index.htm

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>{{$title}}</title>
    <link rel="stylesheet" href="css/animate.css" type="text/css"/>
    <link rel="stylesheet" href="css/animations.css" type="text/css"/>
    <link rel="stylesheet" href="css/loading.css" type="text/css"/>
    <link rel="stylesheet" href="css/style.min.css" type="text/css"/>

    <style>
        {{for n=9  $arrayPage}}
        .page{{n}}{background-image: url({{$array[n][imgurl]}}); background-repeat: {$array[n][bgrepeat]}; background-size: {{$array[n][bgsize]}};}
        {{for end}}
        .textbox {display:none;}
        {{for n=9 $arrayTextbox}}
        .textbox{{n}}{width:{{$arrayTextbox[n][width]}}; height: {{$arrayTextbox[n][height]}}; position: {{$arrayTextbox[n][position]}}; top:{{$arrayTextbox[n][top]}};
        left: {{$arrayTextbox[n][left]}};right:{{$arrayTextbox[n][right]}}; margin-left: {{$arrayTextbox[n][maginleft]}}; margin-top: {{$arrayTextbox[n][marginright]}};
        color:{{$arrayTextbox[n][color]}};-webkit-writing-mode:{{$arrayTextbox[n][horizontal-tb]}};writing-mode:{{$arrayTextbox[n][wrimod]}};writing-mode:{{$arrayTextbox[n][horizontal-tb]}};}
        {{for end}}
    </style>

</head>
<body>
<div class='loader loader--spinningDisc'></div>

<audio src="{{$mp3url}}" autoplay="autoplay"  id="audio"  hidden="hidden" loop="loop"></audio>
<div id="audioPlay"></div>
    <div id="pages">
        {{for n=9 $arrayPageCon}}
        <div class="page page{{n}}">
            <div class="textbox{{n}}  {{if n=1}} pt-page-rotateCubeTopIn {{if end}}">
               {{$arrayPageCon[n][textCon]}}
            </div>
        </div>
       {{for end}}
    </div>

    <div class="upicon animated infinite bounce "><img src="data:images/upicon.png" alt=""/></div>

<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script src="js/myfn.min.js"></script>
</body>
</html>

这样，后端程序仅仅须要从数据库取到对应的变量值和几个二维数组。就能够将模板中的变量全部替换，并生成新的静态页面了。

到此为止，我们的第一个H5应用就全部制作完毕并完毕了模板化。然后就能够去掉不要的文件（style.css。myfn.js，less文件等）,打包上传至server了。

还要注意的一点是。假设你是要将此应用在微信里分享，还要在index.html的头部写好相关分享信息，并制作一张分享用的图片，这个下次会单独讲。与本文并无必定关联。就先不讲了。