JQuery使用總結

半葉森發表於2017-08-21
jQuery

目前接觸最多的頁面開發，基本還是使用 JQuery 的。主要原因基於：操作方便；頁面簡單；相容良好；新手多……沒有能配合使用其他方案的人。因此，本篇文章就是寫著玩加吐點槽的。

Write Less，Do More是JQuery的核心理念。所以你們就不要在工作中隨意造輪子了！

一、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 () {
  // 1、校驗，或其他方法獲取引數
  var params = {}
  // 2、自定義beforeSend
  // 3、請求資料
  var p = reqAjax(params);
  // 4、自定義success方法
  p.done(function (data) {});
  // 5、自定義error方法，一般屬於超時或網路不正常
  p.fail(function (err) {});
  // 以上執行成功之後可鏈式呼叫下一步操作
  p.then(function () {});
}

如果想單獨使用Ajax，一般來說推薦兩個方案：Zepto.js 和 自己去 github 搜尋

二、模板

根據設計的不同，有時需要重複新增一些元素。除了基本的模板外掛外，還可以充分使用 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好惡心。

三、事件

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

如：不要在 $(document).ready() 中初始化所有亂七八糟的方法，很難找的……

對於新新增的元素，新增點選（或其他）事件，可以使用

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

或

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

四、動效

作為前端，不要光想著js，好歹也學學 animate.css

PC端使用動效是沒問題的，但移動端網頁，如slideUp、animate之類，最好用css樣式代替，不然會有卡頓效果。

……移動端為什麼還用jquery？jquery 壓縮版一般在80~90 kb，對如今的網路是可以接受的，當然最好用 zepto.js 代替。

請在完成任務之後再考慮優化……

五、No JQuery

不要把不熟悉的東西帶到工作中，除非沒有更好的替代方案

若不想使用JQuery，且不考慮相容性，可參考：You-Dont-Need-jQuery

雜項

如果有空，記得重構程式碼~

本來想寫點具有實用性的東西，但Jquery的特性網上已經有很多了，因此不再贅述，能給新人一點提示就行。

相關文章