当前位置: 首页 > 科技观察

前端模块化设计思路

时间:2023-03-13 18:49:00 科技观察

模块化理念模块化就是为了减少循环依赖,降低耦合,提高设计效率。为了做到这一点,我们需要有一个设计规则,所有的模块都是在这个规则下设计的。一个好的设计规则会将耦合的设计参数归类为一个模块,并相应地划分工作任务。模块之间通过固定的接口(所谓的可见参数)进行交互,其他内部实现(所谓的隐藏参数)则由模块开发团队自由开发。程序模块化的目的:减少循环依赖,降低耦合,提高设计效率程序模块化的实现:将密集耦合的模块归为一个模块模块之间以固定接口交互实现HTMLCSSImages的自由发挥模块化设计页面模块化的实现,这里指的是除JavaScript部分之外的页面代码的模块化实现。通过htmlcss图像模块化。页面模块化的实现思路是封装高耦合的页面碎片,以模块布局为开放接口,封装高耦合页面,使用独立的css文件,封装高耦合图片,创建文件为一定类型高度相关的图像文件夹。页面模块化的目的是实现页面多人协同开发,提高页面开发速度,降低维护难度。研发速度的提升体现在多人协同并行开发,维护难度体现在版本混乱的减少,按模块划分版本减少了版本间的代码冲突和文件错误覆盖率。拆分页面模块,从小到大分解1.拆分页面模块一个页面由许多小的单元模块组成,这些模块来自于原始的需求文档,例如:logo,navigation,content1,content2,content3,content4,tail导航、版权信息等。根据它们,可以拆分基本模块。2.拆分网站模块将整个网站拆分成频道或类别,如:首页、内容页、文字列表页、图片列表页、频道1页、频道2页、类别1页、类别2页、背景管理页面等3.每个网站作为一个模块。比如:商城站、支付站、论坛,三个站独立分成三大模块。模块化实现1.高度耦合,提取为模块,控制模块代码范围代码1.非继承模块,通过后代选择器控制范围titlecon

more
.mod{}.mod.title{}.mod.con{}.mod。更多{}
  • 关于
  • 合作
  • 招聘
Copyright?2009A公司版权所有
代码2.继承模块,提取出很多模块的公共部分,具体模块优先处理。在继承模块方面,对全站部分模块进行批量修改处理,也提高了复用性,减少了代码重复。titlecon
more.mod{}.mod.title{}.mod.con{}.mod.more{}.note{}.note.title{}.note.con{}.note.more{}2.Pagemodule页面模块代码作用域控件是通过css文件来控制的。某些类型的高耦合页面使用它们自己的css文件。3、模块之间的公共接口是对模块的封装。公共界面如何出现在页面上?第一个是重置、基础和可继承模块。这些代码是开放的接口,页面代码必须基于这些代码开发,也就是你的页面代码必须在上面的代码基础上开发。后面是css文件,css文件的名字和它作用的那些页面。同样,它是布局、模块类、id命名以及模块在页面上的位置。CSS中的表现就是定位、布局、局部盒模型。float,position,width,height等。Layout通常是使用css作为接口来实现的。如果布局逻辑性强,可以通过html和css的结合来完成,比如960GridSystem,或者YUIgrid.css。模块class和id的命名是用来区分模块的,不同模块不能在一个页面的所有css中使用相同的class和id名称。对整个站点模块进行了上面提到的基本原则的规划,实际实现中还存在很多问题,比如模块粒度,公共模块和普通模块的区别,继承的模块是否值得继承等等,如何划分页面模块。首先了解你的项目,通过画网站树状图了解你网站的整体结构和页面模块。其次,理清结构逻辑和视觉逻辑。结构逻辑就是看你的页面是由哪些模块组成的。视觉逻辑理解可继承的模块。、布局逻辑(网格布局或非网格布局)