元编程的前世今生：从$和?探究Angular和Redux的底层秘辛

前端

2024-01-31 16:20:54

少年，你渴望元编程的力量吗？——symbol

在Angular和Redux框架中，经常会看到$开头或者?开头的变量。这些变量是比较底层的，我们一般不会直接使用它们。但是，了解这些变量的用途和作用，对于理解框架的底层原理是非常有帮助的。

在Angular框架中，开头变量通常是与作用域相关的。例如，scope变量代表当前的作用域，rootScope变量代表根作用域，http变量是用来发送HTTP请求的。这些变量对于构建Angular应用程序非常重要。

在Redux框架中，?开头变量通常与中间件相关。例如，?logger变量是一个用来记录Redux状态改变的中间件，?thunk变量是一个用来支持异步操作的中间件。这些变量对于扩展Redux框架的功能非常有用。

除了Angular和Redux框架之外，在其他编程语言和框架中，也经常会看到$开头或?开头的变量。这些变量通常都具有特殊的功能，了解它们的用途和作用，对于理解底层原理非常有帮助。

下面，我们就来具体了解一下$开头和?开头变量在Angular和Redux框架中的具体用法。

Angular中的$开头变量

在Angular框架中，开头变量通常是与作用域相关的。例如，scope变量代表当前的作用域，rootScope变量代表根作用域，http变量是用来发送HTTP请求的。

$scope变量

scope变量代表当前的作用域。它是一个JavaScript对象，里面包含了当前作用域内所有的变量和函数。我们可以通过scope变量来访问和操作这些变量和函数。

例如，以下代码将向当前作用域中添加一个名为message的变量，并将其值设置为“Hello, world!”。

$scope.message = "Hello, world!";

然后，我们就可以在当前作用域内的任何地方访问message变量。例如，以下代码将把message变量的值输出到控制台。

console.log($scope.message); // "Hello, world!"

$rootScope变量

rootScope变量代表根作用域。它是Angular应用程序的根作用域，所有的其他作用域都是它的子作用域。我们可以通过rootScope变量来访问和操作根作用域内的所有变量和函数。

例如，以下代码将向根作用域中添加一个名为message的变量，并将其值设置为“Hello, world!”。

$rootScope.message = "Hello, world!";

然后，我们就可以在应用程序的任何地方访问message变量。例如，以下代码将把message变量的值输出到控制台。

console.log($rootScope.message); // "Hello, world!"

$http变量

http变量是用来发送HTTP请求的。我们可以通过http变量来向服务器发送GET、POST、PUT、DELETE等请求。

例如，以下代码将向服务器发送一个GET请求，并把服务器返回的数据输出到控制台。

$http.get('/api/users').then(function(response) {
  console.log(response.data);
});

Redux中的?开头变量

在Redux框架中，?开头变量通常与中间件相关。例如，?logger变量是一个用来记录Redux状态改变的中间件，?thunk变量是一个用来支持异步操作的中间件。

?logger变量

?logger变量是一个用来记录Redux状态改变的中间件。它会在每次Redux状态改变的时候，把状态改变的信息输出到控制台。

例如，以下代码将使用?logger变量来记录Redux状态改变的信息。

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';

const store = createStore(reducer, applyMiddleware(logger));

然后，每次Redux状态改变的时候，控制台都会输出状态改变的信息。

?thunk变量

?thunk变量是一个用来支持异步操作的中间件。它允许我们在Redux action中使用异步函数。

例如，以下代码将使用?thunk变量来实现一个异步的action。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(reducer, applyMiddleware(thunk));

store.dispatch((dispatch, getState) => {
  setTimeout(() => {
    dispatch({ type: 'INCREMENT_COUNT' });
  }, 1000);
});