Question

你好我是刚接触网络开发的新手，几周前刚刚开始使用JavaScript，请帮助我尽可能缩短代码。如何重构此JavaScript代码以缩短它？

<script type="text/javascript">
if(document.URL.indexOf("movie1") != -1) {
    document.getElementById("aflam-body").style.background = "red";
    document.getElementById('mttitle').innerHTML=document.getElementById('moviz-name-1').innerHTML;
    document.getElementById("pr1").style.display = "block";
    var elms = document.querySelectorAll("#movie2, #movie3, #movie4, #movie5, #movie6, #movie7, #movie8, #movie9");

    for(var i = 0; i < elms.length; i++) elms[i].style.display='none';
}
else {} 
</script>

<script type="text/javascript">
if(document.URL.indexOf("movie2") != -1) {
    document.getElementById("aflam-body").style.background = "grey";
    document.getElementById('mttitle').innerHTML=document.getElementById('moviz-name-2').innerHTML;
    document.getElementById("pr2").style.display = "block";
    var elms = document.querySelectorAll("#movie1, #movie3, #movie4, #movie5, #movie6, #movie7, #movie8, #movie9");

    for(var i = 0; i < elms.length; i++) elms[i].style.display='none';
}
else {} 
</script>

<script type="text/javascript">
function bk1 () {
    d.g("movie1").style.width = "184px";
    d.g("im1").style.height = "50%";
    d.g("im1").style.width = "94%";
    d.g('im1').src='img/aflam3.png'; 
    d.g('movie1').style.background="red url('img/ox-kkk.png')";
    d.g('movie2').style.display = "inline-block";
    d.g('movie3').style.display = "inline-block";
    d.g('movie4').style.display = "inline-block";
    document.querySelector('#moviz-name-1').scrollIntoView({behavior:'smooth'});}
</script>

<script type="text/javascript">
function go1 () {
    d.g("movie1").style.width = "90%";
    d.g("im1").style.width = "90%";
    d.g("im1").style.height = "60%";
    d.g("movie1").style.backgroundSize = "30%";  
    d.g('movie1').style.background="red url('img/favicon.png')  center"; 
    d.g('movie2').style.display = "none";
    d.g('movie3').style.display = "none";
    d.g('movie4').style.display = "none";
    document.querySelector('#moviz-name-1').scrollIntoView({behavior:'smooth'});}
</script>

<script type="text/javascript">
function bk2 () {
    d.g("movie2").style.width = "184px";
    d.g("im2").style.height = "50%";
    d.g("im2").style.width = "94%";
    d.g('im2').src='img/aflam3.png'; 
    d.g('movie2').style.background="red url('img/ox-kkk.png')";
    d.g('movie1').style.display = "inline-block";
    d.g('movie3').style.display = "inline-block";
    d.g('movie4').style.display = "inline-block";
    document.querySelector('#moviz-name-2').scrollIntoView({behavior:'smooth'});}
</script>

<script type="text/javascript">
function go2 () {
    d.g("movie2").style.width = "90%";
    d.g("im2").style.width = "90%";
    d.g("im2").style.height = "60%";
    d.g("movie2").style.backgroundSize = "30%";  
    d.g('movie2').style.background="red url('img/favicon.png')  center"; 
    d.g('movie1').style.display = "none";
    d.g('movie3').style.display = "none";
    d.g('movie4').style.display = "none";
    document.querySelector('#moviz-name-2').scrollIntoView({behavior:'smooth'});}
</script>

Answer 1

虽然SO不应该被用作“我如何做我的作业”网站，但我认为从理论上和实践上都可以获得一些宝贵的经验教训。

首先，查看顶部代码块，您有两个部分查找对象（没有事件触发），然后选择一些对象，执行格式化，然后循环遍历一个对象数组。 IMO实现相同效果的最佳方式是利用jQuery及其chaining功能。我会寻找代码块之间的共性来重用：

<!-- In the <head> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<!-- Wherever you want your JS to execute -->
<script>
  // Execute the following block when DOM is ready
  jQuery(document).ready(function(){
    for(i = 1; i < 3; i++){
       if( jQuery("#movie"+i).length ){
         // simple if statement for 2 states; use objects for n > 2
         jQuery("#aflam-body").css("background", i==1?"red":"grey");
         // Leverage the counter variable to grab the matching object
         jQuery('#mttitle').html(jQuery('#moviz-name-'+i).html());
         jQuery("#pr"+i).show();
         jQuery("#movie1, #movie3, #movie4, #movie5, #movie6, #movie7, #movie8, #movie9").hide();
       }
    }
  });
</script>

您显然可以随心所欲，但上述内容更清晰，可扩展且可重复使用。对于底部代码块，利用jQuery和链接：

<script>
function bk1 () {
    jQuery("#movie1").css("width", "184px");
    jQuery("#im1").css("height", "50%").css("width", "94%").attr("src", "img/aflam3.png");
    // Enter additional object manipulations here
 }
// Enter additional functions here

</script>

同样，有很多方法可以给猫皮肤，但是当用任何语言编码时，请记住Zen of Python的原则。祝你好运！

如何重构此javascript代码以缩短它？

1 个答案: