Monday, November 13th, 2006

JSOC: JavaScript Object Cache

Category: JavaScript, Library

Fancy memcached in your client browsers? Introducing: JSOC (JavaScript Object Cache).

The JSOC framework is a a pluggable, extensible, open source client-side caching framework for JavaScript.

JSOC offers Web developers a straightforward way to perform common caching techniques (add, replace, remove, flush, etc.) inside any JavaScript-enabled browser.

Since JSOC is a standalone JavaScript module, incorporating JSOC into a Web development project is a matter of including a script reference, and working with common caching methods. Low-level methods are contained in the JSOC JavaScript module so that developers can focus on the Web development task at hand.

Example

javascript

  1. xhttp = new xhttp(); // use your XMLHTTPRequest library of choice!
  2. function setCache(n,v){
  3.     var respCode = jsoc.set(n, v);
  4.     alert('Data containing ' + n + ' was fetched and cached!');
  5. }
  6.  
  7. function clearCacheItem(n){
  8.     var respCode = jsoc.remove(n);
  9.     alert('Data containing ' + n + ' is no longer cached.');
  10. }
  11.  
  12. function cacheStuff(cName){
  13.     jsoc = new JSOC(); // JavaScript Object Cache
  14.     if(jsoc.get(cName) == undefined){
  15.       // this object is not cached, so grab it as usual, then cache it via your call-back function.
  16.       cacheName = cName; // set the global cacheName so that it's in scope for the call-back function.
  17.       loc = 'http://dev.webframeworks.com/assets/getMyData.txt';
  18.       xhttp.fetch(loc, 'responseProxy', {'method':'POST','type':'text'});
  19.     }else{
  20.       // grab your stuff from cache!
  21.       var cacheItem = eval(cName);
  22.       alert(cName + ' = ' + cacheItem);
  23.     }
  24. }
  25.  
  26. function responseProxy(response){
  27.     var x = eval("("+ response+")");
  28.     setCache(cacheName, cacheName, x.articles[17].article.body); // this is where cache is set as mentioned above.
  29. }

Posted by Dion Almaer at 7:11 am
23 Comments

++++-
4.1 rating from 40 votes

23 Comments »

Comments feed TrackBack URI

Very nice piece of code.

By the way: CSS got messed up on this webpage? :\

Comment by Stephan — November 13, 2006

To be on the safe side, I’ve taken a screenshot as proof. I’m nasty :\

Maybe someone of the developer team of this site wants to have a look at it for troubelshooting?

Comment by Stephan — November 13, 2006

this is big! hardcore developers are going to go crazy with this one. let the games being!

looks like the Ajaxian crew was so excited when they posted this one, a tag or two got messed up. It is monday afterall. :)

Comment by jsguru — November 13, 2006

Not the finest piece of engineering. Could you rewrite that without the eval:s, and with descriptive parameter names?

I get suspicious of code which uses eval for variable lookup, it’s definitely a smell. Use associative arrays instead, that is what they are for.

Comment by Theo — November 13, 2006

It’s about time someone put this together.
Less tripping over to the server spells RELIEF and

Comment by Les Papier — November 13, 2006

I’m glad the global variable “keys” is now taken over by JSOC… </sarcasm>

Comment by Mike Bulman — November 13, 2006

Yeah. That example code is pretty awful. It’s broken — it can’t do concurrency and it has no queue to protect it from itself. Example code like this shouldn’t be published, period. It makes the web stupider.

Comment by Bob Ippolito — November 13, 2006

Very nice piece of code! Thanks, dude!

Comment by emi — November 13, 2006

A very bloated way of stuffing the global scope full of junk, too. The example would be less horrible if it kept its object cache in its own JSOC singleton, though of course still not allow concurrent use by more than one consumer.

Comment by Johan Sundström — November 13, 2006

Is there a library for persistent cache ? Can it be done without installing software on the browser .

Comment by dhoom 2 — November 13, 2006

This is cool …

Comment by yo — November 13, 2006

Globals? WTF?

Comment by Marc Brooks — November 13, 2006

It’s not the worst JavaScript code I’ve ever seen, but it’s close.

Comment by Michael Geary — November 13, 2006

It’s not the worst JavaScript code I’ve ever seen, but it’s close.

My jaw is still dropping.

This is not true. It can’t be true.

I won’t believe it.

N wonder he’s hiding behind his baseball cap…

Comment by Tobie Langel — November 13, 2006

Link Listing – November 13, 2006

Advanced .NET Master Class next month…win a free seat! [Via: gduthie ] SharePoint Solution Generator…

Trackback by Christopher Steen — November 14, 2006

Tobie, want to know what is even scarier?

http://www.google.com/search?q=javascript+title+case

Yes, it’s #1 out of three million!

Comment by Michael Geary — November 14, 2006

It is nice way to minimize traffic in AJAX apps! =-)

Comment by Alexander Lomakin — November 14, 2006

Yes, it’s #1 out of three million!

… jaw hits floor.

Comment by Tobie Langel — November 15, 2006

Links (15 Oct), Web, LUA, .NET, Office 2007 Stuff

General/Web Stuff Windows Vista Ships with .NET FX 3.0 and IIS7 Built-in [Via: ScottGu ] Sun open sources

Trackback by Hulkster — November 15, 2006

Well, I just looked at their 0.0.13 code that was released today. It’s not nearly as bad as before—they got rid of the accidental globals—but the code looks like it was written by somebody that is just learning JavaScript. A good 25% of the code consists of simple mistakes that an experienced JavaScript programmer wouldn’t make.

Now there’s nothing wrong with being a JavaScript beginner—obviously we all were at one time—but it’s quite a stretch to call this “a pluggable, extensible, open source client-side caching framework for JavaScript”.

Comment by Michael Geary — November 15, 2006

Oh no. I just read their docs. Guys, this is not JSON you’re working with. It has nothing to do with JSON.

s/JSON/JavaScript/ and you’ll be OK.

Comment by Michael Geary — November 15, 2006

It’s worse than I thought. Compare their implementations of set(), add(), and replace(). They are the same 20-line function, with one or two lines different at the top!

Comment by Michael Geary — November 15, 2006

[…] JSOC: JavaScript Object Cache, dica muito, muito útil. […]

Pingback by Links comentados via del.icio.us - 8 » Japs — November 30, 2006

Leave a comment

You must be logged in to post a comment.