Failed to build simple jquery alternative with prototype closure and returning array to work with native javascript methods

Question

0.00/5 (No votes)

See more:

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 8-Jul-21 22:23pm

Samar PW

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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