Ausführliche Erklärung der Verwendung von Ajax zum doppelten Kapseln von JQuery-Instanzen

Dieser Artikel stellt Ihnen hauptsächlich die Verwendung von Ajax zum erneuten Kapseln von JQuery-Instanzen vor. Der vollständige Name von Ajax lautet Asynchronous JavaScript and XML Der Beispielcode wird ausführlich vorgestellt. Freunde, die ihn benötigen, können einen Blick darauf werfen.

Vorwort

Der vollständige Name von Ajax ist Asynchronous JavaScript and XML Asynchronous javaScript and XML

An AJax beteiligte Technologien:

1. Verwenden Sie CSS und XHTML zum Ausdrucken.

2. Verwenden Sie das DOM-Modell für Interaktion und dynamische Anzeige.

3. Verwenden Sie XMLHttpRequest, um asynchron mit dem Server zu kommunizieren. (Kern)

4. Verwenden Sie Javascript zum Binden und Aufrufen.

Wenn unser Front-End Daten verarbeitet, ist es unvermeidlich, mit dem Backend über das XMLHttpRequest-Objekt zu kommunizieren. Ajax kapselt die $.ajax-Methode für die Kommunikation basierend auf dem XMLHttpRequest-Objekt. Die $.ajax-Methode Sehr praktisch und sehr einfach anzuwenden. Diese zweite Kapselung von Abfrage-Ajax bezieht sich auf Express, um Middleware zum Verarbeiten von Daten hinzuzufügen, Promise-Objekte (Defferd) zurückzugeben, Rückrufe zu reduzieren und Ajax präziser und eleganter zu schreiben.

$.ajax({
 url: url,
 data: data,
 dataType: 'json',
 type: 'get',
 success: new Function(){},
 error: new Function(){},
 .......
})

Meistens müssen wir nur die URL und die Daten übergeben, um die gewünschten Daten zu erhalten.

Pain Points

Aber wenn $.ajax in einem Projekt verwendet wird, gibt es immer noch einige Pain Points

Die von Ajax zurückgegebenen Daten für praktisch alle Projekte werden jetzt auch doppelt gekapselt und die Informationen der Hintergrundverarbeitungs-Geschäftslogik werden hinzugefügt.

hat sich von der Rückgabe von Daten zu ｛code: 200, data:{}, err_msg:''｝

geändert. Wenn jede Ajax-Anfrage zurückkommt, muss beurteilt werden, ob der Code korrekt ist, und dann eine Geschäftslogikverarbeitung oder eine Fehlererinnerung durchgeführt werden . Das ganze Projekt wird auch Es ist zu redundant,

$.ajax({
 url: url,
 data: data,
 success: function(data){
 if(data.code == 200) {
  dosomething()
 } else {
 alert(data.err_msg);
 }
 }
})

Um dieses Problem zu lösen, verwenden wir eine Funktion, um $.ajax erneut zu kapseln und dann zu verarbeiten Nachdem die Geschäftslogik beurteilt wurde, ob sie korrekt ist oder nicht, wird die Fehlererinnerung extrahiert und in einen öffentlichen Teil umgewandelt.

util.ajax = function(obj, successFn){
 $.ajax({
 url: obj.url || '/interface',
 data: obj.data || {},
 dataType: obj.dataType || 'json',
 type: obj.type || 'get',
 success: function(data){
  if (data.code != 200) {
  alert(data.err_msg);
  } else {
  successFn(data.data)
  }
 },
 error: function(err){
  alert(err)
 }
 })
}

Versprechen

Verwenden Sie util.ajax anstelle von $.ajax Dies kann geschäftliche Fehleinschätzungen reduzieren. Lassen Sie es uns noch einmal verbessern, anstatt Rückrufe zu verwenden, verwenden Sie Versprechen zum Aufrufen, um Rückrufe zu reduzieren und den Code klarer zu machen.

util.ajax = function(obj) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })
 return deferred.fail(function (err) {
  alert(err)
 });
}


// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
util.ajax(obj)
 .done(function(data){
  dosomething(data)
 })

Middleware

Dies ist eine öffentliche Methode, aber es gibt sie manchmal Wir müssen uns mit der Differenzierung befassen. Wir beziehen uns auf die Einführung einer Middleware zur Lösung des Differenzierungsproblems.

util.ajax = function(obj, middleware) {
 var deferred = $.Deferred();
 $.ajax({
  url: obj.url || '/interface',
  data: obj.data || {},
  dataType: obj.dataType || 'json',
  type: obj.type || 'get',
 }).success(function (data) {
  if (data.code != 200) {
   deferred.reject(data.err_msg);
  } else {
   deferred.resolve(data.data)
  }
 }).error(function (err) {
  deferred.reject('接口出错，请重试');
 })

 // 添加中间件
 if(!middleware) {
  middleware = function(){};
 }
 return deferred.done(middleware).fail(function (err) {
  message({
   content: err,
   type: 'error',
   showLeftIcon: true,
   duration: 5000
  });
 });
}

// 调用
// 调用
var obj = {
 url: '/interface',
 data: {
  interface_name: 'name',
  interface_params: JSON.stringify({})
 }
};
var middleware = function(data) {
 data.forEach(function(item){
  item.fullName = item.firstName + item.lastName
 })
}
util.ajax(obj, middleware)
 .done(function(data){
  console.log(data.fullName)
 })

Verwandte Empfehlungen:

Sekundäre Kapselung der Ajax- und Ajax-Cache-Proxy-Komponente von jquery: AjaxCache detaillierte Erklärung_jquery

Einführung in drei Methoden der JavaScript-Simulation zur Implementierung der Kapselung und ihre Unterschiede

Eine Möglichkeit, ein JS-Encapsulation-Motion-Framework zu schreiben

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der Verwendung von Ajax zum doppelten Kapseln von JQuery-Instanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!