Posted By

nerdfiles on 12/20/09


Tagged

javascript oop


Versions (?)

Fun with OO JavaScript


 / Published in: JavaScript
 

Exercises... May come in handy to beginners.

  1. QS is an ad hoc loader. It takes n arguments, pushes them into a "tasklist" array. That array is then searched for all the functions it may or may not contain. Each function is executed. (Solves the "window.onload" problem.)

  2. Loader does roughly the same thing, but it allows you to also listen for the "load" of an IDentified element. (This doesn't really work since we cannot listen for the "load" of division elements, etc. (Perhaps?)

  3. $GLOB/etc is an example of passing objects, functions, etc. as arguments.

  4. testFunc is an example of how reference works for non-String objects.

  1. var QS = {
  2. tasklist: [],
  3.  
  4. init: function() {
  5. for (var i = 0; i < arguments.length; i += 1) {
  6. this.tasklist.push(arguments[i]);
  7. }
  8.  
  9. window.onload = function() {
  10. for (var a = 0; a < QS.tasklist.length; a += 1) {
  11. QS.tasklist[a]();
  12. }
  13. }
  14. },
  15.  
  16. alerter: function() {
  17. alert("alerter");
  18. },
  19.  
  20. adder: function() {
  21. alert(2+2);
  22. }
  23. }
  24.  
  25. //QS.init(QS.alerter, QS.adder);
  26.  
  27. var Loader = function( elem ) {
  28.  
  29. this.elem = elem;
  30.  
  31. this.ready = function( func ) {
  32.  
  33. var coolFuncs = [];
  34. coolFuncs.push(func);
  35.  
  36. if ( arguments.length == 1 && typeof this.elem == "string" && this.elem.indexOf("#") != -1 ) {
  37.  
  38. window.onload = function() {
  39.  
  40. this.elem = document.getElementById(this.elem.split("#")[1]);
  41.  
  42. for (var i = 0; i < coolFuncs.length; i += 1) {
  43. // this does not work; apparently we cannot listen for the load
  44. // of division elements
  45. this.elem.addEventListener("load", coolFuncs[i], false);
  46. }
  47.  
  48. }
  49.  
  50. } else {
  51.  
  52. this.elem.onload = function() {
  53.  
  54. for (var i = 0; i < coolFuncs.length; i += 1) {
  55. coolFuncs[i]();
  56. }
  57.  
  58. }
  59. }
  60.  
  61. };
  62.  
  63. if ( this instanceof Loader ) {
  64. return this.Loader;
  65. } else {
  66. return new Loader( this.elem );
  67. }
  68.  
  69. };
  70.  
  71. /*
  72. Loader("#w").ready(function() {
  73. alert('ss');
  74. });
  75. */
  76.  
  77. var $GLOB = {
  78. arr1: [],
  79.  
  80. func1: function() {
  81.  
  82. return this.arr1;
  83. },
  84.  
  85. func2: function() {
  86. alert(this.func1());
  87. },
  88.  
  89. func3: function() {
  90. var args = arguments;
  91. for (var i = 0; i < args.length; i += 1) {
  92. this.arr1.push(args[i]);
  93. }
  94.  
  95. return this.arr1;
  96. }
  97. }
  98.  
  99. var $GLAB = {
  100. func1: function() {
  101.  
  102. },
  103.  
  104. func2: function() {
  105.  
  106. }
  107. }
  108.  
  109. var $GLUB = {
  110. func1: function() {
  111. $GLOB.func3();
  112. },
  113.  
  114. func2: function() {
  115.  
  116. }
  117. }
  118.  
  119. /*
  120. $GLOB.func1();
  121. $GLOB.func3([
  122. $GLAB,
  123. $GLUB.func1()
  124. ]);
  125. */
  126.  
  127. //this is a function
  128. function testFunc() {
  129.  
  130. }
  131.  
  132. //this is an object (from a function, the preceding one)
  133. var newTestFunc = new testFunc();
  134.  
  135. //original array
  136. var globArrayObj = {
  137. arr1: [1,2,3],
  138. arr2: [4,5,6]
  139. };
  140.  
  141. //refers to the original (gets the original, where arr3 and arr4 have yet to be defined)
  142. var newGlobArrayObj = globArrayObj;
  143.  
  144. //resets the original
  145. globArrayObj = {
  146. arr3: [],
  147. arr4: []
  148. };
  149.  
  150. //refers to the original (gets the new reset, where arr1 and arr2 do not exist)
  151. var newGlobArrayObj = globArrayObj;
  152.  
  153. //alert(typeof newGlobArrayObj.arr1);

Report this snippet  

You need to login to post a comment.