从 $scope [关闭] 访问嵌套变量属性的干净方法答案

【问题标题】：Clean way to acces nested variable properties from the $scope [closed]从 $scope [关闭] 访问嵌套变量属性的干净方法
【发布时间】：2021-03-10 22:06:52
【问题描述】：

我想在 java 脚本文件中访问相同的变量属性，但由于属性太多，代码看起来有点难看。我有下一个代码：

$scope.invoice = new Invoice();

$scope.operations = {
    editingLine: {},
    isNewLine: false,
    isEditOpen: false
};

$scope.modify = function (invoiceLine) {

    if ($scope.operations.isEditOpen) return;

    let originalLine = $scope.invoice.invoiceLines.find(line => line.id = invoiceLine.id);
    tempLine = angular.copy(originalLine);
    $scope.operations.editingLine[invoiceLine.id] = true;
    $scope.operations.isEditOpen = true;
};

有什么方法可以更简洁地访问设置在对象invoice 上的属性invoiceLine 或设置在对象operations 上的属性isEditOpen？我的文件中有很多重复的代码，我想找到一种更简洁的方法来访问这样的属性。

我知道我可以定义一个变量 var operations = $scope.operations 并在我需要这个值时访问属性 operations.isEditOpen 但我仍然想要更简单的东西，因为我不想为来自的所有对象创建变量范围。

有什么方法可以创建一个带有两个params (objectFromScope, neededProperty) 的function，它可以从范围上设置的变量返回所需的属性值？或者当我想从作用域访问对象属性时，有没有更好的方法来减少这么多代码？

PS：我也可以这样做：

let editingLine = $scope.operations.editingLine;
    let isNewLine = $scope.operations.isNewLine;
    let isEditOpen = $scope.operations.isEditOpen;

$scope.modify = function (invoiceLine) {

        if (isEditOpen) return;

        let originalLine = invoiceLines.find(line => line.id = invoiceLine.id);
        tempLine = angular.copy(originalLine);
        editingLine[invoiceLine.id] = true;
        isEditOpen = true;
    };

但这是一个好方法吗？

【问题讨论】：

“因为我不想为范围内的所有对象创建变量” - 为什么不呢？
顺便说一句，回复：let editingLine = $scope.operations.editingLine; - 如果该代码在全局范围内，那么它只会复制一次 editingLine。这不是价值的实时视图。
"有什么方法可以访问设置在对象invoice 上的属性invoiceLine" - 你的意思是invoiceLines，而不是invoiceLine，对吗？

标签： javascript angularjs object properties nested-properties

【解决方案1】：

有什么方法可以创建一个带有两个参数( objectFromScope, neededProperty ) 的函数，该函数可以从作用域上设置的变量返回所需的属性值？或者当我想从作用域访问对象属性时，有没有更好的方法来减少这么多代码？

是的，但我看不出它如何为您节省任何麻烦。它还会使切换到 TypeScript 变得更加困难（尽管如果您不想取消引用整个属性路径，则可以使其与 keyof 一起使用）。

但这就是那个功能：

function getPropertyValue( objectFromScope, neededProperty ) {
    
    const pathComponents = neededProperty.split( '.' );
    
    let obj = objectFromScope;
    for( const component of pathComponents ) {
        obj = obj[ component ];
    }

    return obj;
}

用法：

$scope.invoice = new Invoice();

$scope.operations = {
    editingLine: {},
    isNewLine: false,
    isEditOpen: false
};

$scope.modify = function( invoiceLine ) {

    if ($scope.operations.isEditOpen) return;

    const lines = getPropertyValue( $scope, 'invoice.invoiceLines' );
    let originalLine = lines.find(line => line.id = invoiceLine.id);

    tempLine = angular.copy(originalLine);
    $scope.operations.editingLine[invoiceLine.id] = true;
    $scope.operations.isEditOpen = true;
};

...但这确实不会使您的代码更易于阅读或维护。相反，它使情况变得更糟，因为以这种方式做事对于 JavaScript 和 AngularJS 来说是非常不习惯的：从事这个项目的任何其他人都会盯着代码几分钟，然后挠头，然后大声问你为什么要这样做首先。

【讨论】：