javascript - JavaScriptコード編成の提案/コードレビュー

Question

1. 私は多くのカスタム（ページ固有のjs）を持つ大規模なサイトで作業しています。main.jsファイルとpage-specific.jsファイルが1つあります。次のパターンを使用できるより良いアプローチはありますか？

2. ajaxを使用する複数のメソッドをリファクタリングするにはどうすればよいですか？

3. 私は現在、 onclick = "MYSITE.message.send ...などのすべてのonclickイベントをインラインで割り当てています-それはより良い方法ですか？複数の$（ "＃button"）。click（function（）{}）;を作成することはより多くの作業のようです..。。

   var MYSITE = MYSITE ? MYSITE: {};
   var MYSITE {  
   bookmark: {
       add: function(contentId, userId) {  
           var data = {  
               contentId: contentId,  
               userId: userId  
           };  
           $.ajax({  
               url: "/rest/bookmarks/",  
               type: "post",  
               data: data,  
               complete: function(response) {  
                   if (response.error) {  
                       alert(response.error);  
                   } else {  
                       alert("success");  
                   }  
               }  
           });  
       }  
   },  
   message: {  
       /* <a onclick="MYSITE.message.send('1234', '1234');" href="javascript:void(0);">BOOKMARK</a> */  
       send: function(contentId, userId) {  
           var data = {  
               contentId: contentId,  
               userId: userId  
           };  
           $.ajax({  
               url: "/rest/bookmarks/",  
               type: "post",  
               data: data,  
               complete: function(response) {  
                   if (response.error) {  
                       alert(response.error);  
                   } else {  
                       alert("success");  
                   }  
               }  
           });  
       }  
   }  
   

   }

Answer 1

タグ付きのdiv要素がある場合は、jqueryデリゲートメソッドを使用できます

<div id="ブックマーク">
<a href="#">ブックマーク</a>
</div>

$("div#bookmarks").delegate("a", "click", function(){
    MYSITE.message.send('1234', '1234');
});

「contentId」と「userId」を動的に取得できます。

Answer 2

まず、直接割り当てるonclick=""ことは悪い習慣です。jQuery のclick()メソッドを使用することは、それほど手間がかかるわけではありません。これにより、HTML マークアップが JS 機能から分離され、後で簡単に変更できるようになります。これは、リファクタリングする必要がある最初のことです。

JS で行うことは、すべてのクラス/コア機能を含む 1 つのメイン ライブラリ JS ファイルを作成することです。次に、特定のページでインライン<script>タグを使用して、関数へのリンクを接続するメソッドを呼び出します。

グローバル app.js ファイルには、次の関数があります。

function initLinksOnPageX() {
  $('#button').click(function() { MYSITE.message.send('1234', '1234'); });
  /* ... setup any other events ... */
}

ページ本文:

<script type="text/javascript">
  $(initLinksOnPageX);
</script>

繰り返しますが、これにより、マークアップが JS コードから切り離されるため、JS 関連の更新は 1 つのファイル (またはそれ以下) で行われます。このセットアップでは、ページ固有の JS ファイルを厳密に必要とする必要はありませんが、組織的に言えば理にかなっているかもしれません.JS がどのくらい大きいかは正確にはわかりません.

Answer 3

私の考え：

1. これは多くの要因に依存しますが、ページ固有のコードが「大きい」場合は、おそらく分離しておくのが最善です。ただし、それがほんの数行であり、数千ページのことを話しているわけではない場合、すべてを main.js にまとめることは大きな問題ではないかもしれません。

2. ajax にはあまり詳しくないので、「リファクタリング」の方法についてコメントします。

3. onclick イベントの割り当てをループできる場合は、それらをインラインで実行しないことで、多くの作業を節約できます。

Answer 4

カスタム機能を jquery プラグインとしてラップすることを検討します。