Javascript 类：创建和销毁元素

Question

我是 Javascript 类的新手，或者缺乏对类的真正支持。

无论如何，我想创建一个可以创建和销毁 DOM 元素的函数。我可以创建元素，但销毁它们有点棘手。

如何在不提供 ID 的情况下调用 destroy ？

function WorkZone() {
    this.create = function(id) {
        $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    }

    this.destroy = function(id) {
        $(id).remove();
    }
}

$(function() {
    var zone = new WorkZone();
    zone.create();
    zone.destroy();
});

Answer 1

您只需将对元素的引用保留为对象的属性即可。 destroy 方法直接引用该元素，甚至不需要 id。

function WorkZone() {

    this.create = function(id) {

       // Remember the element
        this.element = $('<div>', {
                         id: id,
                         class: 'work-zone'
                       });
        // This could be chained to the above,
        // but it's a lot easier to read if it isn't
        this.element.appendTo('body');
    }

    this.destroy = function() {
        // Use element reference
        this.element.remove();
    }
}

$(function() {
    var zone = new WorkZone();
    zone.create();
    zone.destroy();
});

但最好将方法放在 WorkZone.prototype 上，以便共享它们，而不是每个实例都有自己的副本：

function WorkZone() {
  this.element;
}

WorkZone.prototype = {
  create: function(id) {
    this.element = $(..)...// create element, add to document
  },
  destroy: function() {
    this.element.remove();
  }
}

var zone = new WorkZone();
zone.create(id);
zone.destroy();

Answer 2

使用 jQuery 来执行此操作，而不是创建自定义代码：

http://api.jquery.com/category/manipulation /

您将获得完整的浏览器支持和最佳代码，以及使用许多不同类型的选择器进行此类 DOM 操作的能力。

Answer 3

试试这个：

var WorkZone = {
    wz: null,
    create: function(id) {
        this.wz = $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    },

    destroy: function() {
        this.wz.remove();
    }
}

$(function() {
    var zone = WorkZone;
    zone.create('new_id');
    zone.destroy();
});

Answer 4

就像这样：

function WorkZone() {
    this.create = function(id) {
        this.div = $('<div>', {
            id: id,
            class: 'work-zone'
        });
        this.div.appendTo('body');
    }

    this.destroy = function(id) {
         this.div.remove();
    }
}

Answer 5

function WorkZone(id) {
    this.create = function() {
        $('<div>', {
            id: id,
            class: 'work-zone'
        }).appendTo('body');
    }

    this.destroy = function() {
        $('#'+id).remove();
    }
}

$(function() {
    var zone = new WorkZone("ohyeababy");
    zone.create();
    zone.destroy();
});

这不是实现最终目标的最佳方法，但它可以立即修复代码中的重复问题。 :)