成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

JQuery使用總結(jié)

tomlingtm / 1576人閱讀

摘要：目前接觸最多的頁(yè)面開(kāi)發(fā)，基本還是使用的。主要原因基于操作方便頁(yè)面簡(jiǎn)單兼容良好新手多沒(méi)有能配合使用其他方案的人。，是的核心理念。

目前接觸最多的頁(yè)面開(kāi)發(fā)，基本還是使用 JQuery 的。主要原因基于：操作方便；頁(yè)面簡(jiǎn)單；兼容良好；新手多……沒(méi)有能配合使用其他方案的人。因此，本篇文章就是寫(xiě)著玩加吐點(diǎn)槽的。

Write Less，Do More是JQuery的核心理念。所以你們就不要在工作中隨意造輪子了！
一、Ajax 
絕對(duì)禁止同步請(qǐng)求！一定要處理所有可能的情況！

普通示例：

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(){}
  });
}

大部分兼容要求不高，公司使用同一個(gè)接口，只是傳參不同，因此，共通的ajax請(qǐng)求方案為：

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 對(duì)象。請(qǐng)求示例：

function getData () {
  // 1、校驗(yàn)，或其他方法獲取參數(shù)
  var params = {}
  // 2、自定義beforeSend
  // 3、請(qǐng)求數(shù)據(jù)
  var p = reqAjax(params);
  // 4、自定義success方法
  p.done(function (data) {});
  // 5、自定義error方法，一般屬于超時(shí)或網(wǎng)絡(luò)不正常
  p.fail(function (err) {});
  // 以上執(zhí)行成功之后可鏈?zhǔn)秸{(diào)用下一步操作
  p.then(function () {});
}

如果想多帶帶使用Ajax，一般來(lái)說(shuō)推薦兩個(gè)方案：Zepto.js 和 自己去 github 搜索

二、模板

根據(jù)設(shè)計(jì)的不同，有時(shí)需要重復(fù)添加一些元素。除了基本的模板插件外，還可以充分使用 JQuery 的 clone 方法

盡量不要拼接字符串！

假設(shè)dom結(jié)構(gòu)為：




  
字段1：

  
字段2：

  
字段3：

接口請(qǐng)求成功，處理dom：

// 自己處理循環(huán)
function addList(arr){
  // 模擬請(qǐng)求過(guò)來(lái)的數(shù)據(jù)
  var data = {
    test1: Math.random().toFixed(5),
    test2: Math.random().toFixed(5),
    test3: Math.random().toFixed(5)
  }
  // 假設(shè)父級(jí)dom
  var pDom = $(".xxx");
  // 直接克隆已經(jīng)寫(xiě)好且隱藏的模板，去掉hidden
  var dom = pDom.find(".test.hidden").clone().removeClass("hidden");
  // 取巧的方法，根據(jù)字段標(biāo)識(shí)的名稱(chēng)取dom元素，然后賦值，一般來(lái)說(shuō)還需要進(jìn)行其他的處理
  for(var key in data){
    dom.find("."+key).text(data[key])
  }
  // 處理完畢，加入父級(jí)dom中
  pDom.append(dom);
}

主要是我不喜歡拼接字符串，懶得很，而且改別人的BUG好惡心。

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

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

對(duì)于新添加的元素，添加點(diǎn)擊（或其他）事件，可以使用

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

或

$(newDom).live("click", function(){})
四、動(dòng)效 
作為前端，不要光想著js，好歹也學(xué)學(xué) animate.css

PC端使用動(dòng)效是沒(méi)問(wèn)題的，但移動(dòng)端網(wǎng)頁(yè)，如slideUp、animate之類(lèi)，最好用css樣式代替，不然會(huì)有卡頓效果。

……移動(dòng)端為什么還用jquery？jquery 壓縮版一般在80~90 kb，對(duì)如今的網(wǎng)絡(luò)是可以接受的，當(dāng)然最好用 zepto.js 代替。

請(qǐng)?jiān)谕瓿扇蝿?wù)之后再考慮優(yōu)化……

五、No JQuery 
不要把不熟悉的東西帶到工作中，除非沒(méi)有更好的替代方案

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

雜項(xiàng) 
如果有空，記得重構(gòu)代碼~

本來(lái)想寫(xiě)點(diǎn)具有實(shí)用性的東西，但Jquery的特性網(wǎng)上已經(jīng)有很多了，因此不再贅述，能給新人一點(diǎn)提示就行。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87408.html

相關(guān)文章

  • jQuery學(xué)習(xí)和知識(shí)點(diǎn)總結(jié)歸納

    摘要：目前在前端開(kāi)發(fā)所占的比重越來(lái)越高，在我們學(xué)習(xí)和開(kāi)發(fā)的過(guò)程中都會(huì)去使用。下面把程序員雷雪松對(duì)的知識(shí)點(diǎn)總結(jié)和歸納分享給大家。過(guò)濾對(duì)同胞元素的搜索。將匹配元素集合縮減為集合中的最后一個(gè)元素。返回指定元素相對(duì)于其他指定元素的位置。 jQuery目前在Web前端開(kāi)發(fā)所占的比重越來(lái)越高，在我們jQuery學(xué)習(xí)和開(kāi)發(fā)的過(guò)程中都會(huì)去使用。jQuery幫我們解決了瀏覽器之間JS一些不兼容的地方和簡(jiǎn)化了原...

    JohnLui 評(píng)論0 收藏0

  • JQuery JS文檔加載寫(xiě)法總結(jié)

    摘要：文檔加載注在使用時(shí)，可直接簡(jiǎn)寫(xiě)成，但是為了不發(fā)生歧義及造成不必要的錯(cuò)誤，最好是把寫(xiě)上方式加載完畢加載完畢加載完畢加載完畢加載完畢與別名可互通加載完畢加載完畢加載完畢加載完畢動(dòng)態(tài)綁定元素寫(xiě)法使用綁定動(dòng)態(tài)生成的元素時(shí)，不能直接用該對(duì)象操作，而是 1.文檔加載 1.JS window.onload=function(){ document.getElementById(m...

    shiyang6017 評(píng)論0 收藏0

  • jQuery總結(jié)

    摘要：是小巧輕量級(jí)的函數(shù)庫(kù)。本著寫(xiě)得少，做的多的原則來(lái)替代原生代碼，選擇器為其核心內(nèi)容。一引入引入方法，注意引入要在代碼上。二使用原始書(shū)寫(xiě)代碼簡(jiǎn)寫(xiě)如下兩種方式注意書(shū)寫(xiě)盡量使用原始書(shū)寫(xiě)方法，以提高代碼讀寫(xiě)區(qū)分加載。 JQuery是小巧、輕量級(jí)的javascript函數(shù)庫(kù)。本著寫(xiě)得少，做的多的原則來(lái)替代javascript原生代碼，選擇器為其核心內(nèi)容。一、引入JQuery：cdn引入方法，注意：...

    CODING 評(píng)論0 收藏0

  • 前端知識(shí)點(diǎn)總結(jié)——JQ

    摘要：前端知識(shí)點(diǎn)總結(jié)什么是第三方的極簡(jiǎn)化的操作的函數(shù)庫(kù)第三方下載極簡(jiǎn)化是操作的終極簡(jiǎn)化個(gè)方面增刪改查事件綁定動(dòng)畫(huà)效果操作學(xué)習(xí)還是在學(xué)，只不過(guò)簡(jiǎn)化了函數(shù)庫(kù)中都是函數(shù)，用函數(shù)來(lái)解決一切問(wèn)題為什么使用操作的終極簡(jiǎn)化解決了大部分瀏覽器兼容性問(wèn)題凡是讓用的 前端知識(shí)點(diǎn)總結(jié)——JQ 1.什么是jQuery: jQuery: 第三方的極簡(jiǎn)化的DOM操作的函數(shù)庫(kù) 第三方: 下載 極簡(jiǎn)化: 是DOM操作的...

    jayzou 評(píng)論0 收藏0

  • JQuery使用總結(jié)

    摘要：目前接觸最多的頁(yè)面開(kāi)發(fā)，基本還是使用的。主要原因基于操作方便頁(yè)面簡(jiǎn)單兼容良好新手多沒(méi)有能配合使用其他方案的人。，是的核心理念。 目前接觸最多的頁(yè)面開(kāi)發(fā)，基本還是使用 JQuery 的。主要原因基于：操作方便；頁(yè)面簡(jiǎn)單；兼容良好；新手多……沒(méi)有能配合使用其他方案的人。因此，本篇文章就是寫(xiě)著玩加吐點(diǎn)槽的。 Write Less，Do More是JQuery的核心理念。所以你們就不要在工作中...

    dreambei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<