Question

我想从之前定义的几个原型中生成DOM中的元素。我考虑过使用工厂来选择默认原型并添加一些额外的功能。我的问题是，我是否每次都需要实例化一个类并使用parse（） - 类方法将对象解析为DOM？或者有更好的方法，例如只有静态方法用于此过程吗？

这是我现在的课堂方式：

function Window(params) {
  this.id = this.createNewWindowID();
  this.name = params.name;
  this.type = params.type;
  this.dims = params.dims;

}
Window.prototype.parse = function() {
  $("#windowarea").append('<div class="content-window uk-panel uk-panel-box toolbox-tools" id="' + this.id + '">' +
    '<div class="uk-panel-header uk-panel-title content-window-header">' + this.name +
    '<i class="fa fa-times pull-right close-panel"></i>' +
    '<i class="fa pull-right fa-chevron-down toggle-panel"></i></div></div>');
  $('#' + this.id).css({
    "top": this.dims.top,
    "left": this.dims.left,
    "width": this.dims.width,
    "height": this.dims.height
  });
  $('#' + this.id).draggable({
    handle: ".uk-panel-header",
    drag: function(evt, el) {
      el.position.left = Math.max(0, el.position.left);
      el.position.top = Math.max(0, el.position.top);
    },
    stop: function(evt, el) {
      var index = getWindowIndex('id', this.id);
      allwindows[index].dims.top = el.position.top;
      allwindows[index].dims.left = el.position.left;
      if (storage) {
        localStorage.windowcontent = JSON.stringify(allwindows);
      }
    }
  }).resizable({
    handles: "e, w, s, se",
    resize: function(evt, el) {
      el.size.width = Math.max(200, el.size.width);
      el.size.height = Math.max(10, el.size.height);
    },
    stop: function(evt, el) {
      var index = getWindowIndex('id', this.id);
      allwindows[index].dims.width = el.size.width;
      allwindows[index].dims.height = el.size.height;
      if (storage) {
        localStorage.windowcontent = JSON.stringify(allwindows);
      }
    }
  });
  switch (this.type) {
    case "topview":
     new View($('#' + this.id));
      break;
    case "sideview":
      $('#' + this.id).append('<div class="uk-panel-badge uk-badge">Dies wird eine Sideview</div>');
      new View($('#' + this.id));
      break;
    default:
      if (this.content != undefined) {
        $('#' + this.id).append(this.content);
      }
  }
};

感谢您的想法。如果描述得好，请告诉我。

fwerre

编辑：好吧，让我更准确地描述我的项目。

我的对象是windows，可以拖动和调整大小（来自jquery-ui）。 Windows也可以在屏幕上添加和删除。窗户的数量加上它们的大小，位置和内容应存储在localStorage中。在浏览器重新加载或重新启动时，应从localStorage-JSON-object恢复窗口设置。

我想我只需要一个方法将窗口参数放在一起，最后将它们添加到DOM中。我如何最好地组织这些方法？

由于

从原型JS生成DOM元素

0 个答案: