Question

我是编码javascript和jquery的新手，说实话，有很多我不理解的东西但是我总是设法使事情有效，感谢这个精彩的社区。我为一个项目写了一些东西，但我确信它不是那么整洁有序，一切正常但我希望它尽可能干净。如果有人对如何清理/改进下面的代码有任何建议或意见，那将是非常棒的。顺便说一句，抱歉我的英语不好。谢谢！

// SCROLL
$(document).ready(function() {
  $('.scrollTo').click(function() { // Au clic sur un élément
    var page = $(this).attr('href'); // Page cible
    var speed = 8500; // Durée de l'animation (en ms)
    $('html, body').animate({
      scrollTop: $(page).offset().top
    }, speed); // Go
    return false;
  });
});

//INTRO
$(window).scroll(function() {
  if ($(window).scrollTop() < 200) {
    $('#clic').stop(true, true).fadeIn();
  } else {
    $('#clic').stop(true, true).fadeOut();
  }
});

//OPACITE
var divs = $('#jour');
$(window).scroll(function() {
  var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
  divs.css('opacity', 1 - percent);
});

//STARS
$(document).ready(function() {
  var animationStarted = false;

  $(window).scroll(function() {
    if ($(window).scrollTop() > 10000 && !animationStarted) {
      $("#stars1").animate({
        "right": "+=3000px"
      }, 4000);
      animationStarted = true;
    };
    if ($(window).scrollTop() < 10000 && animationStarted) {
      $("#stars1").animate({
        "right": "-=3000px"
      }, 4000);
      animationStarted = false;
    };
  });
});
$(document).ready(function() {
  var animationStarted = false;

  $(window).scroll(function() {
    if ($(window).scrollTop() > 10600 && !animationStarted) {
      $("#stars2").animate({
        "right": "+=3000px"
      }, 4000);
      animationStarted = true;
    };
    if ($(window).scrollTop() < 10600 && animationStarted) {
      $("#stars2").animate({
        "right": "-=3000px"
      }, 4000);
      animationStarted = false;
    };
  });
});
$(document).ready(function() {
  var animationStarted = false;

  $(window).scroll(function() {
    if ($(window).scrollTop() > 11000 && !animationStarted) {
      $("#stars3").animate({
        "right": "+=3000px"
      }, 5000);
      animationStarted = true;
    };
    if ($(window).scrollTop() < 11000 && animationStarted) {
      $("#stars3").animate({
        "right": "-=3000px"
      }, 5000);
      animationStarted = false;
    };
  });
});
$(document).ready(function() {
  var animationStarted = false;

  $(window).scroll(function() {
    if ($(window).scrollTop() > 11600 && !animationStarted) {
      $("#stars4").animate({
        "right": "+=3000px"
      }, 5000);
      animationStarted = true;
    };
    if ($(window).scrollTop() < 11600 && animationStarted) {
      $("#stars4").animate({
        "right": "-=3000px"
      }, 5000);
      animationStarted = false;
    };
  });
});
$(document).ready(function() {
  var animationStarted = false;

  $(window).scroll(function() {
    if ($(window).scrollTop() > 50 && !animationStarted) {
      $("#dcw").animate({
        "left": "+=3000px"
      }, 3000);
      animationStarted = true;
    };
    if ($(window).scrollTop() < 50 && animationStarted) {
      $("#dcw").animate({
        "left": "-=3000px"
      }, 3000);
      animationStarted = false;
    };
  });
});
$(document).ready(function() {
  var animationStarted = false;

  $(window).scroll(function() {
    if ($(window).scrollTop() > 1000 && !animationStarted) {
      $("#dcw2").animate({
        "left": "+=3000px"
      }, 3000);
      animationStarted = true;
    };
    if ($(window).scrollTop() < 1000 && animationStarted) {
      $("#dcw2").animate({
        "left": "-=3000px"
      }, 3000);
      animationStarted = false;
    };
  });
});
$(document).ready(function() {
  var animationStarted = false;

  $(window).scroll(function() {
    if ($(window).scrollTop() > 5000 && !animationStarted) {
      $("#dcw3").animate({
        "left": "+=3000px"
      }, 3000);
      animationStarted = true;
    };
    if ($(window).scrollTop() < 5000 && animationStarted) {
      $("#dcw3").animate({
        "left": "-=3000px"
      }, 3000);
      animationStarted = false;
    };
  });
});

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
	background: #c7d6ee; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M3ZDZlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDA5MTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  #c7d6ee 0%, #000911 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7d6ee), color-stop(100%,#000911)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #c7d6ee 0%,#000911 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #c7d6ee 0%,#000911 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #c7d6ee 0%,#000911 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #c7d6ee 0%,#000911 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7d6ee', endColorstr='#000911',GradientType=0 ); /* IE6-8 */
	max-height: 30000px;
	font-family: 'Open Sans', sans-serif;
}
a {
	text-decoration: none;
	color: #ffffff;
}
a:visited { text-decoration: none; color:white; }
a:hover { text-decoration: none; color:white; }
a:focus { text-decoration: none; color:white; }
a:hover, a:active { text-decoration: none; color:white; }
h1, h2, h3 {
	text-decoration: none;
	color: white;
}
#clic img{
	max-width: 100px;
}
#clic{
	top: 0;
	position: fixed;
	z-index: 11;
	background: #000000;
	margin: 0 auto;
	text-align: center;
	width: 100%;
	height: 100vh;
	padding-top: 15%;
}
#dcw{
	position: fixed;
	color: #ffffff;
	z-index: 12;
	top: 30px;
	left: -2950px;
	max-width: 100%;
	height: auto;
	border-top: 3px solid;
}
#dcw2{
	position: fixed;
	color: #ffffff;
	z-index: 12;
	top: 55px;
	left: -2950px;
	max-width: 100%;
	height: auto;
}
#dcw3{
	position: fixed;
	color: #ffffff;
	z-index: 12;
	top: 95px;
	left: -2950px;
	max-width: 100%;
	height: auto;
	border-bottom: 3px solid;
}

#dcw p{
	font-size: 1.5em;
	font-weight: bold;
}
#dcw2 p{
	font-size: 2em;
	font-weight: bold;
}
#dcw3 p{
	font-size: 2em;
	font-weight: bold;
	
}
#clic h1 h2 {
	text-decoration: none;
	color: #ffffff;
}

#jour {
	position: fixed;
	bottom: 0px;
	max-width: 100%;
	height: auto;
	z-index: 10;
}
#nuit {
	position: fixed;
	bottom: 0px;
	max-width: 100%;
	height: auto;
	z-index: 9;
}
#bottom {
	margin-top: 29990px;
}
.stars {
	bottom: 100px;
	right: -3000px;
	position: fixed;
	max-width: 100%;
	height: auto;
	opacity: 0.8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>DCW</title>
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <link rel="stylesheet" href="css/normalize.css" type="text/css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic,800italic,800' rel='stylesheet' type='text/css'>
</head>

<body>
  <div id="dcw">
    <p>DCW éditions vous souhaite</p>
  </div>
  <div id="dcw2">
    <p>un joyeux noël</p>
  </div>
  <div id="dcw3">
    <p>et une très belle année 2015</p>
  </div>
  <div id="clic"><a class="scrollTo" href="#bottom"><h3>GREETINGS FROM</h3><img src="img/logo_dcw.png"><h2>cliquez ou scrollez</h2><h1>&#8615;</h1> </a>
  </div>
  <div>
    <img id="jour" src="img/jour2.png">
  </div>
  <div>
    <img id="nuit" src="img/nuit2.png">
  </div>
  <div>
    <img id="stars1" class="stars" src="img/stars1.png">
    <img id="stars2" class="stars" src="img/stars2.png">
    <img id="stars3" class="stars" src="img/stars3.png">
    <img id="stars4" class="stars" src="img/stars_logo.png">
  </div>
  <div id="bottom"></div>
</body>

</html>

Answer 1

这看起来像普通的javascript给我。我想一些混乱可能归因于在进行函数式编程时出现的所有括号和括号。有些语言可以编译成javascript。如果你正在寻找“更干净”的东西，你可能想看看那些。 F.ex dart编程语言。

Answer 2

我不会评论太多但至少提出一些建议。

对于您的JavaScript代码

在单$(document).ready()个功能

$(document).ready()

在函数中编写公共代码
在适当的位置包含外部JavaScript（您已在DOCTYPE上面编写了JavaScript）
永远不要过度评论代码。仅使用特定评论
使CSS像同一个按钮，输入的常见css一样干净。不要为每个按钮元素使用css。

你可以通过时间学习的其他事情......

Answer 3

提供一些提示：

您无需继续调用document.ready，只需执行一次即可。它
只是为了确保所有的DOM元素都被加载，所以它只会被加载永远需要被召唤一次。

您的滚动功能始终在侦听鼠标页面滚动，因此多次调用它并没有任何区别。您可以把它全部放在一个街区。

在顶部声明所有变量以保持它们的有序性。

$(document).ready(function() {

  var divs = $('#jour');
  var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
  var animationStarted = false;

  $(window).scroll(function() {

    if ($(window).scrollTop() < 200) {
      $('#clic').stop(true, true).fadeIn();
    } else {
      $('#clic').stop(true, true).fadeOut();
    }

    if ($(window).scrollTop() > 10000 && !animationStarted) {
      $("#stars1").animate({
        "right": "+=3000px"
      }, 4000);
      animationStarted = true;
    };

    if ($(window).scrollTop() < 10000 && animationStarted) {
      $("#stars1").animate({
        "right": "-=3000px"
      }, 4000);
      animationStarted = false;
    };

  });
  divs.css('opacity', 1 - percent);
});

其他一切看起来都不错！

需要帮助来清理我的代码

3 个答案: