你的位置:首页 > Java教程

[Java教程]AnguarJS中链式的一种更合理写法


 

假设有这样的一个场景:

我们知道一个用户某次航班,抽象成一个departure,大致是:

{userID : user.email,flightID : "UA_343223",date: "01/14/2014 8:00 AM"}

有关航班的,抽象成一个flight,大致是:

{id: flightID,pilot : "Captain Morgan", plane : {make  : "Boeing 747 RC",model : "TA-889"},status: "onTime"}


有关天气情况的,抽象成forecast,大致是:

{date: date,forecast : "rain"}


我们的需求是:

● 显示departure相关:departure.date
● 显示flight相关:flight.plane.make, flight.plane.model
● 显示foreacst相关:weather.forecast

实现逻辑大致是:

→ 根据departure中的flightID获取flight
→ 根据departure中的date获取forecast


首先模拟一些服务:

 

(function(angular){  angular.module("FlightServices",[])    .service("user", function(){      return{        email: 'exmaple@qq.com',        repository:"https://github.com/ThomasBurleson/angularjs-FlightDashboard"      };    })    .service("travelService", function(user, $q){      return{        //根据用户获取departure        getDeparture: function(user){          var defer = $q.defer();          defer.resolve({            userID  : user.email,            flightID : "UA_343223",            date   : "01/14/2014 8:00 AM"          });          return defer.promise;        },        getFlight: function(flightID){          return $q.resolve({            id  : flightID,            pilot : "Captain Morgan",            plane : {              make : "Boeing 747 RC",              model : "TA-889"            },            status: "onTime"          });        }      };    })    .service("weatherService", function($q){      return {       getForecast: function(date){         return $q.resolve({           date   : date,           forecast : "rain"         });       }      };    });}(window.angular));

 

以上,模拟了一些数据,让我们最终能获取到如下数据:

有关用户的:

{
    email: 'exmaple@qq.com',
    repository:"https://github.com/ThomasBurleson/angularjs-FlightDashboard"
};

有关depature的,通过getDeparture(user)获取到一个promise

{
    userID   : user.email,
    flightID : "UA_343223",
    date     : "01/14/2014 8:00 AM"
}

有关depatrue的,通过getFlight(flightID)获取到一个promise

{
    id    : flightID,
    pilot : "Captain Morgan",
    plane : {
        make  : "Boeing 747 RC",
        model : "TA-889"
    },
    status: "onTime"
}

有关forecast的,通过getForecast(date)获取到一个promise

{
     date     : date,
     forecast : "rain"
}

接下来就从以上服务所提供的promise数据中获取,由于是promise,所有就可以then,可能会这样写:

 

var FlightDashboard = function($scope, user, travelService, weatherService){  $scope.user = user;    travelService    .getDeparture(user.email) //第一个请求    .then(function(depature){      $scope.departure = depature;            //第二个请求      travelService        .getFlight(departure.flightID)        .then(function(flight){          $scope.flight = flight;                    //第三次请求          weatherService            .getForecast(departure.date)            .then(function(weather){              $scope.weather = weather;            })        })    })};

 

但以上写法的缺点是层级太多。一种更好的写法是:

 

(function(){  "use strict";  var FlightDashboard = function($scope, user, travelService, weatherService){      var loadDeparture = function (user) {        return travelService          .getDeparture(user.email)          .then(function(departure){            $scope.departure = departure;            return departure.flighID;          });      });    },    loadFlight = function(flightID){      return travelService        .getFlight(flightID)        .then(function(flight){          $scope.flight = flight;          return flight;        });    },    loadForecast = function(){      return weatherService        .getForecast($scope.departure.date)        .then(function(weather){          $scope.weather = weather;          return weather;        });    };  loadDeparture(user)    .then(loadFlight)    .then(loadForecast);  $scope.user = user;  $scope.departure = null;  $scope.flight = null;  $scope.weather = null;  ;  window.FlightDashboard = ["$scope","user","travelService", "weatherService", FlightDashboard];}());

 

以上,loadDeparture返回的flightID作为loadFligth的参数。