1

是的，我知道 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.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")
...

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

4

2 回答 2

4 
var Tag = {};

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

应该管用。这将创建一个Tag命名空间。

于 2012-05-07T15:57:29.680 回答
1

另一种选择是将您的函数分组为一个 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');
于 2012-05-07T16:21:52.197 回答