使用JavaScript oop减少代码重复

Question

I have a javascript code which contains more number of functions. inside each functions code looks similar. Is there any way to reduce and optimize the code using javascript oop. So my script goes like this.

function cal_a() {
    var a_list = [];
  function fetch_dom() {
    var a = document.getElementById("pOne");
    a.innerHTML = "Hello";
    a_list.push("Hello");
  }
  fetch_dom();
}
function cal_b() {
    var b_list = [];
  function fetch_dom() {
    var b = document.getElementById("pTwo");
    b.innerHTML = "World";
    b_list.push("World");
  }
  fetch_dom();
}
cal_a();
cal_b();
//..
//..
//..
//cal_z();

HTML code looks

<p id="pOne"></p>
<p id="pTwo"></p>

Please pardon me if the question is wrong. Thanks in advance.

Answer 1

Sure, pull out the common parts and make a function which returns a function.

function make_cal(elem_id, text) {
    return function() {
        var list = [];
      function fetch_dom() {
        var b = document.getElementById(elem_id);
        b.innerHTML = text;
        list.push(text);
      }
      fetch_dom();
    }
}

let cal_a = make_cal("pOne", "Hello");
let cal_b = make_cal("pTwo", "World");

Answer 2

I have to say the list doesn't do anything here

function cal(id, text) {
  var list = [];
  function fetch_dom() {
    var el = document.getElementById(id);
    el.innerHTML = text;
    list.push(text);
  }
  fetch_dom();
}

cal('id', 'text');

Answer 3

The fetchDom is better to be placed on object constructor:

function Cal(elClass, text) {
  this.list = [];
  this.elClass = elClass;
  this.text = text;
}

Cal.prototype.fetchDom = function() {
  var el = document.getElementById(this.elClass);
  el.innerHTML = this.text;
  this.list.push(el);
};

var calA = new Cal("pOne", "Hello");
var calB = new Cal("pTwo", "World");

calA.fetchDom();
calB.fetchDom();

Then you can access your lists by:

calA.list;
calB.list;