Click here to Skip to main content
15,076,130 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
note: I'm JavaScript beginner, so excuse me if this question is too naive.

I'm customizing this jquery alternative small original-library https://github.com/kylebarrow/chibi/blob/master/chibi.js[^] which works the way I want and returns a nodes array(not array-like-object) which can be used with native javascript methods like forEach, slice etc.

But I want to slim it down and optimized only for modern browsers using prototype closure (actually I don't know much about prototype closure, but I want to use it because I heard it saves memory).

Please help me. I hope your help can get rid of my headache & stress I'm having from last 3 days. I asked this question on StackOverflow which went unanswered.
failed to build simple JQuery alternative with prototype closure and returning array to work with native JavaScript methods - Stack Overflow[^]

What I have tried:

JavaScript
(function() {
  'use strict';
  var d = document,
    w = window;


  //Function to loop through node array
  function nodeLoop(fn, nodes) {
    for (var i = 0, len = nodes.length; i < len; i++) {
      fn(nodes[i], i, nodes);
    }
  }


  // Get nodes, convert them to array and return chibi
  function chibi(selector) {
    var cb, nodes = [],
      json = false,
      nodelist, i, len;

    if (selector) {
      // Element node, would prefer to use (selector instanceof HTMLElement) but no IE support
      if (selector.nodeType && selector.nodeType === 1) {
        nodes = [selector]; // return element as node list
      } else if (typeof selector === 'object') {
        json = (typeof selector.length !== 'number');
        nodes = selector;
      } else if (typeof selector === 'string') {
        nodelist = d.querySelectorAll(selector);
        len = nodelist.length;
        for (i = 0; i < len; i += 1) {
          nodes[i] = nodelist[i];
        }

      }
    }
    console.log('Selected nodes:' + nodes); //until here, it is working & shows selected node as array

    // Only attach nodes, not JSON.
    //cb = json ? {} : nodes; //removed. this line used in org-library when working with functions without prototype
    //return cb; //removed. this line used in org-library when working with functions without prototype
  }

  function cb(selector) {
    return new chibi(selector);
  }


  //Public functions (are these public methods or private. please tell me this as well. thanks)
  chibi.fn = chibi.prototype = {
    on: function(event, fn) {
      //==>may be problem here; "this" shows [Obj Obj] why not array. this.length undefined
      console.log(this + this.length);
      nodeLoop(function(elm) {
        console.log(elm);
        elm.addEventListener(event, fn, false);
      }, this);
      return this;
    },
    html: function(value) {
      if (value || value == '') {
        nodeLoop(function(elm) {
          elm.innerHTML = value;
        }, this);
        return this;
      }
      if (this[0]) {
        return this[0].innerHTML;
      }
    }
    //,constructor: chibi //I used this from another question on StackOverflow but still did not work (btw what is it?)
  };


  //Expose Chibi's global namespace here ($)
  window.$ = cb;
}());




//this code works correctly if I use with org-library, but not with my modified version using prototype way.
$('.heading').on('mouseover', function(event) {
  $(this).html('replacing heading text');
  //using "slice" to test if selector is working with native array methods. don't tell me it can be done with $('ul li:last-of-type'). BTW it works with org-library.
  $($('ul li').slice(2)).forEach(function(elm, index) {
    //third li innerHTML should be replaced. works with org-library.
    elm.innerHTML = index;
  });
});



HTML
<html>
<body>
  <h1 class="heading">This is demo Heading</h1>
  <ul>
    <li>first li</li>
    <li>second li</li>
    <li>third li</li>
  </ul>
</body>
</html>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900