ООП в Javascript, наследование: как реализовать подобное?

Question

[ZaxapKramer]

Как реализовать подобное в javascript, если это возможно?

var put = function(elem, text) {
	var text = encodeURIComponent(text);
	return {
		now: function(a) {
			var a = encodeURIComponent(a) || '';
			add: function() {
				elem.outerHTML += text+a;
			}
			replace: function() {
				elem.outerHTML = text+a;
			}
		}
		after: function(time) {
			// do smth
		}
	}
}

Далее вызываем это как-то так:

put(document.getElementById("div_id"), "Hello ").now("world!").replace;

Проблема в том, что кидает ошибку на строку с replace (в данном случае, это 9): SyntaxError: function statement requires a name.
Понимаю, что что-то не так, но вот что? Подскажите. Или же вообще нельзя реализовать столько "уровней вложенности"?

Answer 1

[Алексей Уколов]

У вас почти всё верно, только пара синтаксических ошибок и одна логическая:

var put = function(elem, text) {
  var text = encodeURIComponent(text);
  return {
    now: function(a) {
      var a = encodeURIComponent(a) || '';

      return {
        add: function() {
          elem.outerHTML += text + a;
        },
        replace: function() {
          elem.outerHTML = text + a;
        },
      }
    },
    after: function(time) {
      // do smth
    },
  }
}

put(document.getElementById("div_id"), "Hello ").now("world!").replace();

Comments

[ZaxapKramer]

Спасибо большое! А про return - он во втором случае просто выпал при написании примера.

А можно ли как-то укоротить это:

// ...
return {
    add: function() {
        elem.outerHTML += text + a;
    },
    replace: function() {
        elem.outerHTML = text + a;
    },
}
// ...

Тут 2 строки, которые отличаются только "знаком +" (...=… и …+=…).

[Виталий Инчин ☢]

ZaxapKramer: они отличаются логикой действий. Разделение на 2 метода в данной ситуации оправдано. (хотя я и не представляю, как можно использовать outerHTML и оператор +=)

[Виталий Инчин ☢]

Я не буду смотреть на логику кода, но хочу подсказать кое-что по его структуре. Было бы очень неплохо сделать так:

var put = (function(encode){

  function Outer(monitor, a){

    var add = typeof a == "string" ? encode(a) : '';

    this.text = monitor.text + add;
    this.element = monitor.element;

  }

  Outer.prototype = {

    constructor : Outer,

    add : function(){
      //..
    },

    replace : function(){
      //..
    }

  }



  function Monitor(elem, text){
    this.text = encode(text);
    this.element = elem;
  }

  Monitor.prototype = {

    constructor : Monitor,

    now : function(a){
      return new Outer(this, a);
    },

    after : function(time){
      // do smth
    }


  }

  return function(elem, text){
    return new Monitor(elem, text);
  }


})(encodeURIComponent);