Methods for Setting DOM Object Properties While Avoiding no-param-reassign Conflicts

Problem Background and Rule Analysis

In JavaScript development, ESLint's no-param-reassign rule is designed to prevent reassignment of function parameters, primarily to avoid potential issues with the arguments object. When developers attempt to set properties on DOM objects, such as:

function (el) {
  el.expando = {};
}

The rule throws an error because el as a function parameter is being reassigned. However, in DOM manipulation scenarios, this assignment actually modifies object properties rather than changing parameter references, which diverges from the rule's original intent.

Detailed Solutions

To address this issue, developers can employ multiple approaches while maintaining consistency with AirBnB's code style:

Global Rule Configuration

By modifying the ESLint configuration file .eslintrc.json, the rule's strictness can be adjusted:

"rules": {
  "no-param-reassign": 0
}

This approach completely disables the rule, suitable for projects with frequent DOM property operations.

Property Modification Exception Configuration

A more precise solution allows parameter property modification while maintaining restrictions on other parameter assignments:

"rules": {
  "no-param-reassign": [2, { "props": false }]
}

This configuration acknowledges the fundamental difference between modifying object properties and reassigning parameters, representing a recommended balanced approach.

Function-Level Rule Disabling

For specific functions, rules can be temporarily disabled using comments:

/* eslint-disable no-param-reassign */
function (el) {
  el.expando = {};
}
/* eslint-enable no-param-reassign */

This approach maintains code locality, avoiding impact on rule checking for other functions.

Line-Level Rule Disabling

The most precise control involves disabling rules at specific code lines:

function (el) {
  el.expando = {}; // eslint-disable-line no-param-reassign
}

This method minimizes the scope of rule disabling, preserving code standardization.

Technical Principles and Best Practices

Understanding the design rationale behind the no-param-reassign rule is crucial. The rule primarily guards against accidental modifications to the arguments object, though this risk has significantly diminished in strict mode and ES6+ environments. For DOM object property operations, the actual modification occurs to the object itself rather than parameter references, differing from the core issues the rule aims to prevent.

When selecting solutions, consider these principles:

• Prioritize configuring rules to allow property modification, addressing the issue while maintaining code consistency
• Avoid completely disabling rules in large projects to prevent introducing genuine parameter reassignment errors
• When using line-level or function-level disabling, add comments explaining the rationale to enhance code maintainability
• Regularly review rule disablement situations to ensure exception cases are not abused

By appropriately applying these solutions, developers can efficiently perform DOM object operations while following AirBnB's code style, achieving a balance between code quality and development efficiency.