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

是的，我知道JavaScript本身并没有“类”，所以我将把它放在前面，然后继续

我有一个应用程序，它有一个左侧边栏，上面列出了一堆标签。我通过JavaScript和AJAX操作这些标记，以添加、删除和更新标记

当我当前操作标记时，它的效果是（注意，这段代码是我正在做的事情的简化版本，但传达了这一点；另外，我正在使用jQuery库）：

#HTML页面。。。
标记文本
标记文本
标记文本
...
#创建新标记的Javascript
$（“#标记”）.append（“文本”）
#更新标记
$（“标签10”）。替换（“更新的标签”）
#删除标签
$（“#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>)

Tag.append（{text:“Tag text”，id:}）=>上面的append功能
Tag.update（，{}）
Tag.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方法={
init:function（）{…}
附加：函数（选项）{
var元素=；
$（“#标记”）.append（元素）；
}
移除：功能（domid）{
$（domid.remove（）；
}
}
}
#用法
var tag=tag.new（）
标记。移除（“标记10”）
...

但是，如果这样做，每次我想引用tag类时（因为我正在通过服务器发回一些代码），我是否必须创建一个新的

var tag=tag.new（）

应该有用。这将使

标记

命名空间排序

---

应该有用。这将使

标记

名称空间排序。

另一个选项是将函数分组为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');

$.fn.tags=函数（）{
var tagContainer=this；
变量标记={
附加：函数（选项）{
var元素=；
tagContainer.append（元素）；
返回标签；
},
替换：函数（）{
返回标签；
},
移除：功能（domid）{
$（domid，tagContainer）.remove（）；
返回标签；
}
}
返回标签；
}
$（'#tags'）.tags（）.append（{text:'foo'，id:'bar'}）.remove（'#tag_10'）；

另一个选项是将函数分组为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');

$.fn.tags=函数（）{
var tagContainer=this；
变量标记={
附加：函数（选项）{
var元素=；
tagContainer.append（元素）；
返回标签；
},
替换：函数（）{
返回标签；
},
移除：功能（domid）{
$（domid，tagContainer）.remove（）；
返回标签；
}
}
返回标签；
}
$（'#tags'）.tags（）.append（{text:'foo'，id:'bar'}）.remove（'#tag_10'）；

我不确定您为什么需要在这里进行任何类型的“类”或“对象”封装，在这个特定的实例中，这似乎是不必要的，甚至是不好的做法。如果您不希望每个标记都是JS中镜像的“对象”，我建议您只制作两个“静态”方法（如：function appendTag（…）{…}）-使用对象作为JavaScript名称空间是一种常见的做法，并不是不必要的，因为它允许您避免使用大量变量和函数扰乱全局名称空间。但是当这样做时，不需要创建构造函数，可以直接创建对象文本（正如Mitch的回答中所建议的）。@ckozl我实际上认为将随机方法塞进JS文件是一种不好的做法，将它们分组到“类”功能中会是一种更好的做法。大多数标准语言通常都是这样。然而，我对这样写我自己的JS很陌生，所以我不知道最好的做法是什么。@DanL如果你写的是一个图书馆或是一些便携式的东西，我同意你的看法，但是你的建筑，听起来很专业，很小，使用一组过于简单的全局函数是很好的，因为它是在一个适当的范围内完美定义的。不要听那些把CS101第一天的演讲当作上帝的话的“最纯粹的狂热者”的话，“永远不要使用全球服务”。语言风格的规则就是，规则，任何规则都有时间和地点，在我看来，这并不是一种需要避免全局名称空间的情况。就我的0.02-ck@ckozl您是对的，在我的情况下，有几个独立的方法可以很好地工作，并且可能比将它们提取到一个类中要省事。但是我在做一个个人项目，就是为了强迫自己学习如何为更大的项目正确地组织代码。我不确定我的方法是否好，但我会尝试一下，看看这是否是我想在更大的项目中使用的方法。不过，你在做有意义的事情和遵守绝对的“规则”方面确实提出了很好的观点。感谢您的输入。我不确定您为什么需要任何类型的“类”或“对象”封装，在这个特定的实例中，这似乎是不必要的，而且是一种非常糟糕的做法。如果您不希望每个标记都是JS中镜像的“对象”，我建议您只制作两个“静态”方法（您知道，比如：function appendTag（…）{…}）-使用对象作为JavaScript名称空间是一种常见的做法，并不是不必要的，因为它允许您避免clu

$.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');