Warm tip: This article is reproduced from serverfault.com, please click

javascript-从$ scope访问嵌套变量属性的干净方法

(javascript - Clean way to acces nested variable properties from the $scope)

发布于 2020-11-28 11:10:42

我想访问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;
};

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

我知道我可以定义一个变量varoperations = $scope.operationsoperations.isEditOpen在需要此值时访问该属性 ,但是我仍然希望更简单一些,因为我不想为作用域中的所有对象创建变量。

有什么方法可以创建function带有两个paramsobjectFromScope, neededProperty)的方法,该方法可以从范围上设置的变量中返回所需的属性值?或者,当我想从作用域访问对象属性时,有没有更好的方法来没有那么多的代码?

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;
    };

但这是一个好方法吗?

Questioner
John R.
Viewed
11
Dai 2020-11-28 19:59:10

有什么方法可以创建具有两个参数的函数,( 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,以这种方式进行操作是非常不习惯的:从事此项目的其他任何人都会盯着代码几分钟,然后挠头,然后大声地想知道为什么要这样做首先。