本文版權歸博客園和作者吳雙本人所有，轉載和爬蟲請注明原文地址 http://www.cnblogs.com/tdws/,我是博客園蝸牛，我們共同進步。
如果你的工作中需要寫JavaScript，而你的JavaScript代碼又與業務相關。我想無非就是一下三類功能：
1.請求后台數據
2.渲染后台數據，拼接Html
3.事件操作
當然你如果封裝JS底層的控件，不在我們今天的討論范圍。你也許寫過單文件上千行的JS,你也許維護過幾千行的JS，每次重新看起來，或者增刪改功能吃力嗎，如果你說不吃力，那這篇文章不適合你，如果有些吃力，我們一起來探討今天的話題。今天要討論的是，當你需要寫如上三種JS代碼時，你如何處理他們之間的關系？
提醒：如果你還不懂JS對象或者簡單的封裝，請移步我的這兩篇分享：
1.JavaScript 閉包 http://www.cnblogs.com/tdws/p/5944254.html
2. JavaScript OOP http://www.cnblogs.com/tdws/p/5947693.html
僅僅是整潔的代碼真的有用嗎？
我想說整潔的代碼只是一部分。這個整潔所包含的，我認為是:
1.一個方法只做一件事情，一個方法的行數一定要對自己做嚴格要求，多余的事情，另起一個方法，並配有合適的命名。
舉個例子來說，我在ajax請求都數據，回調方法可能需要對返回結果做一定的邏輯處理，拼接處理。在這個時候，我是很反對直接在回調方法中寫一長串處理邏輯的，一定要用一個新的function來處理。
2.堅決杜絕全局變量。
有的人可能認為，如果我注意點，全局變量並不會帶來什么壞的影響。這樣說沒毛病，但是全局變量帶來的難以閱讀和難以維護性是不可估量的。
3.絕不在頁面底部或者$(function(){});或者onload中直接以$(xxx).click(function(){});這種形式來注冊事件。也絕不在html拼接成功后的方法中以上述方式注冊事件。
個人推崇的方式是，一定要將事件注冊封裝成方法。然后再去調用方法。
其余的整潔規范不做贅述，代碼整潔這種東西，要在不斷的實踐中，用心去思考和體會，並且親手優化和修改，只有一套理論擺着這里，收獲是0。
下面要討論的這種方式，一定是基於上述代碼整潔之道的基礎之上。開篇的三個常用JS代碼情形，你想到辦法如何將他們分離解耦，如何處理好他們之間的關系了嗎?
比方說，你在做一個互聯網新聞網站。
對於這樣的一個新聞列表，你可能需要Ajax對數據做增刪改查操作，你也需要從后台讀取數據並且渲染到頁面，你也需要為頁面上的一系列按鈕或者什么控件注冊一系列的操作事件。
這簡單啊，這有什么難的！但是當你頁面中新聞數據僅僅是一個小模塊的時候，其他模塊可能還有用戶信息模塊，評論模塊，點贊模塊，各種分類模塊，廣告招商模塊，各種熱門模塊。如果想象不到復雜性，可以去網易新聞官網看看。
當然在這樣的情況下，你可能說，分離js呀，js模塊化，js合並壓縮。是的，這些都是不錯的解決方案。但是，你如何保證一個單獨的JS或者模塊化后的JS依然保持慢條斯理，結構清晰？或者說如果這些代碼真的要寫在一個JS里，如何寫，如何維護。
有的老司機可能說，你不會是隨便來談談MVVM吧？不是。在數據請求，數據渲染，事件注冊這三種情形，在復雜的業務邏輯之下，我們要做的就是解耦分離。下面是我個人的解決方案，是我在不斷的實踐和嘗試過程當中，感到受用，好用，一直在用的一種方案：
將上述三種代碼分層，一個JS對象就是一“層”。每個業務點基本都分為這三層。
//操作 var newsOption = { //詳情按鈕 detailBtnClick: function () { }, //移除按鈕 removeBtnClick: function () { }, //發布按鈕 publishBtnClick: function () { }, //滑動加載更多 scollLoadMore: function () { this.loadMore(); }, //點擊加載更多 btnLoadMore: function () { this.loadMore(); }, //加載更多 loadMore: function () { } } //數據 var newsData = { //變量 currentPageIndex: 1, currentPageSize: 10, //獲取新聞列表 getNewsList: function () { }, //獲取單個新聞 getSigleNews: function () { }, //移除新聞 removeNews: function () { } } //渲染 var newsRander = { //渲染新聞列表 renderNewsList: function () { }, //渲染新聞詳情 renderNewsDetail: function () { } }
上面就算是偽代碼吧。你可以看到我將js分為三層，操作，數據，渲染。你也可以看到，我們可以告別全局變量，和數據相關的全局變量，你將其存在相應的Data層下。業務相關的全局變量，你將它存在操作層下。渲染拼接工作就交給render來做，我通常渲染工作為了達到再度分離js html,我使用jquery.tmpl.js。你所有新聞相關的數據操作都應該放在newData層下，你所有操作事件應該寫在newsOption層下。當你來了第二個業務點時，比如評論模塊，那你就需要一套新的分層：commentOption,commentData,commentRender.
可能看完你想打我，我看了這么半天你就分享這點東西？但是相信我，這樣的分層，對你自己而言賞心悅目，維護方便，開發快捷，調試容易。對他人而言，別人不會在背后罵你的代碼咯。
如果我的分享對你有點點滴幫助，歡迎點贊支持，也歡迎點擊下方紅色關注，我將持續分享。為你自己點贊，為你整潔的代碼點贊。