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「クラス」にグループ化することにしました。

問題は、タグ サイドバーが 1 つしかないことです。そのため、複数の Tag オブジェクトは必要ありません。必要なのは、ページ上のタグを整然と操作できるようにする一連の名前付きメソッドだけです。

次のようなことができるようになりたいです。

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

もう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 に答える