JavaScript代碼組織建議/代碼審查

我正在一個有很多自定義（頁面特定js）的大型網站上工作。有一個main.js和page-specific.js文件。有沒有更好的方法可以使用以下模式？JavaScript代碼組織建議/代碼審查
如何重新分解多個使用ajax的方法？

目前，我指定所有的onclick事件直列如的onclick = 「MYSITE.message.send ... - ？它有沒有更好的方法創建多個$（」＃鍵「）點擊（函數（） {}）;好像更多的工作......

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"); 
       } 
      } 
     }); 
    } 
}

}

來源

2010-07-27 Eeyore

恰巧我最近完成了關於這個問題的一個方面的博客文章：http://whatsthepointy.blogspot.com/2010/07/wallflower-unobtrusive-jquery.html – Pointy 2010-07-27 20:03:22

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

來源

2010-07-27 20:06:41

我同意你的觀點， t內聯onclick會比$（'＃button'）更快。click（function {}）; ？ – Eeyore 2010-07-27 20:18:28

「更快」是什麼意思？性能方面有一個可以忽略的差異。你應該閱讀關於不引人注目的JS以及爲什麼推薦它：http://en.wikipedia.org/wiki/Unobtrusive_JavaScript - 你不使用內聯CSS，同樣的概念適用於JS。 – 2010-07-27 20:39:17

，如果你有div元素與標籤

 
<div id="bookmarks"> 
<a href="#">BOOKMARK</a> 
</div> 

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

，你可以得到「內容識別」和「用戶id」動態您可以使用jQuery的委託方法。

來源

2010-07-27 20:08:32 jcubic

我的想法：

這取決於許多因素，但如果特定的頁面代碼爲「大」，那麼它可能是最好保持它分開。但是，如果它只是幾行，並且我們不是在談論數千頁，那麼將它們全部放到main.js中可能不是什麼大問題。
對ajax不太熟悉，所以我會通過評論如何「重構」。
如果你可以循環你的onclick事件的任務，那麼不要在線執行它們會爲你節省很多工作。

來源

2010-07-27 20:10:38 ScottS

我會考慮將自定義功能作爲jQuery插件包裝起來。

來源

2010-07-27 20:23:41

JavaScript代碼組織建議/代碼審查

回答

相關問題