JavaScript课程——Day23（插件Zepto）

Posted 2021-05-19 别动我咖喱

1、插件

　　1.1、类级插件

// 扩展在$.extend()下面：扩展工具方法 如：$.map() $.each()
; (function ($) {
    $.extend({
        插件名1: function () { },
        插件名2: function () { }
    });
})(jQuery);
// 调用方式
$.插件名1();
$.插件名2();

 

　　1.2、对象级插件

// 扩展在$.fn.extend()下面：扩展JQ对象下的插件 如：jQuery对象.css() jQuery对象.html()
; (function ($) {
    $.fn.extend({
        插件名1: function () { },
        插件名2: function () { }
    });
})(jQuery);
// 调用方式
jQuery对象.插件名1()
jQuery对象.插件名2()

 

　　1.3、插件的基本要点

　　　　1、jQuery插件的文件名推荐命名为jquery.[插件名].js，以免和其他javascript库插件混淆。

　　　　2、所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。

　　　　3、在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()，内部的this指向的是DOM元素。

　　　　4、可以通过this.each来遍历所有元素。

　　　　5、所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题，为了更稳妥一些，设置可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。

　　　　6、插件应该返回一个jQuery对象，以保证插件的可链式操作，除非插件需要返回的是一些需要获取的量，例如字符串或者数组等。

　　　　7、避免在插件内部使用$作为jQuery对象，而应该使用完整的jQuery表示。这样可以避免冲突。当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。很多插件都是这样做的。

 

2、Zepto

Zepto 是移动端开发框架，是 jQuery 的轻量级代替品；API 及语句同 jQuery 相似，但文件更小(可压缩至 8KB)。是目前功能完备的库中最小的一个。随着移动端的愈加火爆，目前很多 HTML5 的框架都在支持移动方向，Zepto 就是 jQuery 的移动端版本, 可以看做是一个轻量级的jQuery。如果你会用jQuery，那么你也会用Zepto， Zepto的设计目的是提供 jQuery的类似的 API，但并不是 100%覆盖 jQuery 。Zepto 有一个 5-10k 的通用库、下载并快速执行、有一个熟悉通用的 API，所以你能把你主要的精力放到应用开发上。

 

Zepto.js 中文文档：https://zeptojs.bootcss.com/

 

　　2.1、Zepto.js介绍

　　　　1）Zepto.js特点

• • 1、针对的是移动端
  • 2、轻量级，压缩版本只有9.6KB
  • 3、语法大部分同jQuery一样，学习成本低，上手快

 

　　　　2）jQuery和Zepto的区别在哪里

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

 

　　2.2、Zepto模块

　　为了保持原码的精简，Zepto默认只加载一些模块，当你需要某些模块时，可以把对应的模块加载进来。

 

　　2.3、Zepto的使用

<script src="js/zepto.js"></script>
<script src="js/touch.js"></script>
<script>
    $(function () {
        $(\'#box\').on(\'tap\', function (ev) {
            console.log(\'执行了\');
            console.log(ev);
        })
    })
</script>

 

　　2.4、Zepto的特点

　　　　2.4.1、获取元素

// 1、Zepto 的 width()、height()是根据盒模型决定的，包含 padding 和 border 的值
// 而jq中不包含padding和border
console.log($(\'#box\').width()); // 122  width+padding+border
console.log($(\'#box\').height()); // 122  width+padding+border


// 2、Zepto 中没有 innerWidth()和 outerWidth()系列
console.log($(\'#box\').innerWidth());
console.log($(\'#box\').outerWidth());

 

　　　　2.4.2、offset

• offset()在jQuery中，只返回元素相对文档的距离
• 而在Zepto中，返回的值还包含width和height

 

　　　　2.4.3、position

• 返回离它最近的有定位属性的父级的距离，如果没有定位的父级，则返回到body的距离

 

　　　　2.4.4、touch事件

var box = $(\'#box\');

// 点击
box.tap(function () {
    console.log(\'tap\');
})
box.on(\'tap\', function () {
    console.log(\'tap\');
})


// 单击
box.on(\'singleTap\', function () {
    console.log(\'singleTap\');
});

// 双击
box.on(\'doubleTap\', function () {
    console.log(\'doubleTap\');
});

// 长按  当一个元素被按住超过750ms
box.on(\'longTap\', function () {
    console.log(\'longTap\');
});

// 滑动  当元素被划过(同一个方向滑动距离大于 30px)时触发
box.on(\'swipe\', function () {
    console.log(\'swipe\');
});

// 左滑
box.on(\'swipeLeft\', function () {
    console.log(\'swipeLeft\');
});

// 右滑
box.on(\'swipeRight\', function () {
    console.log(\'swipeRight\');
});

// 上滑
box.on(\'swipeUp\', function () {
    console.log(\'swipeUp\');
});

// 下滑
box.on(\'swipeDown\', function () {
    console.log(\'swipeDown\');
});