前端开发:模块化—高效重构

模块化开发三阶段:

第一阶段:在一个CSS文件中把多个页面按自己的习惯顺序从上往下编写样式,基本不考虑有无公用样式,以完成设计呈现为首要目的。
第二阶段:提取不同页面中的通用样式,如公用颜色、图标、按钮等,实现一些基本元素的复用。
第三阶段:提取公用功能模块,如导航、版权信息等,实现部分公用模块的复用。

面向对象的CSS有两个主要原则:

1.体现在模块化思想可以理解为,模块的设计制作和布局框架本身相分离,意味着你的模块不能只为某个布局而编写样式,像微博这类存在换肤功能的产品更是如此,如果模块在不同的皮肤样式下需要另写很多样式甚至是修改结构的时候,这个模块的制作就是失败的。

2.布局与内容的分离,布局中某个位置不必只能放置某种内容,反过来可以理解为模块的灵活性和复用性。

遵守团队协作开发规范原则:这个规范可以包含文件目录结构、文件和样式命名规范、图片sprite规范、模块划分和调用规范等,例如我们对文件目录深度的规定、公用样式使用规定、模块的样式名唯一性规定、模块文件名和样式名必须一致的规定等等,确保所有人产出的模块是统一、规范的。

按结构呈现形式划分模块的原则:这一点和模块化编程有较大的区别,通常在编程开发时是以模块的功能来划分的,而在页面构建上,有时候不同功能的模块呈现的样式是一样的,为达到模块样式最大程度的复用,就不能按功能来划分模块,简单来说,哪些模块外观结构一样,我们就可以把它们归为一个模块,以微博右侧模块举例,“可能感兴趣的人”和“推荐应用”模块的外观是一样,都是左侧一个图片、右侧文字和功能按钮,那它们就是同一个样式模块。

模块稳固性原则:遵守语义化,减小不必要的嵌套,代码尽量精简。语义化和代码精简固然是评价质量的一个重要方面,但是代码是否考虑到数据遍历的合理性,是否考虑到dom节点的可操作性,是否考虑到因扩展造成的抗破坏行,更能体现一个页面构建工程师的水平。

模块自适应性原则:指的是任何一个模块,都尽可能实现宽度和高度的自适应,非特殊情况不要设置模块的宽高,采取这种原则制作出的模块具有很好的即插即用功能,是高效完成页面拼合工作的重要前提。试想如果每个模块都定义了宽度,那么在不同的布局上你就必须重新定义每个模块的宽高或边距等属性来适应当前布局。

Margin-bottom原则:一般情况下,网页的布局都是从上到下的流式布局(多栏结构也可以看成各栏内的流式布局),所以,我们可以为每个模块统一预设margin-bottom,达到统一间距的目的,避免出现有些模块设置上边距、有些模块设置下边距的情况发生。

时间: 2024-10-14 15:09:22

前端开发:模块化—高效重构的相关文章

前端开发模块化高效重构

说起模块化,也许我们首先想到的是编程中的模块设计,以功能块为单位进行程序设计,最后通过模块的选择和组合构成最终产品.把这种思想运用到页面构建中,也已经不是什么新鲜事.相信很大一部分页面构建工程师都经历了这样几个阶段:第一阶段是在一个css文件中把多个页面按自己的习惯顺序从上往下编写样式,基本不考虑有无公用样式,以完成设计呈现为首要目的:第二阶段是提取不同页面中的通用样式,如公用颜色.图标.按钮等,实现一些基本元素的复用:第三阶段是提取公用功能模块,如导航.版权信息等,实现部分公用模块的复用. 刚

前端开发:模块化 — 高效重构

说起模块化,也许我们首先想到的是编程中的模块设计,以功能块为单位进行程序设计,最后通过模块的选择和组合构成最终产品.把这种思 想运用到页面构建中,也已经不是什么新鲜事.相信很大一部分页面构建工程师都经历了这样几个阶段:第一阶段是在一个css文件中把多个页面按自己的习惯顺 序从上往下编写样式,基本不考虑有无公用样式,以完成设计呈现为首要目的:第二阶段是提取不同页面中的通用样式,如公用颜色.图标.按钮等,实现一些基本 元素的复用:第三阶段是提取公用功能模块,如导航.版权信息等,实现部分公用模块的复用

Web前端开发必备工具推荐

http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向大家推荐一些优秀,且被广为用之的前端开发工具.下面主要为大家 推荐的是辅助开发工具和网页调试工具. 1.前端开发必备工具之辅助开发工具篇 在这里推荐一些前端开发中可以是你提高开发效率的小工具,既小巧又方便: 一.截图,取色,量尺寸,屏幕录制工具 FastStone Capture 主要用途:截图,取

web前端开发浅析

原文地址:http://www.cnblogs.com/babyzone2004/articles/1807381.html 摘 要:前端开发作为一项新的领域,经历的时间随然较短,却显示了强大的生命里,在web2.0时代,扮演着极其重要的角色,它是RIA时代的幕后推手,同时,也是数字媒体技术的应用之一.   关键词:数字媒体技术:web开发:前端开发,网页重构 什么是前端技术  前端技术包括JavaScript.ActionScript.CSS.xHTML等"传统"技术与Adobe R

前端开发规范文档(html,css,js)

首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的规范都不一样..仅供参考 前端开发规范文档 Html规范 1 代码风格 1.1 缩进 **[强制]**使用 4 个空格作为一个缩进层级,不允许使用 2 个空格或 tab 字符: 2 属性 2.1 属性引号 **[强制]**对于属性的定义使用双引号,不允许使用单引号,不允许不使用引号: 示例: <!-

7招提升你的前端开发效率

7招提升你的前端开发效率 前言 前端工程师其实是一个工作很杂的职位,除了要负责切图.写html/css/js外,还要解决一系列的浏览器兼容性.网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现. 对于开发效率,我个人理解是 开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率 那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分.下面我就介绍下7个提高前端开发效率的方法. 前端工程化 方法 1.切图 切图是一个前端最基础的技能,一般我们使用

掌握这两个技术点,你可以玩转AppCan前端开发

"AppCan的前端开发其实非常简单,只要掌握两方面的技术即可.一方面是会使用栅格布局完成UI的界面排版,另外一方面就是使用AppCan MVVM模型来完成整个页面构造和用户操作逻辑." 在2016AppCan移动开发者大会的技术脱口秀环节, AppCan技术副总监陈雪分享了自己从事AppCan技术开发的经验,帮助开发者深入了解AppCan技术思路. 以下为完整精彩内容: 栅格布局 AppCan采用弹性盒子模型作为标准化的的栅格布局参考方案,帮助开发者更快速的完成界面的排版工作.为什么

大搜车前端开发模式:被动编译和主动编译

最近,梳理了一下公司的前端开发体系,准备给已经工作一年多的原有体系引入一些新的开发模式,其实也不算新了,只是对于我们一直采用的模式来说,是两个完全不同的方向,以前,我崇尚简单,一直按照简单易用的理念构建了公司现有的前端开发体系,现在随着人数的增多和业务的复杂度提升,感觉是时候引入一些差异化的开发体系了. 说来说去有点绕的慌,上面一段中说的 传统的开发模式,在团队内部我们叫做 被动编译,而新的开发方式,在团队内部叫做 主动编译. 被动编译 可能很多人对于被动编译都不是很熟悉,因为这种开发方式现在并

Web前端开发十日谈

一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是“初级”前端开发工程师,一方面我入道尚浅,只有短短几年,另一方面我自知对技术的钻研并不深入,可能是由于环境的原因,当然最重要的是,我幸运的参与到互联网崛起的浪潮之巅.时势造就了一批技能薄弱但备受追捧的“弄潮者”,这在很大程度上影响我们对“技术本质”的洞察力,多年来也一直未有成体系的“前端技术”布道佳作,以至于当下多数人对前端技术