Javascript缓存选择器功能

Question

I'm having problem for getting selector being cache, so, basically I'm not using JQUERY Framework. I create my own Framework that mimicry JQUERY pattern.

This is my code :

"use strict"

var $, i;

(function() {

    $ = function(el) {
        return new obj$(el);
    };

    var obj$ = function(el) {
       var cl   = document.getElementsByClassName(el),
           loop = cl.length;

       this.length = loop;

       for (i = 0; i < loop; i++) {
           this[i] = cl[i];
       }

   };

   obj$.prototype = {

       find : function(el) {

           if (this.length == 1) {
               this[0] = this[0].getElementsByClassName(el)[0]; // this is the problem, it's reset everything
               return this;
           }

       },
       css : function(obj, data) {

           if (this.length == 1) {
               this[0].style[obj] = data;
               return this;
           }

        },
        cache : function() {

            if (this[0].hasOwnProperty("find")) {
                return this[0]; // reset the selector from $() that has been hook by find function
             }
             else {
                return this[0].find(); // do nothing if $() has not been hook by find function
             }

        }

    };


})();

var parent = $("parent"), // i want this selector being cache
    child  = parent.find("child"); // but, when i hook this "find" function it's reset parent selector

child.css("color", "orange");
parent.css("color", "purple");

<div class="parent">parent
    <div class="child">child</div>
</div>

jsfiddle : https://jsfiddle.net/k6j70f1h/

The output was : child with color purple, but, why not parent also become purple?

I know that in my find function, i use this[0] = this[0].getElementsByClassName(el)[0];

So, It's reset the $() object selector.

How to prevent this problem occure? I just look at hasOwnProperty method. is it possible creating another function for checking hasOwnProperty?

I want $() object keep its selector even has been chaining with find function?

Any suggestion guys? thanks..

Answer 1

The find method should return a new instance of the $ object, not modify the existing result. Your implementation should also, like jQuery, accept a second argument which is the context in which the search is performed (defaults to the document ).

So your find could be implemented like this:

find : function(el){
    return $( el, this[0] );
}

updated fiddle demo

var $, i;

(function() {

$ = function(el, context) {
      context = context || document;
      return new obj$(el, context);
};

var obj$ = function(el, context) {
   var cl   = context.getElementsByClassName(el),
       loop = cl.length;

   this.length = loop;

   for (i = 0; i < loop; i++) {
       this[i] = cl[i];
   }
};

obj$.prototype = {

   find : function(el) {

       if (this.length == 1) {
           return $( el, this[0] );
       }

   },
   css : function(obj, data) {
       if (this.length == 1) {
           this[0].style[obj] = data;
           return this;
       }
    }
};
})();