Как можно сократить этот js код?

Question

[Сергей Миллер]

Есть такой код. Как его можно сократить чтобы не так много его было?

$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.myMouse').each(function() {
var self = $(this),
height = self.offset().top + self.height();
if ($(document).scrollTop() + windowHeight >= height) {
$('#box2').show()}});});});

$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.go3').each(function() {
var self = $(this),
height = self.offset().top + self.height();
if ($(document).scrollTop() + windowHeight >= height) {
$('#box3').show()}});});});

$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.go4').each(function() {
var self = $(this),
height = self.offset().top + self.height();
if ($(document).scrollTop() + windowHeight >= height) {
$('#box4').show()}});});});

$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.go5').each(function() {
var self = $(this),
height = self.offset().top + self.height();
if ($(document).scrollTop() + windowHeight >= height) {
$('#box5').show()}});});});

$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.go6').each(function() {
var self = $(this),
height = self.offset().top + self.height();
if ($(document).scrollTop() + windowHeight >= height) {
$('#box6').show()}});});});

$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.go7').each(function() {
var self = $(this),
height = self.offset().top + self.height();
if ($(document).scrollTop() + windowHeight >= height) {
$('#box7').show()}});});});

$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.go8').each(function() {
var self = $(this),
height = self.offset().top + self.height();
if ($(document).scrollTop() + windowHeight >= height) {
$('#box8').show()}});});});

$(document).ready(function() {
var windowHeight = $(window).height();
$(document).on('scroll', function() {
$('.gofooter').each(function() {
var self = $(this),
height = self.offset().top + self.height();
if ($(document).scrollTop() + windowHeight >= height) {
$('footer, .line_again').show()}});});});

Answer 1

[Igor Koch]

$(document).ready(function() {
    var windowHeight = $(window).height();
    $(document).on('scroll', function() {
        $('.myMouse, .go3, .go4, .go5, .go6, .go7, .go8, .gofooter').each(function() {
            var self = $(this),
                height = self.offset().top + self.height();
            if ($(document).scrollTop() + windowHeight >= height) {
                $('#box2, #box3, #box4, #box5, #box6, #box7, #box8, footer, .line_again').show()
            }
        });
    });
});

И совсем коротко:

$(document).ready(function(){var o=$(window).height();$(document).on("scroll",function(){$(".myMouse, .go3, .go4, .go5, .go6, .go7, .go8, .gofooter").each(function(){var n=$(this),t=n.offset().top+n.height();$(document).scrollTop()+o>=t&&$("#box2, #box3, #box4, #box5, #box6, #box7, #box8, footer, .line_again").show()})})});

Comments

[Сергей Миллер]

Спасибо

[Kovalsky]

Сергей Миллер, также можно:
1. Вместо "$( document ).ready( callback )" пользоваться ярлыком "$( callback )",
2. Вместо "$( document ).on( event_name, callback )" пользоваться ярлыком "$( document ).event_name( callback )", в данном случае $( document ).scroll( callback )",
3. Сохранить в переменную объект документа и в коде обращаться уже к ней:

var doc = $( document );

4. Вместо перечисления связанных элементов просто добавлять элементам какой-нибудь атрибут, который бы содержал информацию о связи с другим элементом, например так:

<div data-on-visible-show="#box2"></div>

Тогда в коде вы бы просто выбрали все элементы у которых есть атрибут data-on-visible-show и если он оказался видимый, то показывали бы элемент найденный по селектору #box2, например.

К тому же в коде логическая ошибка, нельзя просто взять и объединить селекторы - если в вашем варианте проверялся каждый элемент и показывался соответствующий ему, то в предложенном варианте если хоть один из верхних элементов соответствует условию, то будут показываться сразу все нижние элементы.

Минификация это автоматический процесс, не стоит заниматься ей вручную.

Answer 2

[Alexander Kramov]

Можно воспользоваться UglifyJS, но мне кажется, что этот код нужно сделать не короче, а понятней: как минимум отступы расставить.