WEB前端开发最佳实践（3）

选择器注意

• 尽量不使用ID选择器
• 减少子选择器的层级（less和Sass的滥用）
• 使用组合CSS类选择器

兼容IE浏览器

• 兼容旧浏览器的代码，被称为hack代码
• 熟悉IE浏览器中常见的兼容样式
• 分离样式兼容代码

em，px，%

• px：相对尺寸，但由于同环境，又是绝对尺寸 em：应用元素上字体大小的两倍，%：相对于父元素的百分比
• 尽量设置相对尺寸
• 只有在可预知元素尺寸的情况下才使用绝对尺寸
• 使用em设置字体的大小

使用高效的CSS选择器

• 匹配原理：从右到左
• 避免使用通配符
• 避免使用标签和单个属性选择器作为关键选择器
• 不要再ID选择器前使用标签名
• CSScomb排序,CSS selectors Test 选择器性能测试网站

其他高性能实践

• 避免使用@imoport
• 避免使用IE浏览器独有的样式：图片滤镜和CSS表达式

浏览器的支持情况

• 在线工具：CSS3 Click Chart（提供兼容代码的实例），CSS content and browser compatibility
• 添加前缀：Prefix，AutoPrefix（sublime插件），借助SASS和LESS
• 不要过度添加前缀
• 添加CSS3标准属性定义,看html5please

高性能JS

• 避免定义全局变量和函数
• 把变量和方法封装在一个变量对象里，把全局变量包含在一个局部作用域里面
• 使用return语句，返回需要公开接口
  var mycurrent = (function(){
  var length = 0;
  function init(){..}
  return {
  init:init;
  }})
• 避免使用with语句，难以阅读，易造成BUG
• 避免使用eval
• 不要编写检测浏览器的代码
• 事件处理和业务逻辑代码分隔开
• 配置数据和代码逻辑分离，用配置数据代替写死的数据（JSON)
• 逻辑与结构样式分离
• JS分离HTML结构
  
  • 从服务器端动态获取HTML代码（AJAX)
  • 通过客户端动态生成页面结构（template标签）
  • JS模板：Mustache，Underscore，Handlebars，jade，ejs（Template-engine-chooser模板引擎）
  • 尽量不要在模板中滥用逻辑块
  • 不要构建太复杂的模板
  • 使用预编译模板
• 使用MVC格式：
  
  • Backbone,Angularjs,Ember,Knockout
• JS规范：
  
  • Commonjs：以同步的方式加载模块，使用在nodejs服务器端的环境中居多（使用require加载）
  • AMD：以异步方式加载模块，更多使用在有网络延迟存在的浏览器环境中（使用回调函数），在requirejs和curl中居多

合理使用AJAX

• 明确使用AJAX
  
  • 前端会根据用户需求动态取得后端数据，然后更新网页界面
  • 期望通过不刷新页面获取任何资源或页面
  • 动态进行用户输入的验证
  • 其他任何期望通过异步方式取得资源的情况
  • 缺陷：使用AJAX都是动态的，没有添加额外的处理，AJAX会破坏后退的按钮
• 使用JSON做为AJAX传输的数据格式