團隊合作js代碼,程序員團隊合作

本文目錄一覽：

• 1、如何寫高質量的JS，Html5前端代碼
• 2、門戶網站有一些JS直接明文寫在HTML裡面，有一些只放了個JS文件的URL，為什麼會有這種考慮？
• 3、如何寫出規範的JavaScript代碼

如何寫高質量的JS，Html5前端代碼

首先，本人在前端開發方面有點心得，有什麼不對的地方希望給出建議讓我更好的進步

1.命名

在開發前必須有個命名規範來對代碼統一規範團隊代碼結構，使代碼可讀性提高

2.注釋

我相信每個人看別人代碼時看到密密麻麻的代碼結構，相信每個人都會很頭疼，即使想看也會看不下去，而且很耗時間，所以注釋就變得尤其得重要，注釋越清楚越詳細我相信代碼可維護性越高，而且更容易修改維護

3.變數

在js中變數無處不在，所以這麼聲明變數就變得尤其得重要，首先少使用全局變數，這樣會增加載入速度，從而導致項目用戶體驗不好

4.聲明變數如果不用 var 會導致變數成為全局變數。

5.函數

函數的參數數量

函數的參數不應該超過 3 個。如果函數的參數超過 3 個，應該將一些參數進行封裝。

6.函數參數傳遞

只傳函數需要的參數。如

// 不推薦

function greet(data){

console.log(‘Hello, I am ‘ + data.name);

}

// 推薦

function greet(name){

console.log(‘Hello, I am ‘ + name);

}

7.函數的功能

一個函數只做一件事。這有助於測試和代碼復用。

函數儘可能無副作用。無副作用指不修改傳入的參數和全局變數。

8.減少重複代碼

. 記得在某個文章中看到說，如果重複的代碼出現 3 次，就應該重構重複的代碼。

. 松耦合

. 一個函數只做一件事

. 緩存一些計算結果

9.避免全局變數

. 從分配置和離邏輯代碼

. 不要修改不屬於你的對象

. 不屬於你的對象包括

. 瀏覽器原生對象，如 Object，Array等

DOM，如 document

BOM，如 window

類庫對象

如果想拓展瀏覽器原生對象的功能，可以創建函數，函數中把瀏覽器原生對象傳入。如 Underscore.js 做 的那樣。

10.代碼風格的統一

11.儘可能的避免代碼重複

. 如何減少重複的代碼呢？

. 在JS中，可以將重複的代碼寫成一個方法，如果是可通用的，可以寫在獨立的JS文件中。

. 在CSS中，則需要藉助Sass，Less之類的預處理語言的Mixins的功能。將重複的部分寫成一個Mixins。

12.配置和邏輯分開

. JS中，對於整個站的通用配置，寫在config.js里。如果是某個js的配置，在文件的開頭，用defaultParam 對象來存放可變的配置，用const來定義不可變的配置

. CSS中，依舊要藉助預處理語言。對於整站的配置，定 義在_variables.scss里。對於某個具體CSS文件里，在文件開頭用變數來定義

13.減少代碼的副作用

1JS中，方法中的溝通盡量不要用全局變數；不要在Array之類的全局對象的原型鏈上添加方法；盡量不要定義全局的方法和變數：如果確實有很多變數，方法放在全局上，可以學習jQuery,將很多變數，方法放在一個全局對象上；自定義事件，事件的名稱也要有命名空間。

2CSS中，要做到無副作用，難度很大。對於簡單頁面，一個方法是，把頁面上的元素都分成一個個組件，寫樣式時，選擇器要用組件選擇器 當前元素選擇器。當組件變的複雜時，組件也會包含很多子組件。然後，選擇器就會越來越長。。。我的解決方案是用的BEM。

14.提高代碼的可讀性

. 變數，方法等的合理命名，通過名稱可以知道這個大概做什麼的。

. 如果則要加註釋來說明一下。對於不容理解的代碼加註釋

. 儘可能不用魔法數字

. 對於HTML，選擇合適標籤

15.一個方法只做一件事

一來提高代碼的復用性，二來讓調試也變的更容易，三來讓測試變的更容易

門戶網站有一些JS直接明文寫在HTML裡面，有一些只放了個JS文件的URL，為什麼會有這種考慮？

首先，放在JS文件以及放在HTML內的運行效果是一樣的。區別在於：

對於團隊合作的網站開發，分工有網頁重構（HTML和CSS），網頁前端（JS），網頁後端（PHP,JSP,ASP等），將HTML和JS分開有助於團隊合作，相互開發自己的內容而不需要混在一起。另一方面，JS做成訪問也方便版本管理和復用，比如多個頁面都需要載入同一段JS，如果每個頁面都放一段JS代碼就會造成管理困難；如果JS要升級，只需要升級JS文件就可以，不需要變更HTML。

JS和HTML分開的劣勢是打開網頁時候需要單獨請求JS，會造成更多的網路請求，影響效率，但是在如今的電腦運算速度那麼快，網速那麼高的情況下，這個劣勢可以忽略不計。

望採納。

如何寫出規範的JavaScript代碼

本人在開發工作中就曾與不按規範來開發的同事合作過，與他合作就不能用”愉快”來形容了。現在本人撰寫此文的目的除了與大家分享一點點經驗外，更多的是希望對未來的合作夥伴能夠起到一定的借鑒作用。當然，如果我說的有不科學的地方還希望各路前輩多多指教。下面分條目列出各種規範要求，這些要求都是針對同事編碼毛病提出來的，好些行業約定的其它規範可能不會再提及。1. 保證代碼壓縮後不出錯對於大型的JavaScript項目，一般會在產品發布時對項目包含的所有JavaScript文件進行壓縮處理，比如可以利用Google Closure Compiler Service對代碼進行壓縮，新版jQuery已改用這一工具對代碼進行壓縮，這一般會去掉開發時寫的注釋，除去所有空格和換行，甚至可以把原來較長的變數名替換成短且無意義的變數名，這樣做的目的是加快文件的下載速度，同時也減小網站訪問帶來的額外數據流量，另外在代碼保護上也起到了一點點作用，至少壓縮後的代碼即使被還原還是沒那麼容易一下讀懂的。要想代碼能正確通過壓縮，一般要求語句都要以分號正常結束，大括弧也要嚴格結束等，具體還要看壓縮工具的要求。所以如果一開始沒有按標準來做，等壓縮出錯後再回去找錯誤那是浪費時間。2. 保證代碼能通過特定IDE的自動格式化功能一般較為完善的開發工具（比如Aptana Studio）都有代碼”自動格式”化功能，這一功能幫助實現統一換行、縮進、空格等代碼編排，你可以設置自己喜歡的格式標準，比如左大括弧{是否另起一行。達到這個要求的目的在於方便你的開發團隊成員拿你代碼的一個副本用IDE自動格式化成他喜歡或熟悉的風格進行閱讀。你同事需要閱讀你的代碼，可能是因為你寫的是通用方法，他在其它模塊開發過程中也要使用到，閱讀你的代碼能最深入了解方法調用和實現的細節，這是簡單API文檔不能達到的效果。3. 使用標準的文檔注釋這一要求算是最基本的，這有利於在方法調用處看到方法的具體傳參提示，也可以利用配套文檔工具生成html或其它格式的開發文檔供其他團隊成員閱讀，你可以嘗試使用jsdoc-toolkit。如果你自動生成的API是出自一個開放平台，就像facebook.com應用，那麼你的文檔是給天下所有開發者看的。另外編寫完整注釋，也更方便團隊成員閱讀你的代碼，通過你的參數描述，團隊成員可以很容易知道你編寫的方法傳參與實現細節。當然也方便日後代碼維護，這樣即使再大的項目，過了很長時間後，回去改點東西也就不至於自己都忘記了當時自己寫的代碼是怎麼一回事了。4. 使用規範有意義的變數名使用規範有意義的變數名可以提高代碼的可讀性，作為大項目開發成員，自己寫的代碼不僅僅要讓別人容易看懂。開發大項目，其實每個人寫的代碼量可能都比較大，規範命名，日後自己看回自己的代碼也顯的清晰易懂，比如日後系統升級或新增功能，修改起代碼來也輕鬆多了。如果到頭髮現自己當初寫的代碼現在看不太懂了，那還真是天大的笑話了。當然，使用有意義的變數名也盡量使用標準的命名，比如像這裡：var me = this也許沒有var self = this好，因為self是Python中的關鍵字，在Python中self就是通常語言this的用法。再看下面一個例子，加s顯然比沒有加來的科學些，這樣可以知道這個變數名存的是複數，可能是數組等： var li = document.getElementsByTagName(‘li’) var lis = document.getElementsByTagName(‘li’) 5. 不使用生偏語法JavaScript作為一門動態腳本語言，靈活性既是優點也是缺點，眾所周知，動態語言不同層次開發人員對實現同樣一個功能寫出來的代碼在規範或語法上會存在較大的差別。不管怎麼樣，規範編碼少搞怪，不把簡單問題複雜化，不違反代碼易讀性原則才是大家應該做的。比如這語句：typeof(b) == ‘string’ alert(b)應該改為：if (typeof(b) == ‘string’) alert(b)，像前面那種用法，利用了運算符解析機制：如果檢測到前語句返回false就不再檢測後面語句，在代碼優化方面也有提到把最可能出現的情況首先判斷，像這種寫法如果條件少還好，如果條件較多而且語句也長，那代碼可讀性就相當差。又比如：+function(a){var p = a;}( ‘a’)應該改為：(function(a){var p = a;})( ‘a’)，其實function前面的+號與包含function的()括弧作用是一樣的，都是起運算優先作用，後者是常見且容易看明白的防止變數污染的做法，比如好些流行JavaScript框架就是採用後面這種方式。再說個降低代碼可讀性的例子，如：function getPostionTxt(type){return type == 2 ? “野外” : (type == 3 ? “商城” : (type == 4 ? “副本” : null));}應該改成：function getPostionTxt(type){var typeData={“2″:”野外”,”3″:”商城”,”4″:”副本”};if (typeData[type]) return typeData[type]; else return null;}。如果type是從0開始不間斷的整數，那麼直接使用數組還更簡單，這種結果看起來就清晰多了，看到前面那種多層三元表達式嵌套頭不暈嗎。6. 不在語句非賦值地方出生中文語句中不應該出現中文我想一般人都知道，雖然這樣做不影響程序運行，但是顯然有背行業標準要求，當然我們也不是在使用”易語言”做開發。關於這一個問題，我本來不想把它拿出來說的，但我確實遇到有人這樣做的，也不知道是不是因為他的英語實在太爛了，至少還可以用拼音吧，另外尋求翻譯工具幫忙也不錯的選擇。我舉例如下，像以下寫法出現在教學中倒還可以理解：this.user[‘名字’] = ‘張三’ 或者 this.user.名字 = ‘張三’7. 明確定義函數固定數量的參數固定數量參數的函數內部不使用arguments去獲取參數，因為這樣，你定義的方法如果包含較多的腳本，就不能一眼看到這個方法接受些什麼參數以及參數的個數是多少。比如像下面： var $ = function(){return document.getElementById(arguments[0]);}應該改成：var $ = function(elemID){return document.getElementById(elemID);} 8. 不必熱衷動態事件綁定雖然知道事件可以動態綁定，比如使用addEventListener或者使用jQuery的bind方法，也知道採用動態事件綁定可以讓XHTML更乾淨，但是一般情況下我還是建議直接把事件寫在DOM節點上，我認為這樣可以使代碼變得更容易維護，因為這樣做，我們在查看源代碼的時候就可以容易地知道什麼Element綁定了什麼方法，簡單說這樣更容易知道一個按鈕或鏈接點擊時調了什麼方法腳本。9. 降低代碼與XHTML的耦合性不要過於依賴DOM的一些內容特徵來調用不同的腳本代碼，而應該定義不同功能的方法，然後在DOM上調用，這樣不管DOM是按鈕還是鏈接，方法的調用都是一樣的，比如像下面的實現顯然會存在問題： function myBtnClick(obj) { if (/確定/.test(obj.innerHTML)) alert(‘OK’); else if (/取消/.test(obj.innerHTML)) alert(‘Cancel’); else alert(‘Other’); } a herf=”javascript:;” onclick=”myBtnClick(this)”確定/aa herf=”javascript:;” onclick=”myBtnClick(this)”取消/a 上面例子其實在一個函數內處理了兩件事情，應該分成兩個函數，像上面的寫法，如果把鏈接換成按鈕，比如改成這樣：input type=”button” onclick=”myBtnClick(this)” value=”確定” /，那麼myBtnClick函數內部的obj.innerHTML就出問題了，因為此時應該obj.value才對，另外如果把按鈕名稱由中文改為英文也會出問題，所以這種做法問題太多了。10. 一個函數應該返回統一的數據類型因為JavaScrip是弱類型的，在編寫函數的時候有些人對於返回類型的處理顯得比較隨便，我覺得應該像強類型語言那樣返回，看看下面的兩個例子： function getUserName(userID) { if (data[userID]) return data[userID]; else return false; } 應該改為： function getUserName(userID) { if (data[userID]) return data[userID]; else return “”; } 這個方法如果在C#中定義，我們知道它準備返回的數據類型應該是字元串，所以如果沒有找到這個數據我們就應該返回空的字元串，而不是返回布爾值或其它不合適的類型。這並沒有影響到函數將來的調用，因為返回的空字元串在邏輯判斷上可被認作”非”，即與false一樣，除非我們使用全等於”===”或typeof進行判斷。11. 規範定義JSON對象，補全雙引號使用標準肯定是有好處的，那麼為什麼還是有人不使用標準呢？我想這可能是懶或習慣問題。也許還會有人跟我說，少寫引號可以減輕文件體積，我認為這有道理但不是重點。對於伺服器返回的JSON數據，使用標準結構可以利用Firefox瀏覽器的JSONView插件方便查看（像查看XML那樣樹形顯示），另外你如果使用jQuery做開發，最新版本jQuery1.4+是對JSON格式有更高要求的，具體的可以自己查閱jQuery更新文檔。比如：{name:”Tom”}或{‘name’:’Tom’}都應該改成{“name”:”Tom”}。12. 不在文件中留下未來確定不再使用的代碼片段當代碼調整或重構後，之前編寫的不再使用的代碼應該及時刪除，如果認為這些代碼還有一定利用價值可以把它們剪切到臨時文件中。留在項目中不僅增加了文件體積，這對團隊其它成員甚至自己都起到一定干擾作用，怕將來自己看回代碼都搞不懂這方法是幹什麼的，是否有使用過。當然可以用文檔注釋標籤@deprecated把這個方法標識為不推薦的。13. 不重複定義其他團隊成員已經實現的方法對於大型項目，一般會有部分開發成員實現一些通用方法，而另外一些開發成員則要去熟悉這些通用方法，然後在自己編寫模塊遇到有調用的需要就直接調用，而不是像有些開發者喜歡”單幹”，根本不會閱讀這些通用方法文檔，在自己代碼中又寫了一遍實現，這不僅產生多餘的代碼量，當然也是會影響團隊開發效率的，這是沒有團隊合作精神的表現，是重複造輪子的悲劇。比如在通用類文件Common.js有定義function $(elemID){return document.getElementById(elemID)}那麼就不應該在Mail.js中再次出現這一功能函數的重複定義，對於一些複雜的方法更應該如此。14. 調用合適的方法當有幾個方法都可以實現同類功能的時候，我們還是要根據場景選擇使用最合適的方法。下面拿jQuery框架的兩個AJAX方法來說明。如果確定伺服器返回的數據是JSON應該直接使用$.getJSON，而不是使用$.get得到數據再用eval函數轉成JSON對象。如果因為本次請求要傳輸大量的數據而不得以使用$.post也應該採用指定返回數據類型（設置dataType參數）的做法。如果使用$.getJSON，在代碼中我們一眼能看出本次請求伺服器返回的是JSON。溫馨提示：jQuery1.4後，如果伺服器有設置數據輸出的ContentType，比如ASP.NET C#設置 Response.ContentType = “application/json”，那麼$.get將與$.getJSON的使用沒有什麼區別。15. 使用合適的控制項存儲合適的數據曾發現有人利用DIV來保存JSON數據，以待頁面下載後將來使用，像這樣：div id=”json”{ “name”:”Tom”}/div，顯然這個DIV不是用來界面顯示的，如果非要這樣做，達到使用HTML文件進行數據緩存的作用，至少改成用隱藏域來存這數據更合理，比如改成：input type=”hidden” value=” { “name”:”Tom”}” /。其實也可以利用window對象來保存一些數據，像上面的例子，我們可以在AJAX請求頁直接包含這樣的腳本塊：scriptwindow.userData = { “name”:”Tom”};/script，當在AJAX請求回調函數中執行完$( “#MyDiv “).html(data)後，在window上就馬上有了這一變數。如果採用第一種方法，將不可避免eval(document.getElementById(“UserData”).innerHTML)。如果在window對象存放大量數據的話，這些數據不用時要及時手動清理它們，它們是要等瀏覽器刷新或重啟後才會消失的，這就會增加內存開銷。16. 永遠不要忽略代碼優化工作代碼最優化是每個程序員應該努力達到的目標，也應該成為程序員永遠的追求。寫代碼的時候，不應該急著把功能實現出來，要想一下如何寫代碼，代碼的執行效率才是較好的。舉個例子：假設有定義getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)}，那麼有人可能會寫出這樣的代碼$(“MyDiv”).parentNode.removeChild($(“MyDiv”))，其實這裡執行了兩次getElementById DOM查找，如果改成這樣將更好：var myDiv = $(“MyDiv”); myDiv.parentNode.removeChild(myDiv)。還好getElementById的DOM查找算比較快，如果換成getElementsByTagName則更應該注重優化了。jQuery開發團隊也有提醒大家要注意這方面的問題。當然，代碼優化技巧也是需要個人不斷積累的。曾有朋友跟我說他寫網站後台代碼從來不用考慮優化的，因為他們網站用的是至強四核伺服器，我覺得這是很可笑的。17. 會分析策劃文檔，能用面向對象方法進行介面定義和代碼組織這一能力對於每一個程序員來說都是非常重要的，這也是決定一個程序員水平高低的一個重要因素。能夠把需求細化並抽象出不同的類，然後有條理地編寫代碼，使代碼結構清晰，可讀性高，代碼易於維護，不至於太過程化而且雜亂無章，這樣才算是一個優秀的程序員。