visible選擇器

nanchen2251 發(fā)布于2019-08-21 14:06 / 1822人閱讀

摘要：由于的精簡，以置于之前的的代碼不能運(yùn)行了，其中選擇器就是其中一個。總結(jié)最終我選擇了最后一種，功能能夠滿足現(xiàn)有的需求。其實很強(qiáng)大，這選擇器只是其九牛一毛，后面可以再學(xué)習(xí)學(xué)習(xí)其思想。

現(xiàn)在移動端項目在重構(gòu)階段，將之前的jQuery全部替換成Zepto了。由于Zepto的精簡，以置于之前的jQuery的代碼不能運(yùn)行了，其中visible選擇器就是其中一個。既然已經(jīng)選擇了Zepto，那就給Zepto增加visible功能。

分析

第一反應(yīng)就是思考通過元素的屬性來判斷，然后嘗試了使用display和visibility來進(jìn)行判斷。但是經(jīng)過小的測試，是我想的簡單了！

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

自己的實現(xiàn)是可以的，不過自我感覺有點(diǎn)饒了，看看能不能透過其它方式來解決。

jQuery實現(xiàn)

查看了jQuery3.0的內(nèi)部實現(xiàn)，最終調(diào)用的是jQuery.expr.filters.visible

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

jQuery首先的判斷元素的offsetWidth和offsetHeight。因為根元素隱藏后，導(dǎo)致其子元素的寬高為0。不占用文檔流，這很好理解。

getClientRects：獲取元素占據(jù)頁面的所有矩形區(qū)域，用于獲取元素占據(jù)頁面的所有矩形區(qū)域
與之相關(guān)的是getBoundingClientRect。
getBoundingClientRect：用于獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置

而為什么要使用這個呢？在官網(wǎng)找到了答案。

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 element that don"t have height are considered to be visible.

大體的意思是對于一個元素本身寬高都為0，但是占據(jù)了穩(wěn)定流，這是能認(rèn)為是visible的。比如像換行br、空的span 標(biāo)簽。

其它實現(xiàn)

在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);

總結(jié)

最終我選擇了最后一種，功能能夠滿足現(xiàn)有的需求。

其實Sizzle很強(qiáng)大，這visible選擇器只是其九牛一毛，后面可以再學(xué)習(xí)學(xué)習(xí)其思想。

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