day33—前端開發的模塊化和組件化

轉行學開發，代碼100天——2018-04-18

今天是記錄前端開發中模塊化、組件化的知識。關於何爲模塊化，何爲組件化以及爲什麼要如此，目前仍是處於一個只可意會不可言傳的理解應用階段。

固然，這樣的存在也能想到其好處——方便你我他！

 

一個模塊案例展現以下：

其HTML內容：

<div class="nav">
        <ul>
            <li class="current">
                <a href="#">推薦</a>
            </li>    
            <li>
                <a href="#">排行榜</a>
            </li>    
            <li>
                <a href="#">歌單</a>
            </li>    
            <li >
                <a href="#">主播電臺</a>
            </li>    
            <li >
                <a href="#">歌手</a>
            </li>
            <li>
                <a href="#">新碟上架</a>
            </li>        
        </ul>
    </div>

一個導航欄中，nav下的個元素均是與nav相關元素。所以其各元素CSS樣式命名可按照以下方式進行總體化區分：

    /* nav begin */
        .nav{  }
        .nav ul{  }
        .nav li{  }
        .nav li a{  }
        .nav li .current{  }
        .nav li .current{  }
        .nav-1 ul{  } 
    /* nav end */

 案例中，模塊容器爲class爲nav，也就是或nav表明了這個導航模塊。經過這種方式區分後，便於查找-修改等設置，也便於其餘開發者閱讀。

 有了對模塊的認識，在開發中經常須要對外觀類似，語義相同的模塊進行擴展。可經過「nav-?」方式進行CSS樣式的編寫，以實現代碼代價最小化，避免了大量重複代碼的編寫。

 .nav-1 ul{  } 


組件：是一系列相關聯的結構組成的總體，是對多模塊內通用內容的抽象。

換言之，就是經過代碼優化，實現代碼更大的通用性。
一樣組件也存在着擴展。

組件化及組件的擴展，都有避免重複造輪子的優點。其次就是即是實現多人協同。

（組件，跟「類」的概念很相像。）

其次，在開發中經過模塊化和組件化以更高效的方式完成開發工做，同時在這個過程當中可經過「

規範」進行不一樣開發者之間的高效溝通。規範包括：命名規範，格式規範等。對於一個初級開發者來講，首先了解這些代碼編寫思想很是有必要，便於你們一開始就養成規範編碼的習慣，也能更好地適應團隊協同開發工做。於此，在提醒並要求本身，從如今開始培養規範意識，提升代碼編寫的規範性，可讀性，可維護性等。