在JavaScript中調整大小的添加/刪除類

我正在嘗試學習jQuery和JavaScript，所以請耐心等待。我有一個jQuery函數，可以在調整大小時添加和刪除類。 jQuery的：在JavaScript中調整大小的添加/刪除類

$(document).ready(function($) { 
    var $window = $(window), $element = $('.test'); 

    function resize() { 
     if ($window.width() < 768) { 
     return $element.addClass('mobile'); 
     }  
     $element.removeClass('mobile'); 
    } 

    $window.resize(resize).trigger('resize'); 
});

我想在JavaScript中建立這個，但我只是學習它目前和我失去了試圖找出答案。我希望看到一個JavaScript示例，但我只找到了jQuery版本。我試圖瞭解這些差異。一個例子將不勝感激！

來源

2017-03-09 adam g

什麼你的問題嗎？ – user7417866

所以你說你的代碼工作正常，你只是想讓別人在原生JS中給你寫相同的邏輯，對吧？此外，您擁有的邏輯將更適合於CSS媒體查詢，因爲它速度更快，並且具有更少的CPU開銷。 –

只要學習jquery - 海事組織發展更有效率，更清潔/更可維護。如果你*必須*去與js，那麼有大量的轉換參考，例如：http://youmightnotneedjquery.com/ http://callmenick.com/post/jquery-functions-javascript-equivalents –

function ready(resize) { 
    if (document.readyState != 'loading'){ 
    resize(); 
    } else { 
    document.addEventListener('DOMContentLoaded', resize); 
    } 
}

上面的函數是$(document).ready()

你調整大小功能

function resize() { 
    var elements = document.getElementsByClassName('test'); 
    var firstEl = elements[0]; 
    var className = 'mobile'; 
    if (window.innerWidth < 768) { 
     // add Class 
     if (firstEl.classList) { 
      firstEl.classList.add(className); 
     } else { 
      firstEl.className += ' ' + className; 
     } 
     } else { 
     // remove Class 
     if (firstEl.classList) { 
      firstEl.classList.remove(className); 
     } else { 
      firstEl.className = firstEl.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); 
     } 
     } 
}

替代你可以看到，我只取了的className匹配的第一個元素。如果要將類添加到所有元素，請循環訪問數組元素。

所以現在我們只需添加事件監聽器來調整窗口大小並調用就緒。

window.onresize = function(event) { 
    resize(); 
}; 
ready(resize);

如果你不知道你怎麼能寫在純JavaScript特定的jQuery函數，我可以推薦你：You Might Not Need jQuery

來源

2017-03-09 08:00:26 Erdem

要重新創建的jQuery功能爲香草JavaScript函數，你可以使用下面的做法：

document.addEventListener("DOMContentLoaded", function(event) { 
    var element = document.querySelector('.test'); 

    function resize() { 
    if (window.innerWidth < 768) { 
     element.classList.add('mobile'); 
    } else { 
     element.classList.remove('mobile'); 
    } 
    } 
    // For performance reasons, this method should be 
    // "debounced" so that it doesn't have to execute 
    // on every resize event, only when you're done resizing. 
    window.onresize = resize; 
});

你可以去抖動念起來它的好處here，或者你可以可以檢查出_.debounce() from lodash。

學習jQuery和香草JavaScript之間的差的絕對值最好的辦法（IMO）是：

閱讀jQuery的源代碼，看看他們如何實現他們的API。因爲jQuery只是一個JavaScript庫，所以您可以看到jQuery使用「幕後」來製作所有魔術的香草JavaScript。
當您正在研究jQuery項目或功能時，作爲練習，嘗試在沒有jQuery的情況下實現相同的項目/功能，您將很快了解jQuery如此有用的原因，但您將更多地瞭解DOM和香草JavaScript在瀏覽器中。

注意，由於這種特殊的功能只添加和刪除基於窗口大小的一類，你可以在CSS中使用@media查詢得到同樣的效果，這可能會比上面的JavaScript實現更好的性能。

例如，你可以達到同樣的效果沒有JavaScript這樣的：

@media screen and (max-width: 768px) { 
    .test { 
     background-color: red; 
    } 
    }

來源

2017-03-09 08:07:23 radiovisual

在JavaScript中調整大小的添加/刪除類

回答

相關問題