JQuery使用总结

目前接触最多的页面开发，基本仍是使用 JQuery 的。主要缘由基于：操做方便；页面简单；兼容良好；新手多……没有能配合使用其余方案的人。所以，本篇文章就是写着玩加吐点槽的。

Write Less，Do More是JQuery的核心理念。因此大家就不要在工做中随意造轮子了！

1、Ajax

绝对禁止同步请求！必定要处理全部可能的状况！

普通示例：

function getData(){
  var params= {}
  $.ajax({
    type: 'post',
    dataType: 'json',
    url: 'xxxxx',
    data: params,
    beforeSend: function(){},
    success: function(data){
       if(data.code != 1){
         // 失败方法
         return;
       } 
       // 成功方法
    },
    error: function(){},
    complete: function(){}
  });
}

大部分兼容要求不高，公司使用同一个接口，只是传参不一样，所以，共通的ajax请求方案为：

function reqAjax (params) {
  var deferred = $.Deferred();
  $.ajax({
    type: 'post',
    dataType: 'json',
    url: 'xxxx',
    data: params,
    success: function(data){
      deferred.resolve(data);
    },
    error: function(err){
      deferred.reject(err);
    }
  });
  return deferred;
}

主要使用了JQuery（>1.5）的 deferred 对象。请求示例：

function getData () {
  // 一、校验，或其余方法获取参数
  var params = {}
  // 二、自定义beforeSend
  // 三、请求数据
  var p = reqAjax(params);
  // 四、自定义success方法
  p.done(function (data) {});
  // 五、自定义error方法，通常属于超时或网络不正常
  p.fail(function (err) {});
  // 以上执行成功以后可链式调用下一步操做
  p.then(function () {});
}

若是想单独使用Ajax，通常来讲推荐两个方案：Zepto.js 和 本身去 github 搜索

2、模板

根据设计的不一样，有时须要重复添加一些元素。除了基本的模板插件外，还能够充分使用 JQuery 的 clone 方法

尽可能不要拼接字符串！

假设dom结构为：

<!--bootstrap样式，静态界面写完后，在test样式上加上隐藏样式hidden-->
<div class="test">
  <p>字段1：<span class="test1 text-info"></span></p>
  <p>字段2：<span class="test2 text-primary"></span></p>
  <p>字段3：<span class="test3 text-warning"></span></p>
</div>

接口请求成功，处理dom：

// 本身处理循环
function addList(arr){
  // 模拟请求过来的数据
  var data = {
    test1: Math.random().toFixed(5),
    test2: Math.random().toFixed(5),
    test3: Math.random().toFixed(5)
  }
  // 假设父级dom
  var pDom = $('.xxx');
  // 直接克隆已经写好且隐藏的模板，去掉hidden
  var dom = pDom.find('.test.hidden').clone().removeClass('hidden');
  // 取巧的方法，根据字段标识的名称取dom元素，而后赋值，通常来讲还须要进行其余的处理
  for(var key in data){
    dom.find('.'+key).text(data[key])
  }
  // 处理完毕，加入父级dom中
  pDom.append(dom);
}

主要是我不喜欢拼接字符串，懒得很，并且改别人的BUG好恶心。

3、事件

事件使用多看看教程就行，但如何使用得稍微琢磨一下

如：不要在 $(document).ready() 中初始化全部乱七八糟的方法，很难找的……

对于新添加的元素，添加点击（或其余）事件，可使用

$(parentDom).on('click', 'newDom', function(){});

或

$(newDom).live('click', function(){})

4、动效

做为前端，不要光想着js，好歹也学学 animate.css

PC端使用动效是没问题的，但移动端网页，如slideUp、animate之类，最好用css样式代替，否则会有卡顿效果。

……移动端为何还用jquery？jquery 压缩版通常在80~90 kb，对现在的网络是能够接受的，固然最好用 zepto.js 代替。

请在完成任务以后再考虑优化……

5、No JQuery

不要把不熟悉的东西带到工做中，除非没有更好的替代方案

若不想使用JQuery，且不考虑兼容性，可参考：You-Dont-Need-jQuery

杂项

若是有空，记得重构代码~

原本想写点具备实用性的东西，但Jquery的特性网上已经有不少了，所以再也不赘述，能给新人一点提示就行。