仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 745|回复: 8
打印 上一主题 下一主题

[DIV+CSS] DIV教程之CSS模块化怎样完成?

[复制链接]
愤怒的大鸟 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:55:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
网页制造poluoluo文章简介:页面制造为何必要模块化?
比来被“模块化”缠身,又是文章又是PPT的,被逼着想了良多相干的器材。收拾下我这段工夫关于“模块化”的思索,年夜多都是我本人处置页面重构这份事情的履历和了解,在必定水平上存在范围性,也但愿本人能温故而知新。
“模块化”只是我们关于已往一向利用的手艺、办法的一个新潮的称呼,就像“Ajax”。不外做为页面重构开展的一种趋向,愈来愈被人人器重,不盲目也满口的“模块化”,只是你真的了解甚么是“模块化”吗?
甚么是模块化?
对“模块化”的注释,在CNKI中就有28种。可见“模块化”头脑利用的普遍。最靠近页面重构中的“模块化”,现有的注释应当就是软件开辟中的注释了。
先看一下百度词条是怎样注释“模块化”的:
“模块化是指办理一个庞大成绩时自顶向下逐层把软件体系分别成多少模块的历程。每一个模块完成一个特定的子功效,一切的模块按某种办法组装起来,成为一个全体,完成全部体系所请求的功效。模块具有以下几种基础属性:接口、功效、逻辑、形态,功效、形态与接口反应模块的内部特征,逻辑反应它的外部特征。在软件的系统布局中,模块是可组合、分化和改换的单位。”
相干的书本也蛮多的,有乐趣的同砚能够搜一下。必要夸大一点,我们所自创的是一种头脑的体例。
页面制造为何必要模块化?
站点内容愈来愈多、代码愈来愈痴肥,垂垂影响到了客户真个体验(次要是翻开速率),影响到了保护的效力。有甚么办法能够办理这些成绩呢?
我们很简单就想到:削减代码冗余、进步代码重用率、图片紧缩等等,而这些要怎样完成呢?模块化头脑能够办理,便可以无效削减代码冗余、进步代码重用率,更主要是能够撑持到多人保护,下降保护本钱。CSS写法较为天真,简单发生代码的耦合,利用模块化也能够在必定水平上下降耦合度,关于BUG的定位也有匡助。以是,我们更应当在站点后期就器重并利用“模块化的头脑”编写站点。
我们之前常常提到的站点功能优化,有相称一部分也是“模块化”的内容,好比进步代码重用,进步开辟效力等等,“模块化”的长处另有良多,我也许列了一下:


  • 进步代码重用率
  • 进步开辟效力、削减相同本钱
  • 下降耦合
  • 下降公布风险
  • 削减Bug定位工夫和Fix本钱
  • 进步页面庞错
  • 更好的完成疾速迭代
  • 更好的撑持灰度公布
个中最主要的一点,我以为是“进步代码重用率”,这也是模块化最主要的特性之一。
怎样完成“模块化”?
这里的次要成绩是HTML与CSS的“模块化”,我们能够看下换肤的完成办法:


  • 统一类名,换文件(JS)
  • 统一文件,换类名(JS)
由此可知HTML与CSS的接话柄现:


  • CSS引进的三种体例
  • 类名
为了更好的完成这类接口,必要有相干的(交互、计划、页面、开辟)商定、划定规矩、标准,好比:一切以后形态都利用统一个类名“nonce”,一切变灰的体现都利用原类名后加“_n”,Tab的完成体例等等。有了这些商定、划定规矩、标准后,HTML代码就很简单能够完成模板化,一致接口标准。
有两个误区必要先认清下:


  • 模块化后并非就可以被利用在任何地位(模块化后的代码段也是有合用的局限限定,必要一个供应接口划定规矩的情况)
  • 模块化后并非就不克不及再变动(模块化后的代码段可依据实践必要做修正)
完整自力的模块放在统一项目中,因为项目有本人的体现、交互一致性,以是各模块间一定呈现相似的部分,这些部分能够被提出来做为大众的界说,削减冗余,这时候就会呈现耦合的成绩,完整不耦合是不成能的,因而模块化中很主要一点就是“过度的耦合”。有了大众界说,就得调剂模块款式的完成体例了,而这类调剂也会影响到“接口”的完成体例。
因为本篇次要是讲模块化的头脑体例,详细完成的细节留待今后的文章中切磋。

最新版本html5+css3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
老尸 该用户已被删除
沙发
发表于 2015-1-17 23:50:09 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
admin 该用户已被删除
板凳
发表于 2015-1-26 21:19:49 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
小妖女 该用户已被删除
地板
发表于 2015-2-4 22:19:43 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
蒙在股里 该用户已被删除
5#
发表于 2015-2-10 22:38:32 | 只看该作者
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
不帅 该用户已被删除
6#
发表于 2015-3-1 17:34:21 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
只想知道 该用户已被删除
7#
发表于 2015-3-10 22:07:48 | 只看该作者
还可以在Dreamweaver常用工具中选择超级链接,完成相应的填写即可。
透明 该用户已被删除
8#
发表于 2015-3-17 12:08:29 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
因胸联盟 该用户已被删除
9#
发表于 2015-3-24 11:39:07 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-29 12:18

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表