Question

我在Javascript中遇到了这样的代码，并且因为我来自C ++ / Python背景而变得非常困惑：

const list = [
  {
    title: 'React',
    url: 'https://facebook.github.io/react/',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4,
    objectID: 0,
  },
  ...
];

class App extends Component {

  constructor(props) {
    super(props);

# leanpub-start-insert
    this.state = {
      list: list,
    };
# leanpub-end-insert
  }

  ...

}

看起来你可以只使用函数之外的变量。我理解这就是JS的工作方式，但我不确定这是否是人们通常所做的，只是从外部使用变量而不是作为参数传递。这是标准和正常的做法吗？

以下看起来很难将变量作为参数传递给函数：

import React, { Component } from 'react';
import './App.css';

const list = [
  {
    title: 'React',
    url: 'http://facebook.github.io/react',
    author: 'Jordan Walke',
    num_comments: 3,
    points: 4, 
    objectID: 0,
  },
  {
    title: 'Redux',
    url: 'https://github.com/reactjs/redux',
    author: 'Dan Abramov, Andrew Clark',
    num_comments: 2,
    points: 5, 
    objectID: 1,
  }
]

const isSearched = searchTerm => item =>
  item.title.toLowerCase().includes(searchTerm.toLowerCase());

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: list,
      searchTerm: '',
    }
    this.onDismiss = this.onDismiss.bind(this);
    this.onSearchChange = this.onSearchChange.bind(this);

  }
  onDismiss(id) {
    const isNotID = item => item.objectID !== id;
    const updatedList = this.state.list.filter(isNotID);
    this.setState({ list: updatedList });

  }

  onSearchChange(event) {
    this.setState({ searchTerm: event.target.value });
  }

  render() {
    return (
      <div className="App">
        <form>
          <input
            type="text"
            onChange={this.onSearchChange}
          />
        </form>
        {this.state.list.filter(isSearched(this.state.searchTerm)).map(item =>
            <div key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>
              <span>
                <button onClick={() => this.onDismiss(item.objectID)} type="button">
                  Dismiss
                </button>
              </span>
            </div>
        )}
      </div>
    )
  }
}

export default App;

Answer 1

这是一种标准和正常的做法吗？

一般不会，但也有例外。（例如，将应用程序的整个状态保存在变量中）。

类和函数可以重用。

如果你的函数（或类）依赖于全局变量，则很难重用和测试。

底线是：尽可能避免使用。

Answer 2

在React中，如果你的例子中有一个虚假数据集列表，那就绝对正常了。您通常会使用import语法从其他文件导入它。但是为了更好地测试组件，最好避免导入外部库，而是将其作为参数传递。

Answer 3

这是可能的，但应谨慎使用。可以想象，如果每个人都使用全局变量，那么很容易就会发生名称冲突。此外，全局变量永远不会被垃圾收集，因此您也可能会浪费内存。

通常，如果您在JavaScript中编写框架，您将发布一个全局变量，该变量用作框架的“命名空间”：const int xs=640; // image resolution const int ys=480; color pixel[sz]; // image data const int sz=xs*ys; // image size int adr[sz],i,j; for (i=0;i<sz;i++) adr[i]=i; // ordered positions for (i=0;i<sz;i++) // shuffle them { j = random(sz); // pseudo-randomness with uniform distribution swap(pixel[i],pixel[j]); }，Rx，{{1} }，d3等。这些通常与框架本身的名称相同，因此不太可能发生冲突。然后在该对象内定义其他所有内容，例如$等等。

在Javascript中不将变量作为参数传递是正常的吗？

3 个答案: