javascript - この2つの機能を1つの機能にまとめたい

Question

これらの 2 つのステートメントは同一です。それらと同等のステートメントを 1 つ作成したいと思います。

つまり、これらのコードのショートカットを一つの機能として作りたいのです。

  function chose1() {          
       if (document.getElementById("Button1").click = true) {
           if (document.getElementById('Button1').value == "") {
               document.getElementById('Button1').value += nextTurn;
               document.getElementById('Button1').style.fontSize = "30px";
               document.getElementById('Button1').style.color = 'Blue';
               if (document.getElementById('Button1').value == "O") {
                   document.getElementById('Button1').style.color = 'Red'
               }
                   changeTurn();
           } 
       } 

       }
       function chose2() {
           if (document.getElementById("Button2").click = true) {
               if (document.getElementById('Button2').value == "") {
                   document.getElementById('Button2').value += nextTurn;
                   document.getElementById('Button2').style.fontSize = "30px";
                   document.getElementById('Button2').style.color = 'Blue';
                   if (document.getElementById('Button2').value == "O") {
                       document.getElementById('Button2').style.color = 'Red'
                   }
                   changeTurn();
               } 
           } 

       }

score 3 · Accepted Answer

function chose(id) { 
       var btn = document.getElementById(id)
       if (btn.click = true) {
           if (btn.value == "") {
               btn.value += nextTurn;
               btn.style.fontSize = "30px";
               btn.style.color = 'Blue';
               if (btn.value == "O") {
                   btn.style.color = 'Red'
               }
               changeTurn();
           } 
       } 

chose("Button1");
chose("Button2");

これは解決策です。2 つの関数を 2 つに結合するだけでなく、1 つの関数で dom 要素にアクセスしている回数を確認すると、document.getElementById()パフォーマンスが低下します。参照を変数に格納して再利用します。お気に入り

var btn = document.getElementById(id)

score 2 · Accepted Answer

function chose( id ) { }

次にid、「Button1」または「Button2」の代わりに使用します。質問する前に検索しましたか？...

score 0 · Accepted Answer

と呼ばれていRefactoringます。この世界には、それに関する多くの優れた本があります。

できるよ：

function chose(button) {       
  clickedButton = document.getElementById(button);

       if (clickedButton.click = true) {
           if (clickedButton.value == "") {
               clickedButton.value += nextTurn;
               clickedButton.style.fontSize = "30px";
               clickedButton.style.color = 'Blue';
               if (clickedButton.value == "O") {
                   clickedButton.style.color = 'Red'
               }
                   changeTurn();
           } 
       } 

 }

score 0 · Accepted Answer

変数 (ボタン ID) を受け入れる単一のメソッドにリファクタリングできます。そして、より良い組織とパフォーマンスを提供することをお勧めします。これにより、変数に置くことができるこの評価を行う各行ではなく、document.getElementById(button_id) の結果を変数に割り当てることができます。

function _buttonChoser(button_id) {
  var button_element = document.getElementById(button_id);
   if (button_element.click = true) {
       if (button_element.value == "") {
           button_element.value += nextTurn;
           button_element.style.fontSize = "30px";
           button_element.style.color = 'Blue';
           if (button_element.value == "O") {
               button_element.style.color = 'Red'
           }
           changeTurn();
       } 
   }
};

function chose1() {          
  _buttonChoser('Button1')
};
function chose2() {
  _buttonChoser('Button2')
};

javascript - この2つの機能を1つの機能にまとめたい

4 に答える 4

Related

Reference