Question

我写了一些todo列表应用程序，以了解如何更专业。

我试图理解的内容：

我的问题是当用户点击任务进行编辑时，因为它通过引用传递，所以如果用户编辑任务，它将直接更改任务对象。（我在这里附上我的代码）。

我的问题：

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 = {};
            }
        };
    });
}());

Answer 1

我的问题是当用户点击任务进行编辑时，因为它通过引用传递，所以如果用户编辑任务，它将直接更改任务对象。（我在这里附上我的代码）。

要解决此问题，您应制作模型的副本并进行更改（在编辑功能中）：this.task = angular.copy(task);

在我的代码中我写了一种修复方法，每次都是克隆对象。这是好习惯吗？如果没有你怎么建议我解决它？

正如我所说，制作副本更合乎逻辑！

因为我不希望我的代码只能工作，所以我想要更专业。如果你认为我对这段代码的思考和计划不好？你怎么写这个应用程序？（我在这里只讨论功能，添加，编辑，任务列表）

1）我不知道你为什么要使用一组对象？你的任务只是字符串！所以如果你使用一个字符串数组会更好。那么你就不会像editMode.task.content那样挣扎，只需使用editMode.task！

2）不要使用id。因为当你添加“删除任务”功能时，你会遇到问题......

3）Task()函数有什么作用？（在这种情况下，你不需要像这样）

4）...

Answer 2

我认为你的控制器过于复杂。该服务应该实现一些类似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倍。这里是plunker（https://plnkr.co/edit/nN8kd5ErSDsBu6Exm1YO）

AngularJs / Javascript，Copy Object是不错的做法？

2 个答案: