関数を理解すればクロージャは難しくない!
JavaScriptでは関数をマスターすることが何より重要です。関数が理解できればクロージャの不思議な挙動もごく当たり前のこととして理解できるはずです。
本エントリではクロージャの本質について、関数の特性という視点からまとめてみました。
JavaScriptでは関数をマスターすることが何より重要です。関数が理解できればクロージャの不思議な挙動もごく当たり前のこととして理解できるはずです。
本エントリではクロージャの本質について、関数の特性という視点からまとめてみました。
HTML内に複数の外部JSファイルを読み込む際、これらのJSファイル間に依存関係があるとコードが実行される順序が重要になりますが、これらはちゃんとHTMLファイル内に記述された順序でスクリプトは実行されるのでしょうか?
今回はこういった「複数の外部JSファイルの実行順序」という点について検証を交えながら少し掘り下げてまとめてみました。
即時関数は、名前を持たない関数をその場で実行しているに過ぎないため、本質的には通常の名前付き関数と同じです。そのため、「即時関数を使わなければ実現できない処理」といったものはあり得ません。それらは即時関数でなくとも通常の名前付き関数で処理することは可能です。
しかし即時関数は名前を持たないため、現在のスコープを汚染せずに新しいスコープを作成することができます。このことが通常の名前付き関数との違いであり、即時関数ならではの用途を生み出します。
Knockout.jsでは、View(HTML)側のバインディングに対してViewModelオブジェクトのプロパティだけではなく、JavaScriptの関数を用いることもできます。例えばtextバインディングに関数の実行結果を渡したり、clickバインディングにイベントハンドラを関連付けたりすることが可能です。
今回は、そのようなView側での関数の使い方についてまとめてみました。
Knockout.jsではView(HTML)側からko.applyBindingsメソッドの引数として渡されるViewModelオブジェクトのプロパティやメソッドを参照することが可能ですが、場合によってはViewModelオブジェクトにはない(ViewModelオブジェクトの外部で定義されている)関数などを使いたくなるケースもあるかと思います。
そのような関数やプロパティをView側参照するにはどうすれば良いのでしょうか?そもそもView側からは何が参照可能なのか?という部分がよく分かっていなかったので、そのあたりを少し調べてみました。
knockout.jsのobservableメソッドはViewModelオブジェクトのプロパティを監視可能な状態にします。これにより、監視対象のプロパティの値が更新された際に更新内容をView側に反映させることができるようになります。
前回はKnockout.jsの概要について書きましたが、今回はKnockout.jsの基本的な使い方の紹介と簡単なサンプルの作成をしてみます。
ページの再読み込みではなくJavaScriptによるDOMのリフローを頻繁に行うようなWEBアプリケーションを作成する場合、アプリケーションの規模が大きくなるにつれHTMLマークアップとJavaScriptコードが随所で絡み合ってしまい、次第にコードのメンテナンスや機能拡張が困難になっていきます。そんな経験をしたことのある人は結構多いのではないでしょうか。
ここで紹介する「Knockout.js」はそんな問題を劇的に改善してくれるJavaScriptフレームワークです。
本エントリは、JavaScript全体に関わるコーディング規約ではなく、あくまでも「命名規則」に絞った内容になっています。自分用のまとめ色が強いエントリになっていますので、ここに書いたことが正解というわけではありませんが、少しでも皆さんの参考になれば幸いです。皆さんも色々な情報を参考にしながら、一番しっくりくるものを採用していくのが良いと思います。
配列(またはコレクション)をループで処理する際、ループ中にこれらの要素の数が変わらないのであれば、要素の数(配列の長さ)をキャッシュさせた方が良いでしょう。特に、ループの対象がHTMLCollectionである場合は重要度が高いです。
実行環境(ブラウザ)や、JavaScriptフレームワークの使用により、これらのメリットが享受できない場合もありますが、デメリットは無いはずですので、ループの最適化が適用できるのであれば積極的に適用した方が良いと思います。