2016-10-22 8 views
1

オブジェクト表記法でJS関数を編成するのが良いか悪いのかを知りたいと思います。その目的は、jsを整理しやすいように維持することです。オブジェクトを使ってJS関数を編成する方法

例:

var helper = { 
    myAlert: function(){ 
    return alert('Alert from helper'); 
}, 
    toLowerCase: function(){ 
    var str = document.getElementById("txt").innerHTML; 
    return alert(str.toLowerCase()); 
} 
} 

HTML:事前に

<body> 
    <h1 onclick="helper.myAlert()">Hello Plunker!</h1> 

    <p id="txt" onclick="helper.toLowerCase()">Testing LowerCaseFunction</p> 
</body> 

Plunker

感謝!

+3

これはネームスペースと呼ばれ、一般的には良い方法ですが、より良い方法は[IIFEで](http://stackoverflow.com/a/5947280/5743988)です。 – 4castle

+1

これは実際にSoftware Engineering SEまたはCode Review SEに属します。 –

答えて

3

コード組織が戦略的なトピックであるとして、それはソフトウェアを作るために来るとき、あなたが連絡先に管理オブジェクトを定義することができ、このように

var messages = { 
     remove:function{//remove code}, 
     add:function{//add code} 
     } 

が、これがまた非常に独断で、まだ数年以上に生き残ります地形。

あなたが同じ名前空間の下で互いの近くに意味的に関連の機能を維持することで素敵な仕事をする、あるいはユーザーストーリーが解決されることにそれが関連することができ、それは多くの方法で行うことができます。

あなたがこのアプローチをお知りになりたい場合は十分に良いですが、それを反復処理をシミュレートし、新しい機能を追加し、コードに何が起こるかを参照してください。

コードは重複を避けることができますか?それは再利用可能になる?ユーザーのニーズを見つけて関連付けるのは簡単ですか?もしそうなら、それはあなたを助けるでしょう。

最後に、モジュールビルダー、webpackまたはbrowserifyを使用することを検討してください。モジュールを論理的に分離するだけでなく、物理的にも分離できるようになります。

2

私にとっては良い習慣です。小さなプロジェクトで作業する場合は重要ですが、大規模なプロジェクトではほとんどの場合、それを実行する必要があります。

あなたがチャットのウェブサイトを作っているとすれば、メッセージを削除したり、メッセージを追加する機能を作成する必要があります。あなたがそれをやったときにあなたは単にそれを行うことができます。

 var contacts = { 
      remove:function{//remove code}, 
      add:function{ //add code}, 
      block:function{//block code} 
     } 
0

これは本当に、それ自体の答えが、コメントには長すぎるではありません:あなたは私はあなたのサンプルでいくつかのことを指摘したいと思いますについてのベストプラクティスを求めているので

  • onclick。ただ...しないでください。あなたはJSから、HTMLから呼び出されて8時間ということを認識するだけで、行動上の問題を診断しようとしているのです。それは起こるのを待っている保守の悪夢です。
  • innerHTMLもう一度、ちょっとしないでください。 HTMLで作業している場合を除きます。 10のうち9回、textContentが実行され、セキュリティリスクなしで割り当てられます。詳細はGoogleの「innerHTMLセキュリティリスク」を参照してください。
  • alert警告ブロック。迷惑なボックスをクリックするまでブラウザ全体をブロックします。あなたの50個の開いているタブのどれがそれに入っていましたか?ブロッキングが悪いconsole.logを使用してください。あなたはデベロッパーで、devtoolsを開いていますか?
  • toLowerCase機能。データアクセス(DOM要素のテキストを取得する)とデータ変換を混在させます。悪いアイデア。

JavaScriptに特有のものではなく、ほとんどすべてのUIコーディングに適用されます。ビジネスロジックとプレゼンテーションレイヤを混在させたり、ユーザーのやりとりをブロックしたり、最小限の特権を使用したり、データアクセスとデータ処理などを混在させないでください。そして、上記のすべての問題は、いくつかの関数に名前を付けるかどうかよりも大きな問題です。

関連する問題