Question

我试着制作一个非常精简的jQuery，就像＃34;选择器，但我有问题使它适用于所有类，我尝试使用for循环，但因为＆＃34;返回新的＆＃34;它制动循环。

JS

var $ = function(el){       
  var helpers = {
    css: function(v){
      (this.value).setAttribute('style',v);     
    },
    replace: function(v){
      (this.value).innerHTML = v;
      console.log(this.value);
    },
    append: function(v){
      (this.value).innerHTML =  (this.value).outerHTML + ' ' + v;
    }
  };
  function sel(el){ 
    this.value = document.querySelector(el);
  }
  sel.prototype = helpers;
  return new sel(el);
};

var sel1 = $('.sel1');

sel1.replace('<span>replaced</span>');
sel1.css("color:red");

HTML

<div class="sel1">test</div>
<div class="sel1">test</div>
<div class="sel1">test</div>

Answer 1

您希望使用Document.querySelectorAll()获取所有匹配项，而不仅仅是第一项匹配项。这就是jQuery的作用。

显然，这意味着＆＃39;价值＆＃39;不是节点，而是NodeList（或null）。这会更改函数，因为它们都必须处理列表，因此您必须使用某种形式的foreach()将函数应用于每个节点（这也是jQuery的作用，请参阅get()这是一个很好的证据。）

最后，如果没有匹配，jQuery获取null并且函数仍然有效。这是因为每个函数都使用foreach()函数，而在null上，foreach()什么都不做。因此，您必须实施foreach()。也许是这样的：

function foreach(list, func)
{
   var max, i, n;

   if(list) // make sure list is not 'null'
   {
       max = list.length;
       for(i = 0; i < max; ++i) // go through the elements
       {
           n = list[i];
           func(n);   // call user function
       }
   }
}

然后css函数会变成这样：

css: function(v)
{
  foreach(this.value, function(n) { n.setAttribute('style', v); });
}

注意：如果您使用foreach()部分帮助者，请务必使用this.foreach()进行调用。

Answer 2

jQuery的一个强大功能是链接命令的可能性，这实际上是通过保持对初始选择器查询的引用来完成的。为了得到基本的想法，一个简单的启动实现可能如下所示：

render() {
    var productList = [];

        this.state.data.products.forEach(function (tmpProduct) {
            productList.push(
                <View style={cardView} key={tmpProduct.id}>

                    <Grid style={upperGrid}>
                        <Col style={{flex: 0.5}}>
                            <Thumbnail
                                source={require('../../../images/sample-image.png')}
                                style={itemThumb}>
                        </Col>
                        <Col>
                            <Text style={cardItemHeader} numberOfLines={2}>{tmpProduct.title}</Text>
                            <Text style={cardItemBody} numberOfLines={2}>{tmpProduct.description}</Text>
                        </Col>
                    </Grid>
                </View>
            );
        }.bind(this));

    return (
        <Container theme={theme}>
            <Image source={require('../../../images/grad-bg.png')} style={background} >

                <Content style={scrollContent}>

                    {productList}

                </Content>

            </Image>
        </Container>
    )
}

上面代码的简单工作示例如下所示：

$$$ = function(selector) {
  var Handler = function(selector) {
    var elements = document.querySelectorAll(selector);
    this.css = function(options) {
      for (var i=0; i<elements.length; i++) {
        for (var property in options) {
          elements.item(i).style[property] = options[property];
        }
      }
      return this;
    };
    this.hide = function() {
      return this.css({display: 'none'});
    };
    this.show = function() {
      return this.css({display: ''});
    };
    this.replace = function(html) {
      for (var i=0; i<elements.length; i++) {
        elements.item(i).innerHTML = html;
      };
      return this;
    };
  };
  return new Handler(selector);
};

由于所有内部函数都返回当前实例（$$$('div').css({border: '1px solid red', background: 'green'}).hide().show();），因此启用了对不同操作的链接调用。

尝试使用多个选择器制作jQuery

2 个答案: