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

我会考虑将我的自定义功能包装为一个 jquery 插件。

Answer 2

我的想法：

1. 这取决于许多因素，但如果页面特定代码“大”，那么最好将其分开。但是，如果它只是几行，而且我们不是在谈论数千页，那么将它们全部归入 main.js 可能不是什么大问题。

2. 对 ajax 不是很熟悉，所以我将继续评论如何“重构”。

3. 如果您可以循环分配 onclick 事件，那么不内联执行它们将为您节省大量工作。

Answer 3

您可以使用 jquery 委托方法 如果你有带有标签的 div 元素

书签

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

您可以动态获取“contentId”和“userId”。

Answer 4

首先，直接分配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 到底有多大。