JavaScript代码组织建议/代码审查

Question

1. 我正在一个拥有大量自定义(特定于页面的js)的大型网站上工作.有一个main.js和page-specific.js文件.有没有更好的方法可以使用以下模式？

2. 如何重新考虑使用ajax的多个方法？

3. 我目前在线分配所有onclick事件,例如onclick ="MYSITE.message.send ... - 它有更好的方法吗？创建多个$("#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

首先，onclick=""直接分配是不好的做法。使用 jQuery 的click()方法并不需要做更多的工作，但即使是这样，它也更干净，更值得推荐。它将 HTML 标记与 JS 功能分开，并且使以后更容易更改内容。这是你应该重构的第一件事。

我对 JS 所做的就是创建一个包含所有类/核心功能的主库 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 相关的更新发生在一个文件（或更少）中。通过这种设置，您不应该严格需要特定于页面的 JS 文件，尽管从组织上来说这可能是有意义的——我不知道您的 JS 有多大。