Sexy.js: A Sequential Ajax (Sajax) library for jQuery

Sexy.js
Dave Furfero
UI Engineer, MLB.com

Sexy.js
Slideshow
http://www.slideshare.net/furf

Sexy.js
A lightweight JavaScript library which provides enhanced
Sequential Ajax (Sajax) functionality and a sleek facade to
jQuery’s native Ajax methods.

Sexy.js
Facilitates combination and manipulation of data from
multiple sources
Speeds loading of scripts, stylesheets, and data using
parallel asynchronous HTTP requests

Ugly.js
$.getJSON('articles.json', function (articles) {
$.getJSON('comments.json', function (comments) {
$.getJSON('ratings.json', function (ratings) {

$.each(comments, function (i, comment) {
articles[comment.articleId].comments.push(comment);
});

$.each(ratings, function (i, rating) {
articles[rating.articleId].rating = rating;
});

});
});
});

Sexy.js
Sexy
.json('articles.json')

.json('comments.json', function (comments, status, articles) {
$.each(comments, function (i, comment) {
articles[comment.articleId].comments.push(comment);
});
return articles;
})

.json('ratings.json', function (ratings, status, articles) {
$.each(ratings, function (i, rating) {
articles[rating.articleId].rating = rating;
});
});

Ugly.js
<script src="/js/jquery.template.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/comments.css" type="text/css"/>

<script type="text/javascript">

$.get('comments.tpl', function (tpl) {
$.getJSON('comments.json', function (data) {
$.template(tpl, data).appendTo('#comments');
});
});

</script>

Sexy.js
<script type="text/javascript">

Sexy
.js('jquery.template.min.js')
.css('comments.css')
.text('comments.tpl')
.json('comments.json', function (data, status, tpl) {
});

</script>

Sexy.js
Enhanced AJAX Functionality

Sequential Ajax (Sajax)
Simultaneous request/sequential response Ajax
Each successive callback receives the return value of
the previous callback as an additional argument

Sexy.js
Expressive, Chainable API

Sexy.js API
Core Methods
html (url, callback)
json (url, callback)
jsonp (url, callback)
script/js (url, callback)
style/css (url, callback)
text (url, callback)
xml (url, callback)

Sexy.js API
Core Methods
html (url, callback) html (settings)
json (url, callback) json (settings)
jsonp (url, callback) jsonp (settings)
script/js (url, callback) script/js (settings)
style/css (url, callback) style/css (settings)
text (url, callback) text (settings)
xml (url, callback) xml (settings)

Sexy.js API
callback (data, status, previous)

Each callback receives three arguments:
data
status
previous - the return value of the previous callback
(considering a fourth) next or this

Sexy.js API
Additional Methods
setup (settings)
Similar to jQuery.ajaxSetup, but limited to
subsequent calls of a Sexy instance
Can be unset with setup()
bundle (url1, url2, ..., callback)
Client-side JavaScript packaging
Multiple ﬁle, single <script> injection
Sequence is preserved

Using Sexy.js
Loading JavaScripts
Sexy

Using Sexy.js
Loading Stylesheets (local only)
Sexy

Using Sexy.js
Loading Data
Sexy
.text('comments.tpl', function (data) {
return data;
})

Using Sexy.js
Loading Data
Sexy
return data;
})
});

Using Sexy.js
Custom Ajax Settings
Sexy
return data;
})
.json({
url: 'comments.json',
data: {
article_id: 123,
},
success: function (data, status, tpl) {
}
});

Using Sexy.js
Passing Data with Callbacks
Sexy
return data;
})
.json('comments.json?article_id=123', function (data, status, tpl) {
});

Using Sexy.js
Implicit Callbacks
Sexy
return data;
})
});

Using Sexy.js
Implicit Callbacks, Non-Data Types
Sexy
.js('jquery.template.min.js', function (data, status, previous) {
return previous;
})
});

Using Sexy.js
Implicit Callbacks, Non-Data Types
Sexy
});

Using Sexy.js
Conﬁguring Sexy.js
Sexy
.setup({ cache: true })
});

Using Sexy.js
Sexy({
cache: true
})
});

Using Sexy.js
Sexy({
cache: true
})
.setup({ cache: false })
});

Using Sexy.js
Bundling JavaScripts
Sexy
.bundle(
'/js/bam.js',
‘/js/bam.datagrid.js',
‘/js/bam.stats.js',
‘/js/bam.stats.widget.js',
‘/js/bam.stats.widget.leagueSelector.js',
‘/js/bam.stats.app.js',
‘/js/bam.stats.app.sortablePlayerList.js'
);

Using Sexy.js
Bundling JavaScripts
Sexy
.bundle(
'/js/bam.js',
‘/js/bam.datagrid.js',
‘/js/bam.stats.js',
‘/js/bam.stats.widget.js',
‘/js/bam.stats.widget.leagueSelector.js',
‘/js/bam.stats.app.js',
‘/js/bam.stats.app.sortablePlayerList.js',

function (src) {
SortablePlayerList.init();
}
);

Known Issues

Unable to detect error events for remote requests
jsonp (remoteUrl)
script (remoteUrl)
style (remoteUrl)*
*style (remoteUrl) will actually ﬁre success event even if
load was unsuccessful (ie. 404)

Sexy.js
Enhanced Ajax functionality
Expressive, chainable API
Lightweight (1.3KB compressed)

Thanks!
Slideshow: http://www.slideshare.net/furf
URL: http://sexyjs.com
Demo: http://sexyjs.com/demos/comments
Download: http:github.com/furf/Sexy
Twitter: @sexyjs
E-mail: furf@furf.com

Sexy is the new Sexy
Sexy() == new Sexy()
function Sexy (cfg) {

// Allow instantiation without new keyword

if (!(this instanceof Sexy)) {
return new Sexy(cfg);
}

this.cfgs = [];
this.setup(cfg);
this.evt = $(this);
}

Take it off... take it all off!
Sexy.method(url) == (new Sexy()).method(url)
// Alias instance methods as static methods of constructor

$.each(Sexy.prototype, function (name, method) {
Sexy[name] = function () {
return method.apply(new Sexy(), arguments);
};
});

Sexy.js: A Sequential Ajax (Sajax) library for jQuery

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Sexy.js: A Sequential Ajax (Sajax) library for jQuery

Ähnlich wie Sexy.js: A Sequential Ajax (Sajax) library for jQuery (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Sexy.js: A Sequential Ajax (Sajax) library for jQuery

Hinweis der Redaktion