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{  } 


组件：是一系列相关联的结构组成的总体，是对多模块内通用内容的抽象。

换言之，就是经过代码优化，实现代码更大的通用性。
一样组件也存在着扩展。

组件化及组件的扩展，都有避免重复造轮子的优点。其次就是即是实现多人协同。

（组件，跟“类”的概念很相像。）

其次，在开发中经过模块化和组件化以更高效的方式完成开发工做，同时在这个过程当中可经过“

规范”进行不一样开发者之间的高效沟通。规范包括：命名规范，格式规范等。对于一个初级开发者来讲，首先了解这些代码编写思想很是有必要，便于你们一开始就养成规范编码的习惯，也能更好地适应团队协同开发工做。于此，在提醒并要求本身，从如今开始培养规范意识，提升代码编写的规范性，可读性，可维护性等。