前端开发的一些实践规范|博客系列 | 前端进阶之旅

# 一、HTML实践

使用标准的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

`# 一、HTML实践`




使用标准的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