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


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

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

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

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

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

规范”进行不同开发者之间的高效沟通。

规范包括：命名规范，格式规范等。

对于一个初级开发者来说，首先了解这些代码编写思想非常有必要，便于大家一开始就养成规范编码的习惯，也能更好地适应团队协同开发工作。

于此，在提醒并要求自己，从现在开始培养规范意识，提高代码编写的规范性，可读性，可维护性等。