ajaxを使用してjqueryインスタンスを2回カプセル化する詳細な説明

この記事では、ajax を使用した jquery インスタンスの二次カプセル化について主に紹介します。Ajax の正式名称は、Asynchronous JavaScript and XML です。次の記事では、サンプル コードを使用して、jquery インスタンスの二次カプセル化の例を主に紹介します。非常に詳しく説明されていますので、必要な方は以下をご覧ください。

はじめに

Ajax の正式名は、非同期 JavaScript および XML です。 非同期 JavaScript および XML

AJax には次のテクノロジが含まれます:

1. CSS と XHTML を使用して表現します。

2. インタラクションと動的な表示には DOM モデルを使用します。

3. XMLHttpRequest を使用してサーバーと非同期通信します。 (コア)

4. JavaScript を使用してバインドして呼び出します。

フロントエンドがデータを処理する場合、ajax を介してバックエンドと通信することが避けられません。Ajax は XMLHttpRequest オブジェクトを介してサーバーと通信し、それに基づいて通信用の $.ajax メソッドをカプセル化します。 XMLHttpReaquest. $.ajax メソッドは非常に実用的で、使い方も簡単です。 このクエリ ajax の 2 番目のカプセル化では、データを処理するミドルウェアを追加し、Promise (Deferd) オブジェクトを返し、コールバックを減らし、ajax をより簡潔かつエレガントに記述するために Express を参照します。 $.ajax 办法进行通信， $.ajax 办法实用性非常强，又非常简单易用。 本次二次封装 query ajax，参考 express 可以添加中间件处理数据，返回 Promise（Defferd） 对象，减少回调， 写 ajax 更加简洁、优雅。

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

大部分的时候我们只需要传入 url 和 data， 就可以获取到我们想到的数据了。

痛点

但是在项目中使用 $.ajax, 它还是有一些痛点的

就是现在基本所有项目的 ajax 返回的数据也是进行了二次封装，加入了后台在处理业务逻辑时的信息。

从返回 data, 变成 了 ｛code: 200, data:{}, err_msg:''｝

如果每一个 ajax 请求回来都要判断 code 是否正确再进行业务逻辑处理或者报错提醒， 整个项目下来也太冗余了，

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

为了解决这个问题，我们用一个函数再次封装 $.ajax， 把这种正确与否判断再处理业务逻辑或者报错提醒提取出来做成公共的部分。

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)
 }
 })
}

promise

用 util.ajax 代替 $.ajax

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)
 })

ほとんどの場合、必要なデータを取得するには、URL とデータを渡すだけで済みます。

問題点

しかし、プロジェクトで $.ajax を使用する場合、まだいくつかの問題点があります

つまり、現在、基本的にすべてのプロジェクトで ajax によって返されるデータも 2 回処理されます。カプセル化により、バックグラウンド処理のビジネス ロジックに関する情報が追加されます。

データが返されると、｛code: 200, data:{}, err_msg:''｝ になります

すべての ajax リクエストが返される場合は、その前にコードが正しいかどうかを判断する必要がありますビジネスロジックの実行やエラー報告など、プロジェクト全体が冗長すぎる

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)
 })

この問題を解決するために、$.ajax を再度カプセル化する関数を使用して、これが正しいかどうかを判断するためのビジネス ロジックやエラー リマインダーが抽出され、公開されます。ビジネスエラーを減らすために、$.ajax の代わりに util.ajax を使用してください。 コールバックを使用する代わりに、Promise を使用して呼び出しを行い、コールバックを減らし、コードをより明確にしてみましょう。

rrreee🎜🎜🎜ミドルウェア🎜🎜🎜🎜🎜これはパブリックなメソッドですが、微分問題を解決するためにミドルウェアを導入するために、微分に対処する必要がある場合があります。 🎜🎜🎜🎜rrreee🎜関連する推奨事項: 🎜🎜🎜jqueryのajaxの2次カプセル化とajaxキャッシュプロキシコンポーネント: AjaxCacheの詳細な説明_jquery🎜🎜🎜🎜JavaScriptシミュレーションのカプセル化を実装する3つの方法と違いの紹介🎜🎜🎜 🎜JSのカプセル化の書き方モーションフレーム🎜🎜

以上がajaxを使用してjqueryインスタンスを2回カプセル化する詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。