Informationen zur Ajax-Sekundärkapselungs-JQuery

Jeder weiß, dass die sekundäre Kapselung von Jquery, der vollständige Name von Ajax, Asynchronous JavaScript and XML ist. Der Artikel stellt Ihnen hauptsächlich Beispiele für die sekundäre Kapselung von JQuery Ajax vor Ich brauche es. Ich hoffe, es kann allen helfen.

In AJax enthaltene Techniken:

1. Verwenden Sie CSS und XHTML, um es darzustellen.

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-Methode Sehr praktisch und sehr einfach zu verwenden. 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.

Problempunkte

Aber bei der Verwendung von $.ajax in Projekten gibt es immer noch einige Problempunkte

Im Grunde sind es die von Ajax zurückgegebenen Daten alle Projekte jetzt Es wurde auch zweimal gekapselt und Informationen zur Geschäftslogik der Hintergrundverarbeitung hinzugefügt.

Aus den zurückgegebenen Daten wird Folgendes: Code: 200, Daten: {}, err_msg:''｝

Wenn jede Ajax-Anfrage zurückkommt, muss beurteilt werden, ob der Code ist korrekt. Das gesamte Projekt ist zu redundant für die Geschäftslogikverarbeitung oder Fehlerberichterstattung.

$.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, ob dies der Fall ist Geschäftslogik oder Fehlererinnerungen werden extrahiert und in öffentliche Teile 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

Die Verwendung von util.ajax anstelle von $.ajax kann Geschäftsfehler 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 gängige Methode, aber manchmal müssen wir uns mit Differenzierung befassen. Wir beziehen uns auf Express, um eine Middleware einzuführen, um das Differenzierungsproblem zu lösen.

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:

Minimalistische Methode zur Vervollständigung der JavaScript-Kapselung und -Vererbung

JavaScript-Simulation, drei Möglichkeiten, die Kapselung zu erreichen Und das Einführung in die Unterschiede

Ein Beispiel für die Kapselung einer einzelnen Datei und deren Hochladen in die Datenbank in PHP

Das obige ist der detaillierte Inhalt vonInformationen zur Ajax-Sekundärkapselungs-JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!