4

Can somebody please explain me how could I make different builds for Zepto.js (in order to include touch support) in a noob-friendly way, because I cannot find detailed instructions anywhere on the Internet.

nalply
  • 26,770
  • 15
  • 78
  • 101
drelkata
  • 347
  • 1
  • 3
  • 11
  • https://github.com/madrobby/zepto#readme ? – Quentin Mar 24 '13 at 20:09
  • This is the jQuery way of running multiple instances. As Zepto.js is built on jQuery it shouldn't be hard to find an equal solution: http://stackoverflow.com/questions/528241/how-do-i-run-different-versions-of-jquery-on-the-same-page –  Mar 24 '13 at 20:10
  • @Allendar: Well not built *on* jQuery, but built *similarly to* jQuery. – icktoofay Mar 24 '13 at 20:30
  • You got me there, thanks for the note icktoofay :) –  Mar 24 '13 at 20:31
  • Don't close, it's a useful question. – nalply Mar 24 '13 at 21:23

1 Answers1

5

This should work, just like jQuery does it:

<script src="zepto1.0.js"></script>
<script>
    var zep10 = window.Zepto;
</script>

<script src="zepto0.8.js"></script>
<script>
    var zep08 = window.Zepto;
</script>

Zepto does not need to be "compiled". It just needs to be placed into a variable, like jQuery and MooTools go into $ by default. You can set the most used version of Zepto into $ too if you like:

<script src="zepto1.0.js"></script>
<script>
    var $ = window.Zepto;
</script>

Off-course you need to trigger your commands from those objects from then on.

For version 1.0 you would just use your normal $.() operations. But for version 0.8 you would use zep08.() to call actions.

Note

From the Zepto homepage (http://zeptojs.com):

Zepto will only set the $ global to itself if it is not yet defined. There is no Zepto.noConflict method.

So if you already loaded jQuery or MooTools, it will not break the $ binding, as long as you have those libraries load before Zepto does. Otherwise you will still get overwrites.

Tests

Also check this out: http://jsperf.com/qwery-vs-jquery-vs-mootools-selector-engines/11. On Chrome and Safari jQuery wins big from Zepto. So you might have a lighter "initial load" with Zepto, but it seems jQuery wins performance-wise.

I've tested on Safari 6.0.3 on Mac OS X 10.8.3 with these results:

Jeesh / ID

  • Jeesh("#n-contents");
  • 40,136 | ±3.78% | 95% slower

jQuery / ID

  • jQuery("#n-contents");
  • 765,799 | ±4.36% | fastest

Zepto / ID

  • Zepto("#n-contents");
  • 348,956 | ±4.89% | 55% slower

Jeesh / class

  • Jeesh(".firstHeading");
  • 40,748 | ±3.96% | 95% slower

jQuery / class

  • jQuery(".firstHeading");
  • 306,591 | ±4.31% | 60% slower

Zepto / class

  • Zepto(".firstHeading");
  • 284,822 | ±3.92% | 63% slower