Question

我遇到了让选择器成为缓存的问题，所以，基本上我没有使用JQUERY Framework。我创建了自己的模仿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/

输出结果是：紫色的孩子，但为什么父母也变成紫色？

我知道在我的find函数中，我使用这个[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;
       }
    }
};
})();

Javascript缓存选择器功能

1 个答案: