大家都知道，前端程式設計師一項重要的技能就是能寫出優秀的javascript程式碼。一個優秀的前端程式設計師與一個菜鳥程式設計師在寫javascript程式碼上的差別在哪裡呢？下面就來談一談我在學習Javascript中的一些心得。

前言

我一直很認同一句話：優秀和平凡就在於習慣。
所以，我認為一個優秀的前端程式設計師和菜鳥程式設計師的差別就在程式設計習慣上。大家都知道對於程式設計師來說，熬夜是家常便飯，但一個好的程式設計習慣可以讓你不熬夜，為什麼？因為我們80%的時間不是用在寫程式碼上，而是用在改bug上，而80%的bug來自於我們的程式設計習慣。

程式設計習慣

一聽到程式設計習慣，估計菜鳥又說了不就是習慣嗎？我在程式設計時不聽歌，不吃東西，不一心二用，這不就是好的習慣嗎？確實，這是好的習慣，但這與我們今天所講的程式設計習慣仍有些不同。

在javascript程式設計良好的程式設計習慣中我主要講一個準則和三個建議。

一個準則

一個準則就是“行為與內容分離”。 javascript主要控制html文件的行為，內容就是html文件。行為與內容分離就是javascript程式碼與html文件要分離開，不要把js程式碼內嵌在html文件中。

比如：

<input type="button" onclick="fun()">
<script type="text/javascript">
function fun(){
...
}
</script>

菜鳥寫javascript程式碼時就喜歡這麼寫，但這種寫法是極不推薦的。因為一旦寫死，如果以後需要修改的時候就很麻煩，還需要修改html文件的內容。這個例子很簡單，可能你覺得修改一個onclick很簡單的事，但是如果在幾萬程式碼的工程裡修改呢！那麼你的html文件的內容則會非常龐大，這顯然是不希望發生的！

三個建議

三個建議分別是“循序漸進”、“預留退路”、“向後相容”。

循序漸進：

從最核心的內容開始，逐步新增額外的功能。應該先使用標記語言給核心內容加上正確的標記使其獲得正確的結構，然後再逐步充實被加上了正確標記的內容，充實的內容可以是css樣式，也可以是通過javascript新增各種操作行為。

簡單的說就是不能把很重要的內容通過javascript加到html文件裡去，萬一碰到瀏覽器不支援某個javascript函式，那麼很重要的內容便顯示不出來！

如果你正在使用javascript技術新增核心內容，那麼你未免新增它們的時機太遲了—核心內容應該在剛開始編寫html文件的時候就成為html文件的一部分。

預留退路：

預留退路就是解決一個問題：如果javascript功能被禁用，會怎麼樣？

所以你得在你的javascript程式碼裡考慮到如果javacript功能被禁用，我怎樣能夠最大化的展示我想要展示我的內容，使其免受javascript功能被禁用的影響。

向後相容：

向後相容便是能夠相容老版本的瀏覽器。常見的做法就是進行必要的檢查。檢查什麼？比如如果你要使用某個自帶的函式，那麼就要檢查一下某個函式在老版本里是不是可用。

如：

function displayCite() {
    //這三個if語句便是進行必要的檢查
    if(!document.getElementsByTagName) return false;
    if(!document.createElement) return false;
    if(!document.createTextNode) return false;
   var quote=document.getElementsByTagName('blockquote');
   var h2=document.createElement("h2");
   var h2_txt=document.createTextNode("source");

總結

可以看出，三個建議都是建立在 “核心內容應該在剛開始編寫html文件的時候就成為html文件的一部分。”的基礎上。所以不能通過javascript向html文件新增核心內容。