杭州web前端培训
达内杭州文教中心

13732203138

热门课程

前端模块化的简单介绍

  • 时间:2018-05-15 15:54
  • 发布:杭州web培训
  • 来源:企业面试题

程序模块化的目的:

减少循环依赖

减少耦合

提高设计效率

程序模块化的实施:

把耦合密集的归为一个模块

模块间通过固定的接口交互

模块内部实现自由发挥

HTML CSS Images的模块化设计

页面模块化的实施,这里指的是针对除去JavaScript部分的页面代码进行模块化实施。通过html css 图片进行模块化。

页面模块化的实施思路是高度耦合的页面片段封装,模块布局作为公开接口,高度耦合的页面进行封装,使用独立的css文件,高度耦合的图片进行封装,给某类相关性强的图片建立文件夹。

页面模块化的目的是,实现多人协同开发页面,提高页面研发速度和降低维护难度。研发速度的提升体现在多人协同并行开发, 维护难度体现在减少版本的混乱,根据模块区分版本降低版本间代码冲突和文件错误覆盖。

拆分页面模块,从小到大的分解

1. 拆分页面模块

一个页面有很多个小单元模块组成,他来自有原始需求文档,比如logo,导航,内容1,内容2,内容3,内容4,尾部导 航,版权信息等等。根据他们就可以拆分出基本的模块。

2. 拆分网站模块

将整个网站安排频道或者分类进行拆分,比如首页,内容页,文字列表页,图片列表页,频道1页面,频道2页面,分类1页面,分类2页面,后台管理页面,等等。

3. 每个网站作为一个模块。比如商城站,支付站,论坛,三个站独立为三个大模块。

模块化实现

1. 高度耦合提取为一个模块,用模块代码作用域进行控制

代码1. 非继承模块,通过后代选择符方式控制作用域

<div class="mod">

<h3 class="title">title</h3>

<div class="con">

con

</div>

<a class="more">more</a>

</div>

.mod {}

.mod .title {}

.mod .con {}

.mod .more {}

<div class="footer">

<ul>

<li><a href="" title="">关于</a></li>

<li><a href="" title="">合作</a></li>

<li><a href="" title="">招聘</a></li>

</ul>

Copyright 2009 某公司 版权所有

</div>

.footer {}

.footer ul {}

.footer p {}

代码2. 继承模块,提取众多模块中公共部分,具体模块通过优先级进行处理。继承模块方面整站某些模块的批量修改处理,也提高复用性,降低代码重复。

.mod {}

.mod .title {}

.mod .con {}

.mod .more {}

.note {}

.note .title {}

.note .con {}

.note .more {}

<div class="mod note">

<h3 class="title">title</h3>

<div class="con">

con

</div>

<a class="more">more</a>

</div>

2. 页面模块

页面模块代码作用域的控制通过css文件来控制。某类具有高度耦合的页面使用自身的css文件。

3. 模块间的公开接口

上面是模块的封装,公开的接口在页面中表现为什么?

首先是reset,base,可继承模块,这些代码是开放接口,必须根据这些代码进行页面代码开发,也就是你的页面代码必须在以上代码基础上开发。

其次是css文件,css文件名称和它作用于那些页面。


上一篇:web前端面试题HTML+CSS
下一篇:HTML5的看法
选择城市和中心
贵州省

广西省

海南省