《编写高质量代码——Web前端开发修炼之道》读后随笔
结构样式行为的分离
结构标准包括XML标准、XHTML标准、HTML标准；样式标准有CSS标准；行为标准主要包括DOM标准和ECMAScript标准。
通常的项目会按照如上的方式进行分离，但自己曾今做过的一个项目整个网站架构是按照模块进行分离的：
需求：设计一个网站，该网站的用途是根据用户需求生成网站，
例如一个企业展示网站，需要主页A，主页A包括布局（例如头部容器，导航容器，焦点图容器，然后之后再一个三列的容器，然后再页尾容器）。
每个容器中的模块都是根据用户需求加载，该页面A主要加载的模块：页头图片，水品导航、焦点图、最新新闻、最新产品、联系方式、页尾版权声明。
每个模块都有样式（例如颜色，背景图片，边距）；每个模块都有配置信息（例如最新产品模块是否显示产品描述）。
如果按照结构样式行为分离的方式设计，那么我必须将如上的七个模块的样式配置都提取成CSS文件，还有每个模块的渲染JS提取成一个JavaScript文件，这么操作真能提高开发效率以及维护效率么？
目前的实现是：
1. 最终的页面只有一个JS文件，无CSS和额外的JS文件。
2. 页面由布局（排版）和模块（功能）两个部分组成。
3. 服务端根据用户请求的页面，从数据库中读取JSON格式的页面布局配置，用户生成最终页面的布局。
4. 服务端根据用户请求的页面，输出关联的每个模块的HTML以及该模块对应的JS渲染脚本（JS渲染脚本包含了JSON格式的样式信息和其他配置信息）。
5. 输出页面。
最终页面的源码输出看起来类似如下：
------------------------------------------------
通用JS封装
模块1HTML
模块2HTML
模块3HTML
模块1脚本
模块2脚本
模块3脚本
------------------------------------------------
对于服务端，实际上是实现了：插件（对应一个DLL）、插件模板（例如导航有水平导航，有垂直导航）、插件视图这样的架构（视图会从模板继承样式，例如一个水平导航可以有水平导航1，水平导航2）。
现在假设我的页面B也需要和页面A同样样式同样配置的导航，那么在服务端只需要：
1. 选择导航插件
2. 选择导航插件中的“水平导航”模板
3. 配置该模板的颜色、背景图片、动画效果等配置，标记为TPL1
4. 使用TPL1生成视图，标记为View1和View2
5. 在页面A的布局位置放入View1，在页面B的布局位置放入View2
6. 若今后需要同时修改A和B的背景图片，只需要修改TPL1的背景图片
7. 若今后需要只修改B的背景图片，只需要修改View2的背景图片
HTML标签的语义化
先确定HTML，确定语义的标签，再来选用合适的CSS。
使用Firefox的Web Developer插件来禁用CSS，看页面展现效果。
例如一个标题和内容的模块方案：
<标题>这里是标题内容<a href="#">更多</a></标题>
<段落>段落一的内容</段落>
<段落>段落二的内容</段落>
这里的“更多”事实上不应该属于标题标签中，调整后如下：
<div>
<标题>这里是标题内容</标题>
<a href="#">更多</a>
</div>
<段落>段落一的内容</段落>
<段落>段落二的内容</段落>
当页面内容标签无法满足设计需求时，才会适当添加DIV和SPAN等无语义的标签来辅助实现。
提高CSS质量
最常用的组织CSS的方式：base.css + common.css + page.css
基础类应该具备通用性和原子性，例如：
.f12{font-size:12px;}
.zoom{zoom:;}
用划线表示从属关系：例如".timeList-lastItem"从属于".timeList"样式。
用前缀表示开发人员：例如".xf-timeList-lastItem"、".jn-timeList-lastItme"。
多用组合，少用继承的原则：将类中不稳定的部分分离出来，单独设置成一个类，相对稳定的剩下的部分设置成另一个类，通过类的组合（多个class）实现最终样式。
CSS的权重计算：HTML标签的权重是1，class的权重是1,0，id的权重是1,0,0；例如"strong.demo"的权重是1,0+1=1,1；例如"#test.red"的权重是1,0,0+1,0=1,1,0。
CSS sprite：利用background-position来实现。
CSS Hack：
1. IE条件注释，也可以用于JS的Hack
<!--[if gt IE 6]>
<link type="text/css" href="test.css" rel="stylesheet" />
<![endif]-->
2. 选择符前缀
"*html"星号前缀只对IE6生效；
"*+html"星号加前缀只对IE7生效；
在向后兼容方面存在一些风险，不能保证以后的IE版本都不识别*html和*+html。
3. 样式属性前缀
"_width:60px;"只在IE6下生效；
"*width:60px;"在IE6和IE7下生效。
4. 超链接hover的兼容：
顺序：:link :visited :hover :active (lv ha)
display:inline-block
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta>
<style type="text/css">
body,ul,li{margin: 0px;padding: 0px;}
ul{list-style: none;}
li{display: inline-block;*display: inline;*zoom:1;}
ul li {border:solid 1px #eee;padding: 2px 20px;}
</style>
</head>
<body>
<div>
<ul><li>标题1</li><li>标题2</li><li>标题3</li></ul>
</div>
</body>
</html>
position:absolute和float会隐式地改变display类型，不论之前设置了什么类型，都会让元素以display:inline-block的方式显示，就算显示设置display:inline或者display:block也无效。
IE6下的float双边距BUG就可以通过设置display:inline来解决。
水平居中的问题
给父元素设置text-align:center可以实现文本、图片等行内元素的水品居中。
确定宽度的块级元素可以通过设置margin-left:auto和margin-right:auto来实现。
不确定宽度的块级元素实现水平居中：
1. 可以通过将需要水平居中的块级元素放入table标签实现（不设置table标签的宽度，仅设置margin-left:auto和margin-right:auto就可以实现水平居中），缺点是增加了无语义的标签。
2. 改变块级元素的display为inline类型，然后使用text-align:center实现居中，缺点是块级元素变成行内元素后，无法设置长宽值等。
3. 通过给父元素设置float并设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中，缺点是设置了position:relative，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta>
<style type="text/css">
body,ul,li{margin: 0px;padding: 0px;}
.ccenter{position: relative;float: left;left: 50%;}
.ccenter-in{position: relative;left: -50%;}
.show{border:solid 1px #eee;margin: 10px;padding:10px;}
</style>
</head>
<body>
<div class="ccenter">
<div class="ccenter-in show">这里的内容想要水平居中显示</div>
</div>
</body>
</html>
垂直居中的问题
父元素高度确定的单行文本的垂直居中可以通过设置line-height来实现。
CSS中有一个vertical-align属性只有在父元素为td或者th的时候才生效，在现代浏览器下（IE8+）可以设置块级元素的display类型为table-cell来激活vertical-align属性，但IE67下并不支持；
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8"></meta>
<style type="text/css">
body,ul,li{margin: 0px;padding: 0px;}
.ccenter{height: 200px;display: table-cell;vertical-align: middle;*position: relative;}
.fixie67vmiddle{*position: absolute;*top: 50%;}
.fixie67vmiddle-in{*position: relative;*top:-50%;}
.show{border:solid 1px #eee;margin: 10px;padding:10px;}
</style>
</head>
<body>
<div class="ccenter hcenter">
<div class="fixie67vmiddle">
<div class="ccenter-in hcenter-c show">这里的内容想要垂直居中显示</div>
</div>
</div>
</body>
</html>
另外想要实现块元素居中，还可以通过更简单的方式：
.vhcenter{
width: 400px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%; left: 50%;
margin-left: -210px; /* (width + padding)/2 */
margin-top: -120px; /* (height + padding)/2 */
}
使用子选择器应对复杂变化
.content-lr-7025 .main{float:left;width:70%;}
.content-lr-7025 .sidebar{float:right;width:25%;}
.content-rl-7025 .main{float:right;width:70%;}
.content-rl-7025 .sidebar{float:left;width:25%;}
z-index相关问题以及Flash和IE6下的select元素
z轴在设置position:relative或absolute后被激活，z-index值越大越靠上。
z-index设置为负数可能会遇到些麻烦，例如当位于body之下时，可能事件会被透明的body挡住。
负边距引起的相邻元素位置重叠，取决于HTML标签出现的先后顺序，后出现的标签浮于先出现的标签之上。
Flash嵌入网页时有个wmode属性，可以设置为opaque和transparent来防止Flash始终浮于最上方。
select表单元素在IE6下会浮于绝对定位的元素之上，可以使用一个和绝对定位元素同样大小的firame元素，通过z-index放置在绝对定位元素之下，select元素之上来定位。
PNG图片的IE6透明问题
参考P130页。
通过滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png_file',sizingMethod='crop')实现。
提高 JavaScript质量
匿名函数控制作用域。
定义命名空间。
统一入口。
JavaScript分层。
封装浏览器差异。
弹性编程，可扩展：组件通过class来标识，并通过实现getElementsByClassName来获取一组功能相近的标签。
可复用：组件指定根节点，保持每个组件之间的独立性。
通过传参实现定制。
this的指向
<a href="#" onclick="alert(this.tagName)">test1</a>
<a href="#" onclick="javascript:alert(this.tagName)">test2</a>
如上的test1显示的是A，但test2显示的是undefined。
同样的setTimeout和setInterval也会改变this指向，传递的相当于函数指针，this就变成window作用域了：
var test="hello";
var o={
test:'o',
go:function(){
alert(this.test);
}
};
o.go(); // o
setTimeout(o.go,1000); // hello
setInterval(o.go,2000); // hello
可以通过匿名函数来调整this指向，另外还可以通过call和apply来调整this指向。
自定义标签属性
JavaScript和HTML标签之间存在映射关系，HTML标签在JavaScript中作为DOM节点对象存在。
对于常规属性，通过使用n.xxx的方式读取，对于自定义属性，统一使用n.getAttribute方法读取。
自定义属性可以通过info=eval("("+info+")");来反序列化。
协作
1. 公共组件一人维护，各个子频道专人负责；
2. 视觉设计师完成设计后，和交互设计师沟通，确定设计可行性；然后先将设计图给公共组件维护者，看是否需要提取公共组件，然后再提交给相应频道的前端工程师，如果有公共组件要提取，公共组件维护者需要对频道前端工程师说明。
3. 如果没有公共组件提取，交互设计师直接和各栏目前端工程师交流，对照视觉设计师的设计图进行需求说明，前端工程师完成需求。
4. 前端工程师在制作设计时，先去common文件中查询是否已经存在设计图中的组件，如果有，直接调用，如果没有，则在自己频道的文件中添加对应的代码。
5. 前端工程师在制作过程中，发现有高度重用的组件，却未加入到公共组件中，则向公共组件维护人说明，然后由公共组件维护人决定是否添加该组件。
6. 公共组件维护者的公共组件说明文档，需要提供配套的图片和说明文字，方便阅读。
《编写高质量代码——Web前端开发修炼之道》读后随笔的更多相关文章
- 编写高质量代码:Web前端开发修炼之道（一）
最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道 ...
- 编写高质量代码:Web前端开发修炼之道（四）
这一节是继上一节高质量的Javascript 7)编程实用技巧 1:弹性 从 一个标签区和内容区的实例(就是点击不同的标签菜单显示不同的内容块)来说明不需要每个tabmenu都设置onclick事件, ...
- 编写高质量代码:Web前端开发修炼之道（三）
第五章:高质量的Javascript 这章的内容我看的最久,这是跟我js基础没打好有着莫大的关系,但是还是耐着性子看完了, 不懂的东西都是百度上搜索,理解后再继续.下面是记录下来的笔记. 1)如何避免 ...
- 编写高质量代码:Web前端开发修炼之道（二）
第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...
- 读《编写高质量代码-Web前端开发修炼之道》笔记
第一章 1.Web标准由一系列标准组合而成,核心理念是将网页的结构,样式和行为分离,所以分为三大部分:结构标准,样式标准和行为标准.结构标准包括XML标准,XHTML标准,HTML标准:样式标准指CS ...
- 【读书笔记】读《编写高质量代码—Web前端开发修炼之道》 - JavaScript原型继承与面向对象
JavaScript是基于原型的语言,通过new实例化出来的对象,其属性和行为来自于两部分,一部分来自于构造函数,另一部分是来自于原型.构造函数中定义的属性和行为的优先级比原型中定义的属性和优先级高, ...
- [已读]编写高质量代码--Web前端开发修炼之道
我觉得还蛮实用的一本,推荐看看,主要涉及到这些: 标签语义化.css模块化. css的一些东西,比如haslayout 文档流,还有如何实现水平.垂直居中. js代码组织与js分层.js压缩 编码规范 ...
- 通用base.css —— 《编写高质量代码 web前端开发修炼之道》
@charset "utf-8"; /*CSS reset*/ html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol, ...
- 『编写高质量代码Web前端开发修炼手册』读书笔记--高质量的CSS
1.怪异模式和DTD 标准模式:浏览器根据规范表现页面 怪异模式:模拟老浏览器行为防止老站点无法工作(为了兼容老式浏览器的代码),如果漏写DTD(Document Type Definition文档定 ...
随机推荐
- Asp.Net MVC安全更新MS14-059导致项目编译失败
微软最近一次安全更新MS14-059(链接:https://technet.microsoft.com/en-us/library/security/ms14-059)由于直接应用到了machine. ...
- jquery 操作 checkbox
对checkbox的其他几个操作 1. 全选2. 取消全选3. 选中所有奇数4. 反选5. 获得选中的所有值 js代码 $("document").ready(function() ...
- Linux 自动更新时间
1. 从NTP上把时间同步到本地 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 2. 更新本地时间 ntpdate us.pool.ntp.o ...
- angularjs 利用filter进行表单查询及分页查询
页面: <div> <input style="width:90%;margin-left:5px;margin-right:5px;" class=" ...
- KAFKA分布式消息系统[转]
KAFKA分布式消息系统 转自:http://blog.chinaunix.net/uid-20196318-id-2420884.html Kafka[1]是linkedin用于日志处理的分布式消 ...
- 静态方法块 static 以及对象属性&类属性的用法
使用静态块的好处:只要在类被加载时,static块就会被调用,整个过程就调用这么一次,不会在后面的对象处又不断的调用.如果不使用它,就会出现如下问题:new一个对象,我就要调用一次所需的这些内容,重复 ...
- Android 新版NDK环境搭建(免Cygwin）
使用最新ndk,直接抛弃cygwin,以前做Android的项目要用到NDK就必须要下载NDK,下载安装Cygwin(模拟Linux环境用的),下载CDT(Eclipse C/C++开发插件),还要配 ...
- print 函数的进一步理解
没有括号的时候,pritn是列表操作符,会把其后列表里所有东西都数出来. 但是假如print后面紧跟着左括号,它就是一个函数调用,只会将括号内的东西输出来. “假如它看起来像函数调用,它就是一个函数调 ...
- Spring(一)简述（转载）
原文出自:http://www.cnblogs.com/liunanjava/p/4396794.html 一.Spring简述 Spring是一个开源框架,Spring是于2003 年兴起的一个轻量 ...
- 动态改变数据库连接 in Entity Framework 5
今天把silverlight 升级到5,ADO.ENT EF也用NUGet升级到5.结果发现5下的EF默认没有4的那种分部方法了. 当然你可以把生成器的属性里面,生成代码的属性替换为default,默 ...