您的位置:首页 » 分类: HTML+CSS & 前端资源 » 文章: 页面模块化实现的条件和基本实现思路

页面模块化实现的条件和基本实现思路

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

页面模块化实现的很大的受制于页面的结构和表现;一个统一的页面结构和表现能很好的实现页面的模块话。

比如一个“网友评论”模块这个会在很多地方使用到,比如日志,照片,等等,如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作页面甚至是行为等等,包括后台的数据存贮。

页面模块化(设想)》上面总结了页面模块化的优点,《前端模块化设计思路》也提到要做到模块化的前提条件:

为了做到这一点,我们需要有一个设计规则,所有的模块都在这个规则下进 行设计。良好的设计规则,会把耦合密集的设计参数进行归类作为一个模块,并以此划分工作任务。而模块之间彼此通过一个固定的接口(所谓的可见参数)进行交互,除此之外的内部实现(所谓的隐参数)则由模块的开发团队进行自由发挥。

我们应给怎么样建立一套设计规则呢?

首先我们要从页面的表现开始,视觉上我们要采用统一的视觉设计规则,比如:

  1. 应用网页栅格化来确定网页布局;
  2. 页面标题栏,字体大小,文本间距统一;
  3. 表单类的表现统一,比如按钮,文本框等;
  4. 图片规格统一;
  5. 行为类的弹窗,浮层等表现统一;
  6. 等等…

其次为模块编写统一的html结构,

  1. 要合理使用语言化的标签;
  2. 可以保存成代码片段或者单独的html文件等,
  3. 如果需要可以加上适当的注释;
  4. 考虑扩张性和维护性;

再次编写为模块编写统一的css,比如:

  1. 要有统一的命名规则(查看鬼哥的命名规则),当然建议加上模块的命名规则,不过我的建议是在模块的命名规则前加上mode_前缀,例如:
    • 弹出 mode_pop
    • 公共 mode_global,mode_gb
    • 标题 mode_title,mode_tit
    • 提示 mode_hint
    • 菜单 mode_menu
    • 信息 mode_info
    • 预览 mode_pvw
    • Tips mode_tips
    • 导航 mode_nav

    当然你也可以根据你们团队重新命名一套规则;合适的才是最好的

  2. 做好基类和拓展类的设计,做好在不同页面模块变化的差异性;比如同一模块在A页面标题的字体是粗体,在B页面标题的字体是细体等等;
  3. 将每个模块的css保存成独立的独立的css文件;
  4. 如果需要可以加上适当的注释;
  5. 考虑扩张性和维护性

接下了为该模块添加行为(js),编写层面向对象的js,提高代码的复用率等等;

最后审视模块间的耦合问题,比如,留言模块和发日志,填表单都会使用到表单元素,按钮,文本框等,那么我认为我们应该把表单样式作为一个独立的css模块,html和js模块还是在原来的模块中。这需要我们对这些模块归类,从而更好,跟方便的的拼装我们的页面,

html模块可以布局模块和功能模块等,比如

  • 按功能分的功能模块,比如:
    1. 日志模块:日志列表,日志详细,日志评论(引用评论模块等等),日志发布(引用表单模块等等),日志管理等等
    2. 评论模块:评论列表,发表评论(引用表单模块等等),评论管理等等
    3. 相册模块:……
    4. 工具条模块:……
    5. ……等等;
  • 按布局分的布局模块:比如栅格化中的一堆布局组合;

css模块比较复杂大致的

  • 按类别分的公共模块:重置模块(css reset),表单模块,字体模块,文字、图片、图文列表模块,弹窗模块,标题模块,提示模块,应用小图标模块等等;这里模块绝大多数作为功能模块的部件,融入在各个模块中;
  • 布局模块和功能模块可以参照html里的功能模块的拆分;

行为js模块可能就相对简单一点,库模块,功能模块等,功能模块可以参照html里的功能模块的拆分;

合理的模块拆分和拼装在实现页面模块化中其中相对重要的作用,模块拆分和拼装的好可以大大的提高开发和维护的效率,反正甚至会影响到网页模块化的成败,给开发和维护带来相对重大的影响。

这样我们就有了网页模块化的基本实现思路,当然这是建立在设计规则上的,如果我们没有完备的设计规则,那么网页模块化就会变成网页魔鬼化,呵呵。

参考文章:

前端模块化设计思路

http://www.cssforest.org/blog/index.php?id=167

http://www.cssforest.org/blog/index.php?id=143

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

12 条评论 - 关于 “页面模块化实现的条件和基本实现思路

  1. Pingback: waakee.com
  2. @bomb4u 看做的是什么吧
    产品设计不同于泛网页设计.产品是实现整个服务流程.整个产品实际就是还原流程.总体来说还是有据可循的.

  3. 这就是所谓的OOCSS吧,把一些经常用的东西可以以组件的形式写出来,针对某些常用的样式写一些复用类,这样可以提高开发效率

  4. 我觉得吧,有一个规则和约定不管怎么说都比随心所欲的要强,更何况大项目都是团队合作,不是一个人做一个小企业站,必须考虑可拓展性、重用性和可维护性。

发表评论

电子邮件地址不会被公开。 必填项已用*标注