zoukankan      html  css  js  c++  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的参数。

  • 相关阅读:
    CF1454F Array Partition
    leetcode1883 准时抵达会议现场的最小跳过休息次数
    leetcode1871 跳跃游戏 VII
    leetcode1872 石子游戏VIII
    CF1355C Count Triangles
    CF1245D Shichikuji and Power Grid
    CF1368C Even Picture
    CF1368D AND, OR and square sum
    CF1395C Boboniu and Bit Operations
    SpringBoot和开发热部署
  • 原文地址:https://www.cnblogs.com/darrenji/p/5163213.html
Copyright © 2011-2022 走看看