前端感悟 ---入門級

標籤：style   blog   color   使用   os   width   

這幾周，看了各種各樣的代碼，經過一堆代碼review，也有了一些基本上的碼農感覺。打算記錄下來，這樣以後忘記了還能回來看看。本來上個星期就想寫這篇文章的，結果星期天晚上被叫回去修bug了。。

下面分css和js來記錄。

css：

在傳統意義上，css的書寫，只要能夠將效果表現出來，同時前面的selector不要太長就好。這樣在項目比較小的時候，修改起來就十分方便。但是，當整個項目開始極度膨脹以後，css就會變得極其龐大。1000+行的css輕輕鬆鬆就能寫到。

在review過程中，可以發現，大部分的css都是無法重用的。一個button樣式，基本都只能是在當前頁用用，而無法用於整個網站button的基類。所以，在這裡，就有一個概念，就是頁面中的元素style，是通過一堆class拼湊出來的，每個class都是有自己的樣式，比如：

部落格園編輯文章下面的發布按鈕，它的樣式是這樣的：

input.Button {    float: left;    background: #6B86B3;    border: 1px solid #333333;    text-transform: uppercase;    margin-right: 15px;    color: #FFFFFF;    font-size: 12px;    font-weight: bold;    width: 70px;    text-align: center;    cursor: pointer;    height: 26px;    line-height: 22px;}

這就是我們平時書寫css的習慣，一溜樣式寫下來，效果有了，就可以回家洗洗睡了。但是，這些樣式，就基本只能用在下面三個按鈕上，其餘的button就無法使用這些style了。

當然，我們可以把裡面的css抽離出來，讓它大部分代碼可以在整個網站使用。如下：

.leftFloat {    float: left;}.button {    border: 1px solid #333;    text-transform: uppercase;    font-weight: bold;    margin-right: 15px;    text-align: center;    cursor: pointer;}.largetButton {    width: 70px;    height: 26px;    line-height: 22px;}.smallFont{    font-size: 12px;}.whiteFont{    color: #fff;}.darkBlueBackground {    background:  #6B86B3;}

 這樣做以後，代碼總行數好像變多了，但是它的可重用性大大提升。對於smallFont，whiteFont，leftFloat，darkBlueBackground等，這些類在使用中就可以不拘束在這個button中了，對於所有的字型，我都可以使用smallFont，whiteFont。這樣，原來的input.Button就會由一些列類組裝來顯示按鈕效果，如下：

<input type="submit" class="leftFloat button largetButton smallFont whiteFont darkBlueBackground" name="Editor$Edit$lkbPost" value="發布" onclick="return CheckInput();" id="Editor_Edit_lkbPost">

當然，對於規模較小，樣式簡單的網站，這樣做是沒有意義的。在那些已經有了自己的顯示規範，樣式複雜，規模較大的網站，這樣做在後期的時候，只要在html裡進行class組裝，再定製一下當前頁簡短的css，就可以快速的完成一個頁面的開發了。

js

js方面，是被罵了無數遍以後才醒悟的。以前總喜歡寫看起來高大上的代碼，而且據說效率還很高，比那些傳統的代碼還看又好用多了。但是，這樣的代碼，完全是寫給機器看的。在多人團隊中，代碼不僅僅是要寫給機器看，更重要的是寫給人看。在這方面，甚至可以犧牲一小部分的效能，來做出易讀的代碼。（注意是一小部分！比如多寫幾句var之類的）

這裡要說一個關於傳參數的東西。一般在js中，我們寫函數時，參數的使用主要有兩大派，如下：

//一溜型function a(a1,a2,a3,a4,a5,a6,a7,a8){    //......}//一堆型//options = {a1: ‘‘,a2: ‘‘,a3: ‘‘,a4: ‘‘,a5: ‘‘,a6: ‘‘,a7: ‘‘,a8: ‘‘}function a(options){}

參數一溜排開的方式，有一個優點，那就是很清楚的讓別人知道，你需要的input是什麼，要你的程式跑起來需要給你什麼。這樣在後來人接手的時候方便理解。不過一長串參數吊在函數後面，實在是有礙觀賞。而且如果想多加一個參數，還要在後面再加一個名字。總感覺不是很優雅。

參數堆在options裡面的方式，讓人感覺很賞心悅目。這樣的寫法感覺很簡介大方。但是如果是在這樣的情況下：

function a(options){balabala;b(options);};

function b(options){balabala;};

這樣的話，想要知道options裡面要有什麼，就必須找到b裡面為止。這還是簡單的情況，如果有個5,6層的調用呢，簡直要讓人抓狂。

有人說可以用注釋，在第一次寫代碼的時候，我們會去乖乖注釋。但是，後來人修改你的代碼的時候，哪有空改注釋，這樣反倒形成一個坑了。

現在我的做法一般是這樣：

function a(options){    //input start    options = options || {};    var a1 = options.a1;    var a2 = options.a2;    var a3 = options.a3;    var a4 = options.a4;    var a5 = options.a5;    var a6 = options.a6;    var a7 = options.a7;    var a8 = options.a8;    //input end    //processing    //output start    return {        a1: a1,a2: a2,a3: a3,a4: a4,a5: a5,a6: a6,a7: a7,a8: a8    };    //output end}

在函數開始的時候，清楚的寫明我要的是什麼，在出去的時候，寫明傳出去的是哪些值。options只在input設定中用，後面的函數體中就不再調用了。這樣，函數雖然長了，但是在團隊開發中，更有利於別人理解你的代碼。而在你的具體processing中，別人可以當做一個黑盒，只在input中添加語句，processing後面添加幾句，就可以完成修改了。這樣更加節省開發成本。

小tips：

我們經常擔心傳進來的objec或者function是undefined。這樣很容易在後期報錯。不過有一招，讓你不用擔心這個：

function a(options){    options = options || {};    var testFunc = options.noFunc || function(){return {};};    //...}

這樣，即使沒有options，沒有options.noFunc，在後面的調用中，調用options.balabala和執行testFunc都不會出錯。當然，在testFunc中，後面的預設函數的傳回值的類型，最好和原來的noFunc傳回型別一致，這樣可以更好的增強程式穩定性。

 

好像不小心在部落格園的部落格上噴了部落格園的css，希望不會被幹掉。。。。