HTML5 - Zepto框架

---

框架四 —-> Zepto

介绍

• 随着移动端的愈加火爆，目前很多HTML5的框架都在保持移动方向，比如：Vue.js，zepto.js，React Native等等。

• Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript 库， 它与jquery 有着类似的api。
  如果你会用 jquery，那么你也会用 zepto。

• Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

jQuery和Zepto.js的区别

• jQuery更多是在PC端被应用，因此，考虑了很多低级浏览器的的兼容性问题；而Zepto.js则是直接抛弃了低级浏览器的适配问题，显得很轻盈；
• Zepto.js在移动端被运用的更加广泛；
• jQuery的底层是通过DOM来实现效果的， zepto.js 是靠css3 来实现的
• Zepto.js可以说是阉割版本的jQuery。

授之于鱼

• 英文版：http://zeptojs.com/
• 中文版：http://www.bootcss.com/p/zeptojs/

Zepto设计模块

• zepto为了保持足够的轻量和效率，只保留了默认的最基本的功能，其他的功能，如果有需要，只要再次引入就可以了；

• zepto模块
  

• 注意 : jQuery的底层是通过DOM来实现效果的， zepto 是靠css3 来实现的

附一个Demo,方便理解和使用 !

< ! ———- HTML ———— >

// 在控制台运行移动端模拟器的时候需要添加视口配置
// 在之后的Bootstrap里面会细说视口
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<div class="touch">
    <ul class="header">
        <li class="current">新闻</li>
        <li>科技</li>
    </ul>
    <span class="line"></span>
    <div class="content">
        <div class="list">
            <ul>
                <li>新闻列表新闻列表</li>
                <li>新闻列表新闻列表</li>
                <li>新闻列表新闻列表</li>
                <li>新闻列表新闻列表</li>
                <li>新闻列表新闻列表</li>
            </ul>
            <a href="javascript:;" class="more">查看更多...</a>
        </div>
        <div class="list">
            <ul>
                <li>科技列表科技列表</li>
                <li>科技列表科技列表</li>
                <li>科技列表科技列表</li>
                <li>科技列表科技列表</li>
                <li>科技列表科技列表</li>
            </ul>
            <a href="javascript:;" class="more">查看更多...</a>
        </div>
    </div>
</div>

< ! ——— Style ————– >

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        list-style-type: none;
    }

    .touch {
        width: 100%;
        position: relative;
        overflow: hidden;
    }

    .header {
        width: 100%;
        height: 40px;
        text-align: center;
        background: #cccccc;
    }

    .header li {
        float: left;
        width: 50%;
        height: 40px;
        line-height: 40px;
        font-weight: bolder;
        font-size:18px;
    }

    .header .current {
        color: darkred;
    }

    .line {
        width: 50%;
        color: darkred;
        border-bottom: 3px solid darkred;
        position: absolute;
        top: 37px;
        left: 0;
    }

    .content {
        width: 200%;
        overflow: hidden;
    }

    .content > div {
        float: left;
        width: 50%;
    }

    .content ul {
        padding-left: 10px;
    }

    .list li {
        text-indent: 1em;
        line-height: 40px;
        border-bottom: 1px solid #000;
    }

    .list .more {
        text-decoration: none;
        color: #000;
        display: block;
        text-align: center;
        height: 50px;
        line-height:50px;
    }
</style>

< ! ——— JavaScript ——- >

<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script>
    $(function () {
        // 兼容 不加这行代码 你会发现有些浏览器会有bug
        $('.content').on('touchmove', function (event) {
            event.preventDefault();
        }, true);

        // 1. 点击切换
        $('.header li').tap(function () {
            // 1.1 获取点击的索引
            var index = $(this).index();
            change(index);
        });

        // 2. 滑动切换 --- 左边
        $('.content').swipeLeft(function () {

            // 2.1 获取索引
            var index = $(this).children('div').index();
            index++;
            change(index);
        });

        // 3. 滑动切换 --- 右边
        $('.content').swipeRight(function () {
            // 2.1 获取索引
            var index = $(this).children('div').index();
            index--;
            if (index < 0) {
                index = 0;
            }
            change(index);
        });

        /**
         * 滑动函数
         * @param index  滑动当前的索引
         */
        function change(index) {
            $('.header li').eq(index).addClass('current').siblings().removeClass('current');
            $('.line').css({
                'transform': 'translate(' + index * 100 + '%)',
                'transition': 'all 0.25s linear'
            });
            $('.content').css({
                'transform': 'translate(' + index * -50 + '%)',
                'transition': 'all 0.25s linear'
            });
        }
    });
</script>

< ! ——— 效果展示 ———- >

tap 和 click 的区别

• tap 只作用在移动端，PC端是无效的
• click 在pc端和移动端都是ok的
• 但是我们在移动端要用tap，因为 tap 比 click 快200-300ms

zepto和jquery

• 首先，zepto默认只具有基本的模块，其他功能模块需要单独引⽤，引⽤的模块，必须放在zepto的后面，fx.js 和fxmethods.js 他们之间必须是fxmethods.js在fx.js的后面；
• 其他的包之间顺序无所谓；
• jQuery默认是一个文件中，包含所有的功模块；
• zepto的底层是通过css3实现的,jQuery是操作的DOM,所以有些css3的效果，是jquery做不到的；
• zepto比jQuery多了更多的移动端的事件的支持，比如说tap， swipe等等

• zepto的兼容性比jQuery差，因为zepto更多的是注重移动端和效率，jQuery注重的是兼容性；

• 注意:
  zepto上面的动画，不要加太多， 因为动画很耗性能，加多了会很卡，特别是一些webview开发；

---