visible选择器

2019年8月31日 279次阅读 来源: 小强730730

如今挪动端项目在重构阶段，将之前的jQuery悉数替换成Zepto了。由于Zepto的精简，以置于之前的jQuery的代码不能运行了，个中visible挑选器就是个中一个。既然已挑选了Zepto，那就给Zepto增添visible功用。

剖析

第一回响反映就是思索经由过程元素的属性来推断，然后尝试了运用display和visibility来举行推断。然则经太小的测试，是我想的简朴了！

display是没法继续父元素的，visibility是能够继续父元素，然则父元素采纳的是display显现与隐蔽。

参考地点1
参考地点1

我的主意

既然模块的根元素是用display显现与隐蔽，那我先就经由过程类挑选器，选到元素。然后再透过递归推断父元素display，直到body元素。

;(function($) {
    
    var _filter = $.fn.filter;

    function visible(elem) {
        var $elem = $(elem);
        if($elem.css('display') === 'none') {
            return false;
        }else {
            if($elem.is('body')) {
                return true;
            }else {
                if(visible($elem.parent())) {
                    return true;
                }
            }
        }
    }

    $.fn.filter = function(sel) {
        if (sel === ":visible") {
            return $([].filter.call(this, visible));
        }
        return _filter.call(this, sel);
    };
})(window.Zepto);

自身的完成是能够的，不过自我感觉有点饶了，看看能不能透过别的体式格局来处理。

jQuery完成

查看了jQuery3.0的内部完成，终究挪用的是jQuery.expr.filters.visible

jQuery.expr.filters.visible = function( elem ) {
    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

jQuery起首的推断元素的offsetWidth和offsetHeight。由于根元素隐蔽后，致使其子元素的宽高为0。不占用文档流，这很好明白。

getClientRects：猎取元素占有页面的一切矩形地区，用于猎取元素占有页面的一切矩形地区
与之相干的是getBoundingClientRect。
getBoundingClientRect：用于取得页面中某个元素的左，上，右和下离别相对浏览器视窗的位置

而为什么要运用这个呢？在官网找到了答案。

Breaking change: Behavior of :hidden and :visible
An element is considered now visible if it has a layout box returned from the DOM getClientRects() method,even if that box has a height and/or width of zero. This means that elements such as
or an empty <span> element that don’t have height are considered to be visible.

大致的意义是关于一个元素自身宽高都为0，然则占有了稳固流，这是能认为是visible的。比如像 换行br、空的span 标签。

别的完成

在github上也找到了，对Zepto增添visible的要领。

;(function($){
  var _is = $.fn.is, _filter = $.fn.filter;

  function visible(elem){
    elem = $(elem);
    return !!(elem.width() || elem.height()) && elem.css("display") !== "none";
  }

  $.fn.is = function(sel){
    if(sel === ":visible"){
      return visible(this);
    }
    if(sel === ":hidden"){
      return !visible(this);
    }
    return _is.call(this, sel);
  }

  $.fn.filter = function(sel){
    if(sel === ":visible"){
      return $([].filter.call(this, visible));
    }
    if(sel === ":hidden"){
      return $([].filter.call(this, function(elem){
        return !visible(elem);
      }));
    }
    return _filter.call(this, sel);
  }
})(Zepto);

总结

终究我挑选了末了一种，功用能够满足现有的需求。

实在Sizzle很壮大，这visible挑选器只是其沧海一粟，背面能够再进修进修其头脑。

原文地点http://xiaoqiang730730.github.io/2016/07/16/visible%E9%80%89%E6%8B%A9%E5%99%A8/

    原文作者：小强730730
    原文地址: https://segmentfault.com/a/1190000005992918
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞