関数を使用した処理のまとめ方について

Question

###前提・実現したいこと
以下の２つのソースコードにおいて、共通する部分の処理をひとつにまとめる（いちいち各functionに書かず、別で管理する）にはどのように書けばよろしいでしょうか？

###該当のソースコード

function test01() {
  //test01固有の処理
  $('#div01').find('p').html('こんにちは');

  //以下はtest01()・test02()共通の処理
  var aaa = hoge1.text();
  var bbb = hoge2.text();
  var ccc = hoge3.text();
  $('#id1').find('input').val(aaa);
  $('#id2').find('input').val(bbb);
  $('#id3').find('input').val(ccc);
}

function test02() {
  //test02固有の処理
  $('#div02').find('p').html('こんばんわ');

  //以下はtest01()・test02()共通の処理
  var aaa = hoge1.text();
  var bbb = hoge2.text();
  var ccc = hoge3.text();
  $('#id1').find('input').val(aaa);
  $('#id2').find('input').val(bbb);
  $('#id3').find('input').val(ccc);
}

別で関数を用意すれば良いのかもしれない、と薄々とは理解できるのですが、その書き方がいまひとつ理解しきれずにいます。
何卒、ご教示ください。よろしくお願いいたします。

Answer 1

トリガーがわからないのでなんとも言えませんが
こうしてみてはどうでしょうか？

$(function(){
  $('#div01,#div02').on('click',function(){
    console.log("common");
    if($(this).is("#div01")){
      console.log("div1");
    }
    if($(this).is("#div02")){
      console.log("div2");
    }
  });
});

<div id="div01">div01</div>
<div id="div02">div02</div>

Comments

[退会済みユーザー]

ご回答ありがとうございます。自分の質問の仕方が曖昧だったために若干趣旨とは逸れた回答では御座いましたが、頂いたご回答は別の箇所にて活用させていただきました。ありがとうございます。

Answer 2

こういうことでしょうか？

function test (selector, htmlSrc) {
  return function () {
    $(selector).find('p').html(htmlSrc);

    //以下はtest01()・test02()共通の処理
    var aaa = hoge1.text();
    var bbb = hoge2.text();
    var ccc = hoge3.text();
    $('#id1').find('input').val(aaa);
    $('#id2').find('input').val(bbb);
    $('#id3').find('input').val(ccc);
  };
}

var test1 = test('#div01', 'こんにちは');
var test2 = test('#div02', 'こんばんわ');

test1();
test2();

Comments

[退会済みユーザー]

ご回答ありがとうございます。頂いたコードを活用させて頂きました。

Answer 3

この質問の時と同じように考えてみればよいかと。

return後の文をひとつの処理としてまとめたい

Comments

[退会済みユーザー]

ご指摘ありがとうございます。仰る通り、この際の回答を参考にすれば出来るのかなと試してみたのですがなかなか分からず・・。他の質問で頂いたご回答も参考に出来るよう勉強してまいります。ありがとうございます。