субота, 20 априла, 2024
Сам свој мајстор

Zepto

Аутор: Златан Васовић

Увод

Zepto је популарна алтернатива jQuery библиотеци са активним развојем.

Употреба

Zepto је много „лакши”, бржи и више прилагођен мобилним уређајима. Зато се често користи на сајтовима са првенственом наменом за мобилне уређаје.

Разлике у односу на jQuery

Zepto је величине ~10KB, док је jQuery ~80KB, што је чак осам пута веће.

jQuery има подршку за старе desktop прегледаче (IE <9), док је Zepto нема. Он има одличну подршку за мобилне прегледаче.

Модули

Основни модули:

  • zepto: модул са већином метода
  • event: управљање догађајима у прегледачу
  • ajax: управљање HTTP захтевима
  • form: управљање формама
  • ie: подршка за IE 10+

Остали модули:

  • detect: информације о оперативном систему и прегледачу
  • fx: основна метода за анимације
  • fx_methods: додатне методе за анимације
  • assets: експериментална метода за чишћење слика из iOS меморије након уклањања елемената
  • data: метода за складиштење произвољних објеката
  • deferred: помоћни модул за такозване promise-ове, специјалне догађаје у прегледачу
  • callbacks: помоћни модул за deferred
  • selector: експериментална подршка за јQuery селекторе, као што су $(‘div:first’) и el.is(‘:visible’)
  • touch: подршка за догађај додира прста (енг. touch event)
  • gesture: подршка за gesture
  • stack: додатне цикличне методе
  • ios3: недостајуће String.prototype.trim и Array.prototype.reduce методе за iOS3

Подршка

Потпуна подршка:

  • Safari 6+ (OS X)
  • Chrome 30+ (Windows, OS X, Android, iOS, Linux, Chrome OS)
  • Firefox 24+ (Windows, OS X, Android, Linux, Firefox OS)
  • iOS 5+ Safari
  • Android 2.3+ Browser
  • Internet Explorer 10+ (Windows, Windows Phone)

Делимична подршка:

  • iOS 3+ Safari (уз опциони модул)
  • Chrome <30
  • Firefox 4+
  • Safari <6
  • Android Browser 2.2
  • Opera 10+
  • webOS 1.4.5+ Browser
  • BlackBerry Tablet OS 1.0.7+ Browser
  • Amazon Silk 1.0+

Примери

Пример 1: циклична петља

// niz
$.each(['a', 'b', 'c'], function (index, item) {
  console.log('%d je: %s', index, item)
});

// objekat
var hash = {
  name: 'zepto.js',
  size: 'micro'
}
$.each(hash, function (key, value) {
  console.log('%s: %s', key, value)
});

Пример 2: детекција верзије оперативног система и прегледача

// recimo da imamo iOS 6.1
// prefiks `!!` osigurava boolean izlaz (true/false)
!!$.os.phone;      // => true
!!$.os.iphone;     // => true
!!$.os.ios;        // => true
$.os.version;      // => "6.1"
$.browser.version; // => "536.26"

Пример 3: управљање догађајима у прегледачу

var elem = $('.container');

// praćenje klikova na `elem`
elem.on('click', function (e) { /* ... */ });

// praćenje svih klikova na linkove
$(document).on('click', 'a', function (e) { /* ... */ });

// prekid praćenja svih klikova na linkove
$(document).on('click', 'a', false);

Закључак

Zepto је одлична алтернатива jQuery-ју. Ако су вам приоритет desktop рачунари, одлука пада на jQuery. Ипак, ако су приоритет мобилни уређаји, Zepto је неупоредиво кориснији (прим.аут.).

Корисни линкови:
[1] http://zeptojs.com/
[2] https://github.com/madrobby/zepto
[3] http://stackoverflow.com/questions/14830334/what-is-the-difference-between-zepto-and-jquery-2
[4] http://code.tutsplus.com/tutorials/the-essentials-of-zeptojs–net-24867