编写高质量代码——Web前端开发修炼之道 阅读笔记

目录

 

一、从网站重构说起

二、团队合作

三、高质量的HTML

         四、高质量的CSS

1、模块化CSS——在CSS中引入面向对象编程思想

2、低权重原则——避免滥用子选择器

3、css sprite

4、css的常见问题

五、高质量的JavaScript

1、养成良好的编程习惯

         2、JavaScript的分层概念和JavaScript库

3、编程实用技巧

4、面向对象编程


一、从网站重构说起

二、团队合作

三、高质量的HTML

语义化

四、高质量的CSS

base common page

base.css

/*CSS reset*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}

/*文字排版*/
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.unl{text-decoration:underlline;}
.no_unl{text-decoration:none;}

/*定位*/
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.bc{margin-left:auto;margin-right:auto;}/*块级元素水平居中(前提是块级元素有设置宽度)*/
.fl{float:left;display:inline;}/*消除ie6浮动产生的双边距*/
.fr{float:right;display:inline;}/*消除ie6浮动产生的双边距*/
.cb{clear:both;}/*清除浮动*/
.cl{clear:left;}/*清除左浮动*/
.cr{clear:rigth;}/*清除右浮动*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.dc{margin: 0px auto;}
.vm{verticle-align:middle;}
.ohidden{overflow:hidden;}
.pr{position:relative;}
.pa{position:absolute;}
.abs-right{position:absolute;right:0}
.zoom{zoom:1;}/*触发IE浏览器的haslayout。解决ie下的浮动,margin重叠等一些问题*/
.hidden{visiility:hidden;}
.none{display:none;}

/*长度高度*/
.w10{width:10px;}
.w20{width:20px;}
.w30{width:30px;}
.w40{width:40px;}
.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w200{width:200px;}
.w300{width:300px;}
.w400{width:400px;}
.w500{width:500px;}
.w550{width:550px;}
.w600{width:600px;}
.w700{width:700px;}
.w800{width:800px;}
.w1100{width: 1100px;}
.w{width:100%}
.h50{height:50px;}
.h80{height:80px;}
.h100{height:100px;}
.h200{height:200px;}
.h{height:100%}

/*边距*/
.m10{margin:10px;}
.m15{margin:15px;}
.m30{margin:30px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mt100{margin-top:100px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.mb100{margin-bottom:100px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml50{margin-left:50px;}
.ml100{margin-left:100px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr50{margin-right:50px;}
.mr100{margin-right:100px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt50{padding-top:50px;}
.pt100{padding-top:100px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb50{padding-bottom:50px;}
.pb100{padding-bottom:100px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl50{padding-left:50px;}
.pl100{padding-left:100px;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr50{padding-right:50px;}
.pr100{padding-right:100px;}

 

1、模块化CSS——在CSS中引入面向对象编程思想

如何划分模块——单一的职责

提取相同的部分作为组件


CSS的命名——命名空间的概念

驼峰命名法用于区别不同的单词,划线用于表明从属关系

.timeList-lastItem

不加前缀的base层与common层:公共属性

加前缀的page层:私有属性


挂多个class,还是新建class——多用组合,少用继承

一个有多种样式的元素用多个class来表示


如何处理上下margin

相邻的margin-top和margin-bottom会重合

 


2、低权重原则——避免滥用子选择器

HTML 权重:1

class 权重:10

id权重:100


3、css sprite

css精灵 图片翻转技术

background-position

缺点:降低开发效率,增大维护难度

优点:减少HTTP请求数,减轻服务器压力

对于流量不大的网站,css sprite的好处不明显


4、css的常见问题

编码风格:

一行式:减小文件大小(推荐使用)

多行式:可读性

 

问题1:css hack

1、IE条件注释法

 

ie


 

ie6



Ite 小于等于

It 小于

gte 大于等于

gt 大于

! 不等于

 

2、选择符前缀法

*html:ie6

*+html:ie7

3、样式属性前缀法

*width:ie6,ie7

_width:ie7


问题2:a 标签被点击后,hover样式不出现

解决:先写visited,再写hover

love hate原则:

l(link)ov(visited)e h(hover)a(active)te


问题3:hasLayout

hasLayout:ie浏览器专有属性

手动触发hasLayout就可以解决一些奇怪的bug

解决:

zoom:1; 没有副作用,多数情况使用

position:relative; 有副作用,少数情况使用


问题4:块级元素和行内元素

display:none;block,inline:ie6,ie7支持

块级元素:可以设置宽度,margin,padding,设了宽度后仍然是占一行

行内元素:margin,padding的水平间距正常,竖直方向异常

display:inline-block:长宽,margin,padding,不是单独一行,IE6和IE7不支持


如何在IE6和IE7上实现display:inline-block?

实现:

只能用行内元素

span{display:inline-block;*verticle-aligin:-10px}

原理:

display:inline-block令span触发了hack,用zoom:1也有同样的效果

img标签和button标签都具有display:inline-block的属性

 


问题5:relative,absolute和float

答案:

文档流:元素根据自己的display类型,长宽,内外边距等属性排列在z-index:0这一层里,这就是文档流。

设置了position:relative或者position:absolute,可以让元素激活left,top,right,bottom和z-index属性,改变文档流。

position:relative:

保留自己在 z-index层的占位,left,top,right,bottom值是相对于自己在z-index层的位置,对于其他在z-index层的元素没有影响。

position:absolute:

完全脱离文档流,不再在z-index中保留占位符,其left,top,right,bottom值是相对于自己最近的一个设置了position:relative或者position:absolute的祖先元素

float:left,right,在同层左右浮动,改变正常的文档流排列,影响其他元素。

 

设置了position:absolute和float的元素,其display值为inline-block

 


问题6:居中

1、水平居中

(1)文本图片等 行内元素水平居中:text-align:center

(2)确定宽度的块级元素水平居中:width:200px;margin-left:auto;margin-right:auto

(3)不确定宽度的块级元素水平居中

方法一:

借助table标签,table标签会根据内容自带宽度

table{margin-left:auto;margin-right:auto}

缺点:增加了无语义标签,加深了标签的嵌套层数

方法二:

将其变成行内元素

li{display:inline}

缺点:行内元素不能设置宽高等

方法三:

父元素{position:relative;left:50%}

子元素{position:relative;left:-50%}

缺点:引入position:relative有副作用

2、竖直居中

(1)父元素高度不确定的文本、图片、块级元素

通过给父元素设置相同的上下边距实现的

(2)父元素高度确定的单行文本的竖直居中

height:100px;

line-height:100px;

(3)vertical-align

a、当父元素为th或者td,这个属性才会生效,td标签隐式设置了vertical-align:middle

b、火狐和ie8可以设置 display:table-cell,vertical-align:middle来实现竖直居中

方法一 用表格标签

方法二 对于火狐和ie8用display:table-cell,vertical-align:middle来实现竖直居中

对于ie6,7用hack,通过给父子两层元素分别设置top 50%和top -50%来实现居中

 

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
*{margin:0;padding:0;} 
.mb{margin-bottom:10px;} 
.wrapper{background:black;width:500px;color:white;height:100px;margin-bottom:10px;display:table-cell;vertical-align:middle;*position:relative;} 
.demo{width:200px;background:red;height:50px;} 
.vam{*position:absolute;*top:50%;} 
.va{*position:relative;*top:-50%;} 
</style> 
</head> 
<body> 
<div class="mb10"> 
<div class="wrapper"> 
<div class="vam"> 
<div class="va"> 
hellow world<br/> 
hellow world<br/> 
hellow world 
</div> 
</div> 
</div> 
</div> 
<div class="mb10"> 
<div class="wrapper"> 
<div class="vam"> 
<img src="cat.jpg" alt=""/> 
</div> 
</div> 
</div> 
<div class="mb10"> 
<div class="wrapper"> 
<div class="vam"> 
<div class="va demo"></div> 
</div> 
</div> 
</div> 
</body> 
</html> 

 


问题7:网格布局

 


问题8:z-index的相关问题以及flash和IE6下的select元素

a 、z-index 在设置position属性后被激活

b、负边距也可以引起竖直重叠 margin-top:-50px

c、flash的womde(用来指定窗口模式),有window(窗口,默认),opaque(非窗口不透明),transparent(非窗口不透明)三种。

window的值,其优先级高于非窗口类型的元素

select在ie6中也是以窗口的形式展示的,ie6的bug,可以用iframe解决

 


问题9:插入png图片

背景透明的png格式的图片在ie6中会显示淡蓝色

可以用滤镜解决


问题10:多版本IE并存方案——CSS的调试利器

 

 


 

五、高质量的JavaScript

1、养成良好的编程习惯

(1)团队合作 如何避免js冲突

a、用匿名函数将脚本包起来,可以有效控制全局变量,避免冲突隐患

<script type="text/JavaScript">
    (function() { 
        var a=123,b="456"; 
        GLOBAL.namespace("A.CAT"); 
        GLOBAL.namespace("A.DOG"); 
        console.log("GLOBAL",GLOBAL); 
        })()

</script>

b、使用命名空间解决冲突

(2)给程序一个统一的入口——window.onload和DOMReady

<script type="text/JavaScript">
    function init(){ alert("999") }; window.onload=init;
</script>

a、window.onload:(js原生)网页内所有元素加载完毕后再执行,包括图片、flash等富媒体

b、DOMReady:(js框架)DOM节点加载完毕就可以了,DOM节点的内容不必加载完毕,速度更快

jq:

$(document).ready(init)

YUI:

YAHOO.util.event.onDOMReady(init)

原生模拟

在</body>之前调用它

(3)CSS放在页头,JavaScript放在页尾

(4)引入编译的概念,文件压缩

压缩工具:Packer(压缩JS),YUI compressor(压缩JS和CSS)

head.js ->head-min.js

 

2、JavaScript的分层概念和JavaScript库

(1)JavaScript如何分层

base层,common层,page层


base 层:

A:封装不同浏览器下JavaScript差异,提供统一的接口

a、透明度、

b、event对象、

c、冒泡、

ie:

e.cancelBubble=true;

火狐:

e.stopPropagation();

d、on,attachEvent,addEventListener

  onclick:覆盖

 var demo=document.getElementById("demo");
	demo.onclick=function(){
	 alert(1)
	}
	demo.onclick=function(){
	 alert(2)
	}

attachEvent,addEventListener:叠加

attachEvent:ie特有,后绑定先执行

addEventListener:w3c标准,先绑定先执行

obj = document.getElementById("testdiv");
obj.attachEvent('onclick',function(){{alert('1');});
obj.attachEvent('onclick',function(){{alert('2');});
obj.attachEvent('onclick',function(){{alert('3');});
//执行顺序是alert(3),alert(2),alert(1);
obj = document.getElementById("testdiv");
obj.addEventListener('click',function(){{alert('1');},false);
obj.addEventListener('click',function(){{alert('2');},false);
obj.addEventListener('click',function(){{alert('3');},false);
//点击obj对象时,执行顺序为alert('1'),alert('2'),alert('3');

B、扩展JavaScript语言底层的接口

常用的方法:

a、trim()

去除字符串首尾的空白字符

function trim(ostr){
		  return ostr.replace(/^\s+|\s+$/g,"");
		}
		var str="   99  ";
		alert(trim(str))

b、

function isNumber(s){
 return !isNaN(s);
}

function isString(s){
 return typeof s === "string";
}

function isBoolean(s){
 return typeof s === "boolean";
}

function isFunction(s){
 return typeof s === "function";
}

function isNull(s){
 return s===null;
}

function isUndefined(s){
 return typeof s === "undefined";
}

function isEmpty(s){
 return /^\s*$/.test(s)
}

function isArray(s){
 return s instanceof Array;
}

 

3、编程实用技巧

4、面向对象编程

 

kindle高清文字版,可在电脑上用clearview电子书阅读软件阅读。 第1章 从网站重构说起 1.1 糟糕的页面实现,头疼的维护工作 1.2 Web标准——结构、样式和行为的分离 1.3 前端的现状 1.4 打造高品质的前端代码,提高代码的可维护性——精简、重用、有序 第2章 团队合作 2.1 揭秘前端开发工程师 2.2 欲精一行,必先通十行 2.3 增加代码可读性——注释 2.4 提高重用性——公共组件和私有组件的维护 2.5 冗余和精简的矛盾——选择集中还是选择分散 2.6 磨刀不误砍柴工——前期的构思很重要 2.7 制订规范 2.8 团队合作的最大难度不是技术,是人 第3章 高质量HTML 3.1 标签的语义 3.2 为什么要使用语义化标签 3.3 如何确定你的标签是否语义良好 3.4 常见模块你真的很了解吗 3.4.1 标题和内容 3.4.2 表单 3.4.3 表格 3.4.4 语义化标签应注意的一些其他问题 第4章 高质量的CSS 4.1 怪异模式和DTD 4.2 如何组织CSS 4.3 推荐的base.css 4.4 模块化CSS——在CSS中引入面向对象编程思想 4.4.1 如何划分模块——单一职责 4.4.2 CSS的命名——命名空间的概念 4.4.3 挂多个class还是新建class——多用组合,少用继承 4.4.4 如何处理上下margin 4.5 低权重原则——避免滥用子选择器 4.6 CSS sprite 4.7 CSS的常见问题 4.7.1 CSS的编码风格 4.7.2 id和class 4.7.3 CSS hack 4.7.4 解决超链接访问后hover样式不出现的问题 4.7.5 hasLayout 4.7.6 块级元素和行内元素的区别 4.7.7 display:inline-block和hasLayout 4.7.8 relative、absolute和float 4.7.9 居中 4.7.10 网格布局 4.7.11 z-index的相关问题以及Flash和IE 6下的select元素 4.7.12 插入png图片 4.7.13 多版本IE并存方案——CSS的调试利器IETester 第5章 高质量的JavaScript 5.1 养成良好的编程习惯 5.1.1 团队合作——如何避免JS冲突 5.1.2 给程序一个统一的入口——window.onload和DOMReady 5.1.3 CSS放在页头,JavaScript放在页尾 5.1.4 引入编译的概念——文件压缩 5.2 JavaScript的分层概念和JavaScript库 5.2.1 JavaScript如何分层 5.2.2 base层 5.2.3 common层 5.2.4 page层 5.2.5 JavaScript库 5.3 编程实用技巧 5.3.1 弹性 5.3.2 getElementById、getElementsByTagName和getElements-ByClassName 5.3.3 可复用性 5.3.4 避免产生副作用 5.3.5 通过传参实现定制 5.3.6 控制this关键字的指向 5.3.7 预留回调接口 5.3.8 编程中的DRY规则 5.3.9 用hash对象传参 5.4 面向对象编程 5.4.1 面向过程编程和面向对象编程 5.4.2 JavaScript的面向对象编程 5.4.3 用面向对象方式重写代码 5.5 其他问题 5.5.1 prototype和内置类 5.5.2 标签的自定义属性 5.5.3 标签的内联事件和event对象 5.5.4 利用事件冒泡机制 5.5.5 改变DOM样式的三种方式 附录A 写在规则前面的话 附录B 命名规则 附录C 分工安排 附录D 注释规则 附录E HTML规范 附录F CSS规范 附录G JavaScript规范
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值