前端开发的一些实践规范
本帖最后由 断天涯大虾 于 2017-1-9 10:11 编辑一、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=
[*]使用 === 和 !== 而不是 == 和 !=
[*]避免使用 with 语句和 eval()
[*]使用更严格的编码格式
[*]使用严格模式遵循：
[*]不要在全局中启用严格模式
[*]在已有代码中谨慎使用严格模式
[*]严格模式主要对不合理的地方做了改进
[*]禁用 width 关键字
[*]防止意外的全局变量
[*]函数中的 this 不在默认指向全局
[*]防止函数参数重命名
[*]更安全的使用 eval()
[*]事件处理和业务逻辑相分离
[*]配置数据和代码逻辑相分离
[*]逻辑与结构相似相分离
[*]从 JavaScript 逻辑中分离 css 样式
[*]从 JavaScript 中分离 HTML 结构
[*]JavaScript 模块化的开发，提高代码的可维护性
[*]JavaScript 的两种模块化规范 ComonJS AMD
[*]两者的主要区别在加载模块的方式上
[*]ComonJS 以同步的方式加载，使用 require() 方法来加载模块
[*]AMD 以异步的方式加载模块
[*]合理使用 Ajax 技术，适合的使用场景有
[*]前端会根据用户的需求动态取得后端数据，然后更新网页界面
[*]期望通过不刷新页面取得任何资源或页面
[*]动态进行用户输入的认证
原文链接：http://blog.poetries.top/2016/11/23/前端开发一些实践/
页:
[1]