web-dev-qa-db-ja.com

説明的な関数名を含むびくびくコード

現在、ページの一部の機能を構築しています。 JSを作成するとき、私はFindCarouselLocations(elem)、GetImagesFromLibrary(url)、BuildCarousels(images, locs)などの小さな関数のセットを作成してきました。これらはすべて、グローバルJSにある機能のサブセットを使用していますファイル。

JSにかなり依存しているページを設計する場合、他の関数呼び出しを通じてストーリーを伝える単一の関数を使用することは理にかなっていますか？上記のサンプル関数を使用して、次のようにします。

// previous function definitions...

function AddImageCarousels (){    
    var imageLibraryUrl = 'http://mysite.com';
    var parentElem = document.querySelectorAll('.image-carousel');

    var images = GetImagesFromLibrary(imageLibraryUrl);
    var locs = FindCarouselLocations(parentElem);
    BuildCarousels(images, locs);
}
document.addEventListener('DOMContentLoaded', AddImageCarousels, false);

これは、ページが読み込まれたときに何が起こるかを物語っていると思います。別の方法として抽象化を削除することもできますが、その場合はコメントを追加するか、別の方法でリファクタリングする必要があります。私個人的には、これは少し自己文書化を生み出すと思いますが、私は開発慣行にかなり新しいです...

ページで多くのことが行われている場合は、さらに1つの最終ステップを実行して、次のような関数を作成します。

// previous function definitions...
function AddImageCarousels(){ /* */ }

function BuildPage () {
    AddImageCarousels();
    AddChatbot();
    AddMaintenanceNotification();
}
document.addEventListener('DOMContentLoaded', BuildPage, false);

各主要機能は単一の関数によって定義されていますが、それらの関数はAddImageCarousels関数と同様に構築されています。

この良い習慣またはより良い設計の必要性を暗示するコードの匂いですか？そして、もしそうなら、より良い代替手段は何でしょうか？

HTTP呼び出しの数を減らすために、プロダクションファイルをできるだけ少ない個別のファイルに保存することを好みますが、通常、各機能は独自の開発ファイルにあり、後で同じ.jsに変換されます。

javascriptpatterns-and-practices
9
KGlasier

他の関数呼び出しを通じてストーリーを伝える単一の関数を持つことは意味がありますか？

はい。

しかし、他の関数呼び出しを使用することは、このコードのそれほどいいところではありません。何がいいのかというと、それは1つの短編小説を1つの抽象化レベルで伝え、適切な名前を使用していることです。他の関数呼び出しを使用することは、単にそれを引き出す方法です。

短い関数で複雑な問題を解決するには、多くの関数が必要です。多くの関数は多くの名前を要求します。したがって、ここでの制限要因は、良い名前を思い付く能力です。私に良い名前を付けることができない場合は、長い機能を教えてください。短い関数に悪い名前を付けないでください。

もう1つのいい点は、どの関数が副作用によって機能し、どの関数が値を返すことによって機能するかが明確であることです。それが Command Query Segregation の特徴です。

AddImageCarousels()で見られるパターンは、依存関係を構築して、約束したことを実行するために依存関係を構築することです。この分離により、関数のパラメーター化されたバージョンが確実に存在しますが、エントリポイント全体で依存関係の構築がダンプされません。

この設計の制限は、追加機能が共有できないことです。それが重要にならない限り、私は単純に重複を容認して、クリーンな分離を支持します。

もう1つの問題は、パラメータ化されているBuildCarousels()が複数の方法で呼び出された場合にのみ役立つことです。もう1つの方法には、AddImageCarousels()とは異なる名前が必要です。繰り返しますが、ここであなたの力を制限しているのは、良い名前を思い付く能力です。

私は言わなければならない、これは私がしばらく見た中で最も美しいコードのいくつかです。それが使用に耐えることを願っています。

9
candied_orange
_function BuildPage () {
   AddImageCarousels();
   AddChatbot();
   AddMaintenanceNotification();
}
document.addEventListener('DOMContentLoaded', BuildPage, false);
_

これは素晴らしいコードです。関数名はわかりやすく、ページがどのように構築されているかを簡単に確認できます。チャットボットの追加方法の詳細が必要な場合は、その方法を確認できますが、ページの構築方法や、ページの概要を簡単に確認したい場合は、これ一つの方法。

非常によく似たコードはひどいことに注意してください。

_function BuildPage () {
   AddIcs();
   Chat();
   AddEntity();
}
document.addEventListener('DOMContentLoaded', BuildPage, false);
_

関数名がまったく説明的ではないためです。ページに何があるかを理解するには、3つの関数のそれぞれを調べる必要があります。つまり、このコードのビットが何をしているかについて、頭の中で多くのことを把握する必要があります。

作成したコードの注意点の1つ-BuildPageで呼び出される各メソッドが、それが行うと言っていることを正確に実行する必要があります。 AddChatBot()メソッドで画像カルーセルを操作したり、通知やその他の設定を行ったりしたくない場合は、チャットボットを追加するために必要な操作を行ってください。

9
mmathis