一、网站重构:
1.Web标准:结构、样式和行为分离
二、高质量的HTML:
1.语义化标签
2.尽可能减少无语义标签span和div
3.在语义不明显,既可以用p也可以用div的地方,尽量用p,因为p默认情况下有上下间距,去样式后的可读性更好
4.不要使用纯样式标签,例如b、font等
5.标签名、属性名全部小写,属性前加引号,单标签需闭合
三、高质量的CSS:
1.CSS的分层
①:base.css:base层是高度重用的基础层,提供CSS reset功能和粒度最小的通用类——原子类。
②:common.css:提供组件级CSS。将页面内的元素拆分成一小块一小块功能和样式相对独立的小“模块”,将重复的模块提取出来
③:page.css:网站非高度重用的模块可以提取出来放在page层,page层提供页面级的样式,每个页面都有自己的page层CSS
2.多用组合,少用继承
3.低权重原则——避免滥用子选择器
4.CSS sprite
5.CSS hack:①IE条件注释; ②样式属性前缀法
6.尽量使用class,少用id
7.haslayout
8.display:inline-block
9.水平居中和垂直居中
四、高质量的JavaScript
1.团队合作——如何避免JS冲突:和里使用命名空间以及为代码添加必要的注释
var GLOBAL = {};
GLOBAL.namespace = function(str) {
var arr = str.split("."), o = GLOBAL;
for (i = (arr[0] == "GLOBAL") ? 1 : 0; i < arr.length; i++) {
o[arr[i]] = o[arr[i]] || {};
o = o[arr[i]];
}
}
// 为A程序员提供一个命名空间,GLOBAL.A
GLOBAL.namespace("A");
2.给程序一个统一的入口——window.onload和DOMReady
3.CSS放在页头,JavaScript放在页尾
4.文件压缩:减小网页的大小,缩短网页的下载时间:Packer:http://dean.edwards.name/packer/ 和YUI Compressor
5.JavaScript分层概念:
①:base层:职责一是封装不同浏览器下JavaScript的差异,提供统一的接口,实现跨浏览器兼容的工作;职责二扩展JavaScript语言底层提供的接口,让它提供更多更为易用的接口
②:common层:common层提供可供重用的组件,例如cookie,原生JavaScript对设置和读取的cookie方法显得非常的笨拙
③:page层:和页面具体功能需求直接相关,完成 相关页面的功能,依赖于base层和common层
6.JavaScript库