カスケード呼び出しを使う

ひとつのオブジェクトに対して複数のメソッドを呼び出す処理を書くことは多いと思います。このような操作をカスケード呼び出しと言いますが、Dart ではこの呼び出し方を専用の書き方を使って簡潔に書くことができます。

ここに動物のリストがあったとします。

<ul>
  <li id="bull">Bull<li>
  <li id="cat">Cat<li>
  <li id="dog">Dog<li>
</ul>

人気投票をしたところ Cat が 1 位になったので、太字にして王冠のイラストを追加してみましょう。

var licat = document.query('#cat');
licat.append(new Element.html('<img src="crown.png">'))
licat.style.fontWeight = 'bold';

カスケード呼び出し（..）を使うと次のように書くことができます。

document.query('#cat')
    ..append(new Element.html('<img src="crown.png">'))
    ..style.fontWeight = 'bold';

先のコードに比べて読みやすい形で表現されていると思います。呼び出すメソッドの数が増えるほどカスケード呼び出しを使うメリットが増えます。

ここで document.query('#cat') の戻り値は li 要素になります。子要素を追加する append メソッドを普通に呼び出すと、その戻り値は追加した要素、つまりここでは img 要素です。しかし .. を使って呼び出すと、元々のメソッドの戻り値は無視され、元のオブジェクトが返ってきます。

var img = new Element.html('<img src="crown.png">');

// e は追加した子要素（つまり img 要素）
var e = document.query('#cat').append(img);

// f は document.query('#cat') の値（li 要素）
var f = document.query('#cat')..append(img);

カスケード オペレーターでは結果が元のオブジェクトになるので、同じオブジェクトに対して次のメソッドを呼び出すことができるわけです。

.. は [] にも使うことができます。

document.query('#cat').attributes
    ..['style'] = 'color: red'
    ..['title'] = 'popular';