转载

前端开发的一些实践规范

使用标准的 HTML5 简化的定义的方式
- 定义文档类型 <!DOCTYPE html>
- 定义页面的编码 <meata charset="UTF-8">
- 样式和页脚的引用，不需要写 type 类型，如 link script
停止使用不标准的标签和属性，如 mqrquee
不推荐在 HTML 标签中添加样式属性，如 img 标签中添加宽高
不要使用 @import ，此方式最大的缺点是引用 css 文件不能同时并行下载
增加 JavaScript 禁用的提示信息，最常用的方式是使用 <noscript>
添加必要的 meta 标签
使用频率较高的语义化标签
- p ul dl p em strong table site blockquote
- nav header footer article section aside hground
样式和结构的分离：把 HTML 中用于表达外观的部分从HTML中删除，并用css实现。如 <span>|</span> 中的 | 用css的伪类实现即可
如果图片作为页面内容的一部分，应该使用 img 标签，如果图片仅仅是装饰作用，应该使用背景图片方式
提高表单易用性的手段
- 使用 label 标签，并设置 label 标签的 for 属性
- 给输入控件设置合理的 placehoder
- 如有必要，给输入控件设置 tab 顺序， tabindex 用来设置输入控件的切换顺序 <input type="text" tabindex="2">
- 使用 HTML5 中引入的表单控件 url email date search
- 精简 HTML 代码
- 删除多余的容器
- 装饰性的元素使用 css 实现
- 避免使用 table 布局

二、CSS实践

推荐的 css 类的命名规则和元素的 id 命名规则相似，只是组成类名的关键字的连接符为中划线 - .reder-content-title
- 为了避免 class 命名的重复，命名时取父元素的 class 作为前缀
使用 css reset 统一浏览器的显示效果
给 css 样式定义排序，最佳是按类型分组排序
- 显示与浮动、定位、尺寸、边框相关属性、字体样式、背景、其他样式
合理利用 css 的权重，提高代码的重用性
- css 样式中尽量不要使用 ID 选择器，最佳实践尽可能使用较低权重的选择器作为基础样式
- 减少自选择器的层级
- 使用组合的 css 选择器
- em px %
  - w3c 把尺寸单位分为相对长度单位和绝对长度单位两种。
  - 相对长度单位又分为字体相对单位和视窗相对单位
    - 字体相对单位包括： em ex ch rem
    - 视窗相对单位包括： vw vh vmin vmax
    - 使用最广泛的是 em px 百分比
  - em 计算是相对自身元素的字体尺寸的， rem 相对于根元素的字体大小计算，百分比是相对于父元素的尺寸的
  - 如何设置元素的尺寸和字体大小最佳实践
    - 尽量设置相对尺寸（局部的尺寸要尽量使用相对尺寸，即局部自适应）
    - 只有在可预知元素尺寸的情况下才使用绝对尺寸
    - 使用 em 设置字体大小
- css 选择器定义最佳实践
  - 避免使用通配符
  - 避免使用标签选择器及单个属性选择器作为关键选择器
  - 不要在 id 选择器前使用标签名
  - 尽量不要使在选择符中定义过多的层级，最好不要超过三层
css 相关图片处理
- 不要设置图片尺寸
- 使用 css 雪碧图技术
- 减少 css 代码量
  - 定义简洁的 css 规则
  - 合并相关的 css 规则
  - 定义简洁的属性值合并相同的定义

三、JavaScript实践

避免定义全局变量或函数
- 使用 var
- 使用 JavaScript 的严格模式 use strict;
使用简化的编码方式
- 对象创建 pserson={age:22,name:"poetries"}
- 数组创建 list=[12,23,55]
使用 === 和 !== 而不是 == 和 !=
避免使用 with 语句和 eval()
使用更严格的编码格式
- 使用严格模式遵循：
  - 不要在全局中启用严格模式
  - 在已有代码中谨慎使用严格模式
- 严格模式主要对不合理的地方做了改进
  - 禁用 width 关键字
  - 防止意外的全局变量
  - 函数中的 this 不在默认指向全局
  - 防止函数参数重命名
  - 更安全的使用 eval()
- 事件处理和业务逻辑相分离
- 配置数据和代码逻辑相分离
- 逻辑与结构相似相分离
  - 从 JavaScript 逻辑中分离 css 样式
  - 从 JavaScript 中分离 HTML 结构
- JavaScript 模块化的开发，提高代码的可维护性
  - JavaScript 的两种模块化规范 ComonJS AMD
  - 两者的主要区别在加载模块的方式上
  - ComonJS 以同步的方式加载，使用 require() 方法来加载模块
  - AMD 以异步的方式加载模块
合理使用 Ajax 技术，适合的使用场景有
- 前端会根据用户的需求动态取得后端数据，然后更新网页界面
- 期望通过不刷新页面取得任何资源或页面
- 动态进行用户输入的认证

四、附录

附录一 DIV命名规范

企业 DIV 使用频率高的命名方法
网页内容类
- 标题: title
  - 摘要: summary
  - 箭头： arrow
  - 商标： label
  - 网站标志： logo
  - 转角/圆角： corner
  - 横幅广告： banner
  - 子菜单： subMenu
  - 搜索： search
  - 搜索框： searchBox
  - 登录： login
  - 登录条： loginbar
  - 工具条： toolbar
  - 下拉： drop
  - 标签页： tab
  - 当前的： current
  - 列表： list
  - 滚动： scroll
  - 服务： service
  - 提示信息： msg
  - 热点： hot
  - 新闻： news
  - 小技巧： tips
  - 下载： download
  - 栏目标题： title
  - 热点： hot
  - 加入： joinus
  - 注册： regsiter
  - 指南： guide
  - 友情链接： friendlink
  - 状态： status
  - 版权： copyright
  - 按钮： btn
  - 合作伙伴： partner
  - 投票： vote
  - 左右中： left right center
- 注释的写法: /* Footer */ 内容区 /* End Footer */
id的命名:
- 页面结构
  - 容器: container
  - 页头： header
  - 内容： content / container
  - 页面主体： main
  - 页尾： footer
  - 导航： nav
  - 侧栏： sidebar
  - 栏目： column
  - 页面外围控制整体布局宽度： wrapper
  - 左右中： left right center
- 导航
  - 导航： nav
  - 主导航： mainbav
  - 子导航： subnav
  - 顶导航： topnav
  - 边导航： sidebar
  - 左导航： leftsidebar
  - 右导航： rightsidebar
  - 菜单： menu
  - 子菜单： submenu
  - 标题: title
  - 摘要: summary
- 功能
  - 标志： logo
  - 广告： banner
  - 登陆： login
  - 登录条： loginbar
  - 注册： regsiter
  - 搜索： search
  - 功能区： shop
  - 标题： title
  - 加入： joinus
  - 状态： status
  - 按钮： btn
  - 滚动： scroll
  - 标签页： tab
  - 文章列表： list
  - 提示信息： msg
  - 当前的: current
  - 小技巧： tips
  - 图标: icon
  - 注释： note
  - 指南： guild
  - 服务： service
  - 热点： hot
  - 新闻： news
  - 下载： download
  - 投票： vote
  - 合作伙伴： partner
  - 友情链接： link
  - 版权： copyright
- class 的命名:
  - 颜色:使用颜色的名称或者16进制代码,如
    - .red { color: red; }
    - .f60 { color: #f60; }
    - .ff8600 { color: #ff8600; }
  - 字体大小,直接使用”font+字体大小”作为名称,如
    - .font12px { font-size: 12px; }
    - .font9px {font-size: 9pt; }
  - 对齐样式,使用对齐目标的英文名称,如
    - .left { float:left; }
    - .bottom { float:bottom; }
  - 标题栏样式,使用”类别+功能”的方式命名,如
    - .barnews { }
    - .barproduct { }
  - 注意事项::
    - 一律小写;
    - 尽量用英文;
    - 不加中杠和下划线;
    - 尽量不缩写，除非一看就明白的单词.
推荐的 CSS 书写顺序：
- 显示属性
  - display
  - list-style
  - position
  - float
  - clear
- 自身属性
  - width
  - height
  - margin
  - padding
  - border
  - background
- 文本属性
  - color
  - font
  - text-decoration
  - text-align
  - vertical-align
  - white-space
  - other text
  - content

附录二 CSS精灵

CSS精灵原理以及应用
- CSS 雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。
  - 该图片使用 CSS background和background-position 属性渲染，这也就意味着你的标签变得更加复杂了，图片是在 CSS 中定义，而非 <img> 标签。
一个简单的例子：
- 一张图片作出一个按钮的三个状态
- 一个链接用 CSS 做成按钮的样式，我们可以使用同一张图片，完成按钮的三个状态， a:link ， a:hover ， a:active <a class="button" href="#">链接</a>
- 加入右侧的图片为： 200px 65px 的三个按钮图拼合而成的图片 button.png ，从上到下一次为按钮的普通、鼠标滑过、鼠标点击的状态。则可以使用 CSS 进行定义。

a {
    display:block; 
    width:200px; 
    height:65px; 
    line-height:65px; /*定义状态*/
    text-indent:-2015px; /*隐藏文字*/
    background-image:url(button.png); /*定义背景图片*/
    background-position:0 0;
    /*定义链接的普通状态，此时图像显示的是顶上的部分*/
}

a:hover {
    background-position:0 -66px;
    /*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active {
    background-position:0 -132px;                      
    /*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}

更多的 CSS 雪碧，图片更复杂，背景定位更精确。可能会用到大量的数值
- 如： background:url(nav.png) -180px 24pxno-repeat ; 来达到更精确的定位
优点：
- 减少加载网页图片时对服务器的请求次数
- 可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。
- 提高页面的加载速度
- sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有自己的一个色表，这就增加了总体的大小。因此，单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
- 减少鼠标滑过的一些 bug
- IE6 不会主动预加载鼠标滑过即 a:hover 中的背景图片，所以，如果使用多张图片，鼠标滑过会出现闪白的现象。使用 CSS 雪碧，由于一张图片即可，所以不会出现这种现象。
不足：
- CSS 雪碧的最大问题是内存使用
- 影响浏览器的缩放功能
- 拼图维护比较麻烦
- 使 CSS 的编写变得困难
- CSS 雪碧调用的图片不能被打印
- 错误得使用 Sprites 影响可访问性

附录三一些tips解决方案

页面优化实践

从下面的几个方面可以进行页面的优化：
- 减少请求数
- 图片合并
- CSS 文件合并
- 减少内联样式
- 避免在 CSS 中使用 import
- 减少文件大小
- 选择适合的图片格式
- 图片压缩
- CSS 值缩写（ Shorthand Property )
- 文件压缩
- 页面性能
- 调整文件加载顺序
- 减少标签数量
- 调整选择器长度
- 尽量使用 CSS 制作显示表现
- 增强代码可读性与可维护性
- 规范化
- 语义化
- 模块化

写DIV+CSS 的一些常识

不要使用过小的图片做背景平铺
- 这就是为何很多人都不用 1px 的原因，这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域，需要 200200=40, 000 次，占用资源
无边框
- 推荐的写法是 border:none ;，哈哈，我一直在用这个。 border:0; 只是定义边框宽度为零，但边框样式、颜色还是会被浏览器解析，占用资源
慎用通配符
- 所谓通配符，就是将 CSS 中的所有标签均初始化，不管用的不用的，过时的先进的，一视同仁，这样，大大的占用资源。要有选择的初始化标签。
CSS 的十六进制颜色代码缩写
- 习惯了缩写及小写，这才知道，原来不是推荐的写法，为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣，有待仔细考证。
样式放头上，脚本放脚下。不内嵌，只外链
坚决不用 CSS 表达式
使用引用样式表，而不是通过 @import 导入。
一般来说， PNG 比 GIF 要小，小得多。再者， GIF 中有多少颜色是被浪费的，很值得优化。
千万不要在 HTML 中缩放图片，一者不好看，二者占资源。
正文字体最好用偶数
- 12px 、 14px 、 16px ，效果非常好。特例， 15px 。
block 、 ul 、 ol 等上下留出至少一倍行距，左侧至少两倍行距，右侧随意。
段落之间，至少要有一倍行距
强行指定某些元素的 line-height ，正文 1.6 倍于文字大小，标题 1.3 倍。
中文标点用全角
- 英文夹杂在中文中，左右空格，半角。
中文字体的粗体和斜体，远离较好
[建议] HTML 标签的使用应该遵循标签的语义
- 下面是常见标签语义
  - p - 段落
  - h1,h2,h3,h4,h5,h6 - 层级标题
  - strong,em - 强调
  - ins - 插入
  - del - 删除
  - abbr - 缩写
  - code - 代码标识
  - cite - 引述来源作品的标题
  - q - 引用
  - blockquote - 一段或长篇引用
  - ul - 无序列表
  - ol - 有序列表
  - dl,dt,dd - 定义列表

常用代码片段

雅虎工程师提供的 CSS 初始化示例代码【仅供参考】
- 可以在 html 头文件中直接引用，从而避免浏览器的不兼容带来的错误。

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; 
}
body {
    background:#fff; 
    color:#555; 
    font-size:14px; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
}
td,
th,
caption { 
    font-size:14px;
}
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-weight:normal; 
    font-size:100%; 
}

address, 
caption,
cite, 
code, 
dfn, 
em, 
strong,
th, 
var { 
    font-style:normal; 
    font-weight:normal;
}
a { 
    color:#555; 
    text-decoration:none; 
}
a:hover { 
    text-decoration:underline; 
}
img {
    border:none;
}
ol,ul,li { 
    list-style:none; 
}
input, 
textarea, 
select, 
button { 
    font:14px Verdana,Helvetica,Arial,sans-serif; 
}
table { 
    border-collapse:collapse; 
}
html {
    overflow-y: scroll;
} 
.clearfix:after {
    content: "."; 
    display: block; 
    height:0; 
    clear:both; 
    visibility: hidden;
}
.clearfix { 
    *zoom:1; 
}

现代浏览器 cssreset 解决方案【推荐使用这个】
- normalize.css
mobile meta 标签

<metaname=”viewport”content=”width=320,target-densitydpi=dpi_value,initial-scale=1,user-scalable=no”/>

表格不被撑开

table-layout: fixed; word-break: break-all;;border-collapse: collapse

不设宽高居中

<divid=”abc”style=”display:table;text-align:center;width:100%;height:100%;”>
      <spanstyle=”background:#f00;display:table-cell;vertical-align:middle;”>
            <inputtype=”button”value=”item1″/>
      </span>
</div>

透明度的兼容代码

filter:alpha(opacity=50); /*1-100*/
-moz-opacity:0.5; /*0-1.0*/
-khtml-opacity:0.5; /*0-1.0*/
opacity:0.5; /*0-1.0*/

文本溢出的几种处理方法
简单隐藏

div.hide{overflow:hidden}

使用滚动条

div.scroll{overflow:scroll}

简单裁切

div.clip{
	border:1px solid;
	overflow:hidden;/*超出隐藏*/
	white-space:nowrap;/*强制在一行显示*/
	text-overflow:clip;/*裁切*/
}

超出部分省略号

div.elli{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;/*使用省略号*/
}

清除浮动的几种方法
- 方法一： 投机取巧法 – 不推荐
  - 直接一个放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强
- 方法二： overflow + zoom 方法 –不推荐
  .fix{overflow:hidden; zoom:1;}
  - 此方法优点在于代码简洁，涵盖所有浏览器
- 方法三： after + zoom 方法 -推荐–此方法可以说是综合起来最好的方法了
  - clearfix 只应用在包含浮动子元素的父级元素上

.clearfix{zoom:1;}
.clearfix:after{
     display:block; 
     content:'clear'; 
     clear:both;
     line-height:0; 
     visibility:hidden;
}

方法四在方法三的基础上的最优雅的做法【推荐】

.clearfix:after,
.clearfix:before {/*before 是为了防止浏览器顶部空白的崩溃*/   
     content: " ";   
     display: table;
}
.clearfix:after {    
    clear: both;
}

清除浮动的原理是触发 BFC ，这里只有 clear:both 起清除浮动作用，其他的 line-height:0; visibility:hidden; 都是为了隐藏生的内容需要的