Javascript 缓存选择器函数

Question

我在获取选择器缓存时遇到问题，所以，基本上我没有使用 JQUERY 框架。我创建了自己的模仿 JQUERY 模式的框架。

这是我的代码:

"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/

输出是: child 的颜色是紫色的，但是，为什么 parent 不也变成紫色呢？

我知道在我的查找函数中，我使用 this[0] = this[0].getElementsByClassName(el)[0];

因此，它重置了 $() 对象选择器。

如何避免这个问题的发生？我只看 hasOwnProperty 方法。是否可以创建另一个函数来检查 hasOwnProperty？

即使已与 find 函数链接，我也希望 $() 对象保留其选择器？

大家有什么建议吗？谢谢..

Answer 1

find 方法应返回 $ 对象的新实例，而不是修改现有结果。您的实现还应该像 jQuery 一样接受第二个参数，它是执行搜索的上下文(默认为 document)。

所以你的find可以这样实现:

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;
       }
    }
};
})();