38

単に一連の関数を書くのではなく、オブジェクトリテラルを使用する必要があることを読みました。

私は今のところ理解していないので、誰かがオブジェクトリテラルの利点が何であるかを例で説明できますか？

ありがとう

4

4 に答える 4

66

Russ Camが言ったように、グローバル名前空間を汚染することは避けます。これは、複数の場所（TinyMCEなど）からのスクリプトを組み合わせる最近では非常に重要です。

Alex Sextonが言ったように、それは良いコード編成にもなります。

この手法を使用している場合は、モジュールパターンを使用することをお勧めします。これは引き続きオブジェクトリテラルを使用しますが、スコープ関数からの戻り値として次のようになります。

var MyThingy = (function() {

    function doSomethingCool() {
        ...
    }

    function internalSomething() {
        ....
    }

    function anotherNiftyThing() {
        // Note that within the scoping function, functions can
        // call each other direct.
        doSomethingCool();
        internalSomething();
    }

    return {
        doSomethingCool: doSomethingCool,
        anotherNiftyThing: anotherNiftyThing
    };
})();

外用：

MyThingy.doSomethingCool();

スコープ関数はすべての関数にラップされており、すぐに呼び出して戻り値を格納します。利点：

  • 関数は正常に宣言されるため、名前が付けられます。（この{name: function() { ... }}形式では、それらを参照するプロパティに名前が付いていても、すべての関数は匿名です。）名前ヘルプツールは、デバッガーでの呼び出しスタックの表示から、どの関数が例外をスローしたかを示すのに役立ちます。（2015年の更新：最新のJavaScript仕様であるECMAScript第6版では、JavaScriptエンジンが関数の名前を推測する方法が多数定義されています。その1つは、この例のように関数がプロパティに割り当てられる{name: function() { ... }}場合です。エンジンがES6を実装する場合、この理由はなくなります。）
  • モジュール（上記のような）でのみプライベート関数を使用する自由を与えますinternalSomething。ページ上の他のコードはこれらの関数を呼び出すことができません。彼らは本当にプライベートです。最後にreturnステートメントでエクスポートしたものだけがスコープ関数の外に表示されます。
  • 実装が完全に変更された場合（IE-vs-W3Cのもの、またはSVGとCanvasなど）、環境に応じてさまざまな関数を簡単に返すことができます。

さまざまな関数を返す例：

var MyUtils = (function() {
    function hookViaAttach(element, eventName, handler) {
        element.attachEvent('on' + eventName, handler);
    }

    function hookViaListener(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
    }

    return {
        hook: window.attachEvent ? hookViaAttach : hookViaListener
    };
})();

MyUtils.hook(document.getElementById('foo'), 'click', /* handler goes here */);
于 2009-10-21T11:25:40.850 に答える
15

オブジェクトリテラル（別名オブジェクトリテラルパターン）を使用しても、グローバルに宣言された多くの関数を使用する場合ほどグローバル名前空間を汚染することはなく、コードを論理的に整理するのにも役立ちます。

たとえば、このオブジェクトリテラル

var obj = {
              find : function(elem) { /* find code */ },
              doSomething: function() { /* doSomething code */ },
              doSomethingElse: function() { /* doSomethingElse code */ }
          }

に比べ

function find(elem) { /* find code */ },
function doSomething() { /* doSomething code */ },
function doSomethingElse() { /* doSomethingElse code */ }

3つと比較して、グローバルオブジェクトに1つのプロパティのみを作成します。そうすれば、このような機能を簡単に使用できます。

obj.doSomething();
于 2009-10-21T11:07:56.580 に答える
10

Rebecca Murpheyは、今年のjQueryConferenceでオブジェクトリテラルについて講演しました。それらを使用する最も良い理由の1つは、単に優れたコード編成です。

オブジェクトリテラルパターンに関するRebeccaの記事は次のとおりです。http：//rmurphey.com/blog/2009/10/15/using-objects-to-organize-your-code/

于 2009-10-21T11:09:22.520 に答える
2

コードを整理するための明確な方法であるため、私は常にオブジェクトリテラルを使用してきました。だから私はプロトタイプが好きではありません、それはあまりにも厄介です。

関数は、オブジェクトリテラル以外の上記の誰かのように、名前空間を汚すことはありません。

あなたは簡単に次のようなリテラルを書くことができます

var obj = {}
var find = function(elem) { /* find code */ },
var doSomething = function() { /* doSomething code */ },
var doSomethingElse = function() { /* doSomethingElse code */ }

これは、関数と同じように多くのグローバルオブジェクトを作成することによって汚染されます。同様にあなたはすることができます：

(function() {
function find(elem) { /* find code */ },
function doSomething() { /* doSomething code */ },
function doSomethingElse() { /* doSomethingElse code */ }
})();

これらのグローバルオブジェクトは作成されません（すべてがJSのオブジェクトです）

そうすれば、グローバルオブジェクトを大量に作成することはありません。

私の考えでは、オブジェクトリテラルには2つの利点があります。1つは、jQueryなどの多くのプラグインで使用されているため、人々は親しみやすく、読みやすくなっています。データをプラグインに簡単に渡すことができます。パブリックメソッドとプライベートメソッドの両方を簡単に作成できます。

オブジェクトのインスタンスを作成するたびに、そのすべてのメソッドが複製されるため、速度が低下する可能性があります。メソッドのコピーが1つあり、新しいオブジェクトは単にプロトタイプを参照しているため、プロトタイプの場合はそうではないことを理解しています。

もちろん間違っているかもしれません...

于 2013-11-09T02:44:46.457 に答える