AngularJs/Javascript，複製對象是很好的做法？

我寫了一些待辦事項列表應用程序，瞭解如何成爲更專家。AngularJs/Javascript，複製對象是很好的做法？

什麼，我試着去理解：

我的問題是當任務用戶點擊編輯，因爲它通過引用傳遞的，所以如果用戶編輯任務時，它會直接更改任務的對象。（我在這裏附上我的代碼）。

我的問題：

1）在我的代碼我寫，每次修復它，通過克隆對象的一種方式。很好的做法？如果沒有你如何推薦我解決它？

2）因爲我不想我的代碼只工作，我想成爲更專家。如果您認爲我對此代碼的思考和計劃不好？你如何編寫這個應用程序？（我這裏只講功能，添加，編輯，任務列表）

感謝幫助:)

鏈接plunker：https://plnkr.co/edit/CA99iiydbD4TWaGtJZZf?p=preview

代碼： HTML

<html ng-app="todos"> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> 
    <script src="app.js"></script> 
</head> 
<body> 
    <div ng-controller="main"> 
     <ul> 
      <li ng-repeat="task in todosBL.tasks" ng-click="editMode.edit(task)">{{ task.content}}</li> 
     </ul> 
     <input type="text" ng-model="task"> 
     <input type="button" value="add task" ng-click="add(task)"> 
     <!--//for edit--> 
     <div> 
      <input type="text" ng-model="editMode.task.content"> 
      <input type="button" value="save task" ng-click="editMode.save(editMode.task)"> 
     </div> 
    </div> 
</body> 
</html>

SCRIPT ：

(function() { 
    var Task = (function() { 
     var counter = 0; 
     return function(content, isDone) { 
      this.id = counter++; 
      this.content = content; 
      this.isDone = isDone || false; 
     } 
    }()); 
    var app = angular.module('todos',[]) 
    .service('todosBL', function() { 
     this.tasks = []; 
     this.add = function(content) {   
      this.tasks.push(new Task(content)); 
     } 

     this.update = function(editedTask) { 
      var i = this.tasks.findIndex(function(task){ 
       return task.id === editedTask.id 
      }); 
      this.tasks[i] = editedTask; 
     } 

    }) 
    .controller('main', function($scope, todosBL) { 
     $scope.todosBL = todosBL; 
     $scope.add = function(task) { 
      todosBL.add(task); 
      $scope.task = null; 
     } 
     $scope.editMode = { 
      task: {}, 
      edit: function(task) { 
       this.task = task; 
       //BECAUSE I PASS TASK BY REFERNCE WHEN USER EDIT TASK IT CHANGE TASK DIRECTLY , 
       // IF I CLONE OBJECT EVERY TIME, IT FIX BY REFERENCE PROBLEM. 
       // MY QUESTION IF HAVE OTHER WAY TO SLOVE THIS. MABY OTHER WAY TO THINK ABOUT APP LIKE THIS. 
       // for(key in task) { 
       //  this.task[key] = task[key]; 
       // } 
      }, 
      save: function(task) { 
       todosBL.update(task); 
       this.task = {}; 
      } 
     }; 
    }); 
}());

來源

2017-02-25 Lior Cris

我認爲這是更適合http://codereview.stackexchange.com/作爲代碼的作品，但你想對它的意見。 – leroydev

在我的愚見中，你讓你的應用變得複雜。外部功能，工廠這樣一個簡單的應用程序？ –

謝謝你的回答，但肯定它對這個應用程序很複雜。我的問題不是關於這個應用程序。我詢問有關思考或計劃的代碼。我給這個應用程序例如我的問題。我試着瞭解是否有更多專家的方式來編寫這個功能 –

我認爲你的控制器是過於複雜。該服務應該執行一些類似於數據驗證的BL，並將其發佈到服務器和/或本地存儲中，但不搜索索引，它現在確實很愚蠢！

爲了滿足您的所有需求一個只需要一個控制器：

app.controller('MainCtrl', function($scope) { 


$scope.tasks = []; 

    $scope.add = function(content){ 

    $scope.tasks.push(new Task(content)); 
    $scope.content = null; 
    } 
    $scope.edit = function(task){ 
    $scope.currentlyEditing = task; 
    $scope.editText = task.content; 
    } 

    $scope.save= function(){ 
    $scope.currentlyEditing.content = $scope.editText; 
    $scope.editText = null; 
    $scope.currentlyEditing = null; 
    mySuperSeriousService.postToServer.then(result=> { 
     alert('Success'); 
    }) 
    } 
});

和模板是這樣的：

<body ng-controller="MainCtrl"> 

    <ul> 
     <li ng-repeat="task in tasks" ng-click="edit(task)">{{ task.content}}</li> 
    </ul> 
    <input type="text" ng-model="content"> 
    <button ng-click="add(content)">Add Task</button> 
    <!--//for edit--> 
    <div> 
     <input type="text" ng-model="editText" ng-disabled="!currentlyEditing"> 
     <button ng-click="save()">Save</button> 
    </div> 
</body>

因此，它是更短的2倍。這裏的重擊（https://plnkr.co/edit/nN8kd5ErSDsBu6Exm1YO）

來源

2017-02-25 23:24:31

謝謝大家！在我的代碼中，我真的不問關於所有代碼我worte其他問題的簡單例子。但我學到更多:)所以它更好。我問複製對象是好的做法？我試圖理解，如果我想編輯一些對象，它可以複製對象？ –

我的問題是當用戶點擊任務進行編輯時，因爲它是通過引用傳遞的，所以如果用戶編輯任務，它會直接改變任務對象。（我在這裏附上我的代碼）。

爲了解決這個問題，你應該讓你的模型的副本，並改變它（在編輯功能）：this.task = angular.copy(task);

在我的代碼我寫了一個辦法解決它，由克隆對象每次。它很好的做法？如果沒有你如何推薦我解決它？

正如我所說，複製是更合乎邏輯！

，因爲我不希望我的代碼只工作，我想更多的專家。如果你認爲我對這段代碼的思考和計劃很糟糕？你如何編寫這個應用程序？（我在這裏只談論關於功能，添加，編輯，任務列表）

1）我不知道你爲什麼使用一個對象數組？你的任務只是字符串！所以如果你使用一個字符串數組可能會更好。那麼你就不會像editMode.task.content那樣掙扎，你只需要用editMode.task！

2）不要與id s一起工作。因爲當你添加'刪除任務'功能，你會遇到問題...

3）Task()函數做什麼？（在這種情況下，你並不需要某事像這樣）

4）...

來源

2017-02-25 22:54:27 JustCauseWhat

謝謝你的幫助！ –

AngularJs/Javascript，複製對象是很好的做法？

回答

相關問題