JavaScript course -- day23 (plug in, zepto)
Don't touch my curry 2021-06-04 10:14:58

1、 plug-in unit

1.1、 Class level plug in

// Expand on $.extend() below : Extension tool method Such as :$.map() $.each()
; (function ($) {
$.extend({
The plugin name 1: function () { },
The plugin name 2: function () { }
});
})(jQuery);
// Call mode 
$. The plugin name 1();
$. The plugin name 2();

 

1.2、 Object level plug-ins

// Expand on $.fn.extend() below : Expand JQ Object Such as :jQuery object .css() jQuery object .html()
; (function ($) {
$.fn.extend({
The plugin name 1: function () { },
The plugin name 2: function () { }
});
})(jQuery);
// Call mode 
jQuery object . The plugin name 1()
jQuery object . The plugin name 2()

 

1.3、 The basic points of plug-ins

1、jQuery The recommended file name for the plug-in is jquery.[ The plugin name ].js, So as not to be associated with other javascript Library plug-in confusion .

2、 All object methods should be attached to jQuery.fn On the object , And all global functions should be attached to jQuery On the object itself .

3、 Inside the plug-in ,this It points to the current jQuery object , It's not like the usual way , for example click(), Inside this Pointing to DOM Elements .

4、 Can pass this.each To traverse all the elements .

5、 All methods or function plug-ins , Should end with a semicolon , Otherwise, there may be problems when compressing , To be more secure , You can add a semicolon to the head of the plug-in , In order to avoid the impact of other people's nonstandard code on the plug-in .

6、 The plug-in should return a jQuery object , To ensure that the plug-in can be chained , Unless the plug-in needs to return some quantity that needs to be obtained , For example, string or array .

7、 Avoid using it inside plug-ins $ As jQuery object , Instead, use the complete jQuery Express . This can avoid conflict . Of course , We can also use the technique of closure to avoid this problem , Keep plug-ins in use $ As jQuery Another name for . Many plug-ins do this .

 

2、Zepto

Zepto It's a mobile development framework , yes jQuery A lightweight substitute for ;API The same as the sentence jQuery be similar , But the file is smaller ( It can be compressed to 8KB). It's the smallest library with complete functions at present . With the increasing popularity of mobile terminals , At present a lot of HTML5 All of the frameworks support the direction of movement ,Zepto Namely jQuery Mobile version of , It can be seen as a lightweight jQuery. If you can use jQuery, Then you can use Zepto, Zepto The purpose of the design is to provide jQuery It's similar API, But it is not 100% Cover jQuery .Zepto There is one 5-10k The general library of 、 Download and quickly execute 、 There's a familiar generic API, So you can put your main focus on Application Development .

 

Zepto.js Chinese document :https://zeptojs.bootcss.com/

 

2.1、Zepto.js Introduce

1)Zepto.js characteristic

    • 1、 For the mobile end
    • 2、 Lightweight , The compressed version is only 9.6KB
    • 3、 Grammar is mostly the same as jQuery equally , The cost of learning is low , Quick start

 

2)jQuery and Zepto What's the difference

    • 1、jQuery It's more about PC The end is applied , therefore , A lot of low-level browser compatibility issues are considered ; and Zepto.js The problem of low-level browser adaptation is abandoned , It's very light ;
    • 2、Zepto.js It is more widely used in the mobile terminal ;
    • 3、jQuery The bottom layer is through DOM To achieve the effect ,Zepto.js Yes, it is css3 To achieve ;
    • 4、Zepto.js It's a lightweight version jQuery

 

2.2、Zepto modular

In order to keep the original code simple ,Zepto Only some modules are loaded by default , When you need some modules , The corresponding module can be loaded in .

 

2.3、Zepto Use

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

 

2.4、Zepto Characteristics

2.4.1、 Get elements

// 1、Zepto Of width()、height() It's based on the box model , contain padding and border Value 
// and jq Contains no padding and border
console.log($('#box').width()); // 122 width+padding+border
console.log($('#box').height()); // 122 width+padding+border
// 2、Zepto There is no innerWidth() and outerWidth() series 
console.log($('#box').innerWidth());
console.log($('#box').outerWidth());

 

2.4.2、offset

    • offset() stay jQuery in , Returns only the distance of the element from the document
    • And in the Zepto in , The returned value also contains width and height

 

2.4.3、position

    • Returns the distance of the nearest parent with location property , If there is no positioned parent , Then go back to body Distance of

 

2.4.4、touch event

var box = $('#box');
// Click on 
box.tap(function () {
console.log('tap');
})
box.on('tap', function () {
console.log('tap');
})
// single click 
box.on('singleTap', function () {
console.log('singleTap');
});
// double-click 
box.on('doubleTap', function () {
console.log('doubleTap');
});
// Long press When an element is held more than 750ms
box.on('longTap', function () {
console.log('longTap');
});
// slide When the element is crossed ( The sliding distance in the same direction is greater than  30px) Trigger when 
box.on('swipe', function () {
console.log('swipe');
});
// Left slide 
box.on('swipeLeft', function () {
console.log('swipeLeft');
});
// Right slip 
box.on('swipeRight', function () {
console.log('swipeRight');
});
// Up slide 
box.on('swipeUp', function () {
console.log('swipeUp');
});
// Decline in 
box.on('swipeDown', function () {
console.log('swipeDown');
});
Please bring the original link to reprint ,thank
Similar articles

2021-08-09

2021-08-09