Oct 09

$: Now with more magic!

Ajax Add comments

Dustin Diaz is on a roll :) He has posted about Roll out your own JavaScript Interfaces in which he discusses the desire to use style from libraries such as prototype, jquery and friends, yet in a small bit of code where you don't want to use the library:

There are times when using a JavaScript library is called for. Building large web applications that use a wide array of utility functions that help aid in developing multi-tiered class systems, advanced UI components, complex event models, and heavy use of DOM scripting helpers. Yep. Those are all great.
However, there are other times when you don’t need all that. And often what we end up doing is just importing a few of our favorite functions as globals, and work off those. But what ends up happening in this case is that we lose the particular style that these libraries offer. For instance, I’d still like to be able to do something like this without a library.

Dustin would like to write something like this:

PLAIN TEXT
JAVASCRIPT:

  2. $('foo', 'bar').on('click', function(e) {
  3. $(this).css({
  4. color: 'green',
  5. fontSize: '2em'
  6. }).addClass('active');
  7. });

And to implement the magic he takes Prototypes $() and makes it a special object that can do much more:

PLAIN TEXT
JAVASCRIPT:

  2. (function() {
  3. // private constructor
  4. function _$(els) {
  5. this.elements = [];
  6. for (var i=0; ilength; i++) {
  7. var element = els[i];
  8. if (typeof element == 'string') {
  9. element = document.getElementById(element);
  10. }
  11. this.elements.push(element);
  12. }
  13. return this;
  14. }

  16. _$.prototype = {
  17. each: function(fn) {
  18. for ( var i = 0, len = this.elements.length; i) {
  19. fn.call(this, this.elements[i]);
  20. }
  21. return this;
  22. },
  23. setStyle: function(prop, val) {
  24. this.each(function(el) {
  25. el.style[prop] = val;
  26. });
  27. return this;
  28. },
  29. addClass: function(className) {
  30. this.each(function(el) {
  31. el.className += ‘ ‘+className;
  32. });
  33. return this;
  34. },
  35. on: function(type, fn) {
  36. var listen = function(el) {
  37. if (window.addEventListener) {
  38. el.addEventListener(type, fn, false);
  39. } else if (window.attachEvent) {
  40. el.attachEvent(’on’+type, function() {
  41. fn.call(el, window.event);
  42. });
  43. }
  44. };
  45. this.each(function(el) {
  46. listen(el);
  47. });
  48. return this;
  49. },
  50. css: function(o) {
  51. var that = this;
  52. this.each(function(el) {
  53. for (var prop in o) {
  54. console.log(prop);
  55. that.setStyle(prop, o[prop]);
  56. }
  57. });
  58. return this;
  59. }
  60. };
  61. window.$ = function() {
  62. return new _$(arguments);
  63. }
  64. })();

You can see a demonstration at work.

[via Ajaxian]

Leave a Reply

Entries RSS Comments RSS Login