このJavaScriptコードをどのようにリファクタリングして短縮しますか？

こんにちは 私はウェブ開発の新人で、JavaScriptは数週間前に始まったばかりです。このコードをできるだけ短くする手助けをしてください。この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>

出典

2017-09-20 Medo

少なくともインラインスタイルの代わりにクラスを使用すると、コードスニペット2のコードを節約できます。 – spiritwalker

jqueryはJavaScriptよりもコードが短くなっています –

どのように見えるかを数秒間表示する人を探しています新しい私は私の知識と短いコードを書くことができない、とにかく感謝。 – Medo

ウェブサイト「私は私の宿題をどのように行うのか」とSO使用すべきではありませんが、私は両方の理論的かつ実用的に、得られるためにいくつかの貴重な教訓があると思います。

最初に、トップコードブロックを見て、オブジェクトを（イベント発生なしで）検索し、いくつかのオブジェクトを選択し、フォーマットを実行してからオブジェクトの配列をループする2つのセクションがあります。 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の原則を維持するための多くの方法があります。がんばろう！

出典

2017-09-20 01:43:06

私はファイルを含めることができません。なぜなら、httpリクエストを行う必要があるからです。これは私にとってはオプションではなく、コードを短く軽くしたいのです。 – Medo

ご協力いただきありがとうございます。私はあなたのコードから多くを学んだ。 – Medo

確かなこと - jQueryは、今日では要求が気付かれないようにする多数のCDNを広く利用しています...または自分でファイルをホストすることができます。最後に、インラインを最小限に抑えて埋め込むことができますが、これはお勧めできません。 IMOの利点は、追加のhttp要求よりも優れています。 –

このJavaScriptコードをどのようにリファクタリングして短縮しますか？

答えて

関連する問題