4

Crafty チュートリアルを読んでいて、ドキュメントが見つからないコード スニペットを見つけました。句読点を探すのはとても難しいです。

問題の行 11 と 12 は、行に続き、とCrafty.eで始まります。これらのプロパティはどのオブジェクトに属していますか?.text.css

//the loading screen that will display while our assets load
Crafty.scene("loading", function () {
    //load takes an array of assets and a callback when complete
    Crafty.load(["sprite.png"], function () {
        Crafty.scene("main"); //when everything is loaded, run the main scene
    });

    //black background with some loading text
    Crafty.background("#000");
    Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
            .text("Loading")
            .css({ "text-align": "center" });
});

//automatically play the loading scene
Crafty.scene("loading");

これは仕様のどこに記載されますか?

4

7 に答える 7

5

a で始まる行は、前の関数/行のオブジェクト.で呼び出される関数/プロパティです。

あなたの特定のケースでは、

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
      .text("Loading")
      .css({ "text-align": "center" });

.text("Loading")の結果に対する単なる関数呼び出しですCrafty.e(...)。

同様に.css({ "text-align": "center" })、前の行の の結果に対する単なる関数呼び出し.text("Loading")です。

同一回線.attr(...)なので外からはコールは見えませんが、他の自回線と全く同じものです。

拡張用語では、上記のサンプルはこれを行うのと同じです:

var eResult = Crafty.e("2D, DOM, Text");
var attrResult = eResult.attr({ w: 100, h: 20, x: 150, y: 120 });
var textResult = attrResult.text("Loading");
var cssResult = textResult.css({ "text-align": "center" });

他の人が述べているように、これは単に同じオブジェクトへの呼び出しをチェーンする方法です-ただし、これはすべてのプログラミング言語で常に可能であるとは限らないことに注意してください(!)。jQuery や他の多くの JavaScript フレームワーク/ライブラリは、開発をより簡単/スムーズにするためにこのアプローチを採用しているため、JavaScript 開発で広く使用されています。

特に JavaScript では、実際のステートメントの終了は;(セミコロン) です。これが意味することは、1 つのステートメントが複数の行にまたがる可能性があるということです。

于 2013-04-22T02:50:34.943 に答える
4

このコードの作成者は、おそらくコードを読みやすくしようとしているだけです。行頭の.は、単に前の行を継続します。

したがって、この...

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 })
            .text("Loading")
            .css({ "text-align": "center" });

...すべてを 1 行にまとめることと同じです。

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading").css({ "text-align": "center" });

行末のセミコロンはステートメントを終了します。

attrただし、作成者が行った方法で記述することにより、関数から結果を取得してtext関数に入力し、それらの結果を最終的に関数に入力していることを簡単に確認できますcss。うーん・・・とにかく読みやすい。読みやすさは非常に主観的なものになる可能性があります。

これは関数チェーンと呼ばれ、このブログ投稿でいくつかの例を使用して説明されています。

于 2013-04-22T02:49:31.973 に答える
2

前の行の続きです。1行で、それは次のとおりです。

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading").css({ "text-align": "center" });

これは「連鎖」と呼ばれ、前の関数呼び出しが関数を含むインターフェイス (通常はオブジェクト) を返します。それらを中間的に格納したり、1 つずつ呼び出したりする代わりに、次の呼び出しを「チェーン」するだけです。これは、前の呼び出しが返されたものと同じくらい良いためです。

Crafty.e("2D, DOM, Text")
      .attr({ w: 100, h: 20, x: 150, y: 120 })
      .text("Loading") 
      .css({ "text-align": "center" });

//synonymous to

var eReturn = Crafty.e("2D, DOM, Text");
var aReturn = eReturn.attr({ w: 100, h: 20, x: 150, y: 120 });
var tReturn = aReturn.text("Loading");

tReturn.css({ "text-align": "center" });
于 2013-04-22T02:48:57.627 に答える
2

それらは基本的に前の行の続きです。したがって、11 行目と 12 行目は基本的に Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading" と同じです。 .css({ "text-align": "center" });

.atr 関数の結果に text メソッドが適用されています。

于 2013-04-22T02:50:30.793 に答える
2

これらの以前の回答に追加するだけです-あなたの特定の質問は「これはAPIのどこにありますか?」でした。API のメソッド シグネチャを見ると、これらのメソッドのそれぞれが「this」への参照を返すことがわかります。例:

public this .attr(String property, * value)

したがって、オブジェクト参照が返されているため、(他のコメンターが示唆しているように) 呼び出しを「連鎖」できます。例えば

Crafty.e("2D, DOM, Text").attr({ w: 100, h: 20, x: 150, y: 120 }).text("Loading").css({ "text-align": "center" });

と同じです

var myEntity = Crafty.e("2D, DOM, Text");
myEntity.attr({ w: 100, h: 20, x: 150, y: 120 });
myEntity.text("Loading");
myEntity.css({ "text-align": "center" });
于 2013-04-22T02:57:35.550 に答える
0

それは基本的にチェーンメソッドです。詳細はこちら

より明確にするために新しい行としてリストされているだけですが、基本的にはこれらのメソッドを次々と呼び出しているだけです。

于 2013-04-22T02:49:16.690 に答える
0

これらは新しいコード行ではなく、「Crafty.e」の続きです。

于 2013-04-22T02:52:10.293 に答える