Question

是的，我知道JavaScript本身没有“类”，所以我只是提前把它扔出去然后继续。

我的应用程序左侧边栏列出了一堆标签。我正在通过JavaScript和AJAX操作这些标签来添加，删除和更新标签。

当我当前操作标签时，它会产生影响（注意这段代码是我正在做的一个简陋的版本，但是传达了这一点;另外，我正在使用jQuery库）：

# HTML page...
<div id="tags">
  <div class="tag" id="tag_1">tag text</div>
  <div class="tag" id="tag_2">tag text</div>
  <div class="tag" id="tag_3">tag text</div>
  ...
</div>

# Javascript to create new tag
$("#tags").append("<div class='tag' id='tag_15'>text</div>")

# update a tag
$("#tag_10").replace("<div class='tag' id='tag_10'>updated tag</div>")

# remove a tag
$("#tag_10").remove()

作为旁注，我正在使用Rails框架，并且一些JS是通过js.erb文件在服务器上创建的，并发送回客户端进行评估。我知道服务器生成JS的一些问题，但在这种情况下它是可以的。

所以我决定将这个功能组合成一个控制页面上标签的JavaScript“类”。

问题是我有一个标签边栏，所以我不需要多个Tag对象......我只需要一堆命名方法，这些方法允许我以有序的方式操作页面上的标签。 / p>

我希望能够做到这样的事情：

Tag.append({ text: "tag text", id: <id of tag> }) => the append functionality above
Tag.update(<id to update>, { <hash of options> })
Tag.remove(<id of tag to remove>)

我不明白如何使用JavaScript实现此功能。

我的想法是这样的：

# "class" definition
function Tag() {
  var methods = {
    init : function() { ... }

    append : function(options) {
      var element = <...build DIV element...>;
      $("#tags").append(element);
    }

    remove : function(domid) {
      $(domid).remove();
    }
  }
}

# usage
var tag = Tag.new()
tag.remove("tag_10")
...

但是，如果我这样做，每次我想引用Tag类时都必须创建一个新的var tag = Tag.new()（因为我通过服务器发回一些代码）？

Answer 1

var Tag = {};

Tag.something = function(param) {
/// blah blah blha
};

应该有效。这将构成一个Tag命名空间。

Answer 2

另一种选择是将您的函数分组为jQuery插件，返回具有可链接实用程序函数的对象：

$.fn.tags = function() {
  var tagContainer = this;
  var tags = {
    append : function(options) {
      var element = <...build DIV element...>;
      tagContainer.append(element);
      return tags;
    },
    replace: function () {
      <...do stuffs here...>
      return tags;
    },
    remove : function(domid) {
      $(domid, tagContainer).remove();
      return tags;
    }
  }
  return tags;
}

$('#tags').tags().append({text: 'foo', id: 'bar'}).remove('#tag_10');

将javascript方法功能分组到javascript“类”中

2 个答案: