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，复制对象是很好的做法？

回答

相关问题