AngularJS中的代碼風格

我在Angular + Django中寫了一些代碼，我知道這段代碼很醜，但我不知道如何重構它。也許你們可以幫忙？AngularJS中的代碼風格

那麼，讓我們來看看代碼，簡化代碼。

首先，我有模特

class Product(models.Model): 
    name = models.CharField(max_length=100) 
    status = models.CharField(max_length=10, choices=STATUSES.items(), default='new') 

class Ad(models.Model): 
    image = models.ImageField(upload_to="ad") 
    width = models.IntegerField(blank=True) 
    height = models.IntegerField(blank=True) 
    product = models.ForeignKey(Product, null=True, blank=True) 

class AdStatus(models.Model): 
    status = models.IntegerField(default=1) 
    ad = models.ForeignKey(Ad)

好了，接下來我簡單的序列化類

class AdSerializer(serializers.HyperlinkedModelSerializer): 
    class Meta: 
     model = Ad 
     fields = ["url", "id", "image", "width", "height". "product"] 
#etc...

而且每種模式都有自己的角度

.factory('AdStatus',["$resource", function ($resource){ 
    var Resource = $resource(
     "/api/ad_status/:ad_id/", 
     {ad_id: '@id'}, 
     { 
      query: { 
       isArray: true, 
       transformResponse: function (data) { 
        var items = angular.fromJson(data); 
        return items.results; 
       } 
      }, 
      update: { 
       method: "PUT", 
      } 
     }, 
     { 
      stripTrailingSlashes: false 
     } 
    ); 
    Resource.prototype.changeStatus = function(status){ 
     this.status = status; 
     this.$update(); 
    }; 
    return Resource; 
    }]) 
/etc

廠這在主代碼

//controller isn't bad 

angular.module('controllers.statuses', []) 
.controller('StatusCtr', ["$scope", "$stateParams", "StatusSetter", function($scope, $stateParams, StatusSetter) { 
    $scope.click = function(){ 
     $scope.t = StatusSetter.change($stateParams.id);// this is id of product 
    }; 
}]);

但這，讓我有點...生病

.factory('StatusSetter', ["AdStatus", "Product", "Ad", function(AdStatus, Product, Ad){ 
    var changeStatus = function(id, productStatus, adStatus){ 
     var product = Product.get({product_id: id}); 
     product.$promise.then(function(data) { 
      product.changeStatus(productStatus); 
      var ads = Ad.query(); 
      var ad_status = AdStatus.query(); 
      var tmp = []; 
      ads.$promise.then(function(data){ 
       for (var i = 0; i < ads.length; i++) { 
        if (ads[i].product == product.url){ 
         tmp.push(ads[i]); 
        } 
       } 
       ad_status.$promise.then(function(data){ 
        for (var i = 0; i < ad_status.length; i++){ 
         for (var j = 0; j < tmp.length; j++){ 
          if (ad_status[i].ad == tmp[j].url){ 
           ad_status[i].changeStatus(adStatus); 
          } 
         } 
        } 

       }) 
      }); 
     }); 
     return product; 
    }; 
    return { 
     change: function(id){ 
      return changeStatus(id, "new_status", 30); 
     } 
    } 
    }])

這段代碼的主要理念是：其在廣告（其在產品指向）

任何想法指向變化AdStatuses ？也許我可以將這個'過濾'分隔到$資源或其他東西。

來源

2015-11-12 Hegol99

有一個專門用於代碼評論的整個stackexchange網站 – redFIVE

@redFive是正確的，這將更適合[codereview.se] - 請注意，您不需要「簡化」您在其中發佈的代碼事實上，包含所有內容實際上會更好;評論者喜歡在完整的背景和榮耀中看到您的代碼！ :-)（只要確保你有一個標題，說*代碼在做什麼*，而不是*你想從同行評議中得到什麼*） –

我投票結束這個問題作爲脫離主題因爲如前所述，它屬於CodeReviews –

我確切地知道你來自哪裏。大約一年前，我有超過10年的C++編碼，並以JavaScript開始。恐怕你將不得不使用JS編寫代碼的方式，這與你所使用的代碼非常不同。你也必須習慣異步處理。

看着你的代碼，你似乎應該將這些操作移到你的後端。如果我正確地讀你的代碼，您檢索我們的產品：

var changeStatus = function(id, productStatus, adStatus){ 
    var product = Product.get({product_id: id}); 
    product.$promise.then(function(data) { 
     product.changeStatus(productStatus);

和你後端更新狀態你瞬間發送呼叫。爲什麼不移動所有這些以及將廣告狀態更新到後端並將其集成到獲取請求的處理中？

這將爲您節省很多調用到後端的每個changeStatus（）;調用是一個REST調用，從而減少服務器上的負載+你簡化你的JS代碼。

來源

2015-11-12 23:54:13

也請記住，如果您在某些時候更新了ads或ad_status，則必須重新運行代碼。保持angularjs代碼與Django數據庫同步並不是微不足道的，所以你應該考慮如何解決這個問題。當前的代碼將無法檢測到數據庫中的更改。 –

AngularJS中的代碼風格

回答

相關問題