空气质量数据分析与可视化：AIR项目指南-CSDN博客

本文链接：https://blog.csdn.net/weixin_34640289/article/details/144388263

简介：本文介绍了一个名为"AIR：消炎地图集"的JavaScript项目，该项目聚焦于通过数据可视化展示空气质量数据。这可能是一个涉及环境健康和气候的在线应用，使用JavaScript及相关技术栈实现交互式地图和动态内容更新。项目涉及前端框架、地图API集成、数据可视化技术、API交互、地理信息系统、响应式设计、异步编程、模块化打包工具、状态管理和测试调试等关键知识点。 AIR：消炎地图集

1. JavaScript技术基础

JavaScript 是现代网页开发的核心技术之一，它是一种高级的、解释执行的编程语言，通过它可以创建动态的内容、用户交互以及实现各种网络应用。在这一章中，我们将探讨JavaScript的基础知识，为后续更深层次的技术探讨奠定基础。

1.1 JavaScript编程基础

变量与数据类型 ：JavaScript 中变量使用 var、let 或 const 关键字声明，数据类型包括基本类型（如数字、字符串）和对象类型。
函数与作用域 ：函数是执行代码块的单元，作用域决定了变量访问的范围。
对象与原型链 ：对象是 JavaScript 的核心概念，原型链是对象之间的继承机制。

1.2 JavaScript 异步编程模式

回调函数 ：早期处理异步操作的简单方式，但容易造成回调地狱。
Promises ：提供了一种更优雅的方式处理异步操作，避免了嵌套和回调地狱。
Async/Await ：是 Promises 的语法糖，它使得异步代码看起来更像同步代码，更易于理解和维护。

1.3 DOM 操作与事件处理

DOM 操作 ：文档对象模型（DOM）允许程序和脚本动态地访问和更新文档的内容、结构和样式。
事件处理 ：JavaScript 事件模型允许为不同事件类型（如点击、加载）附加事件监听器。

通过本章的介绍，你将掌握JavaScript的核心概念、异步编程技术和DOM操作，为进一步学习前端开发打下坚实的基础。

2. 前端框架应用与地图API使用

在当今的互联网时代，随着用户对网页交互体验要求的不断提高，前端技术也迎来了飞速发展。前端框架作为提升开发效率和用户体验的重要工具，正成为每个前端开发者不可或缺的技能。本章节将深入探讨前端框架的应用，并介绍地图API在前端开发中的集成与应用。

2.1 前端框架应用概览

前端框架为开发者提供了结构化的开发模式，能够帮助我们快速构建用户界面并保持应用的可维护性。在选择前端框架时，需要根据项目的具体需求以及框架的社区支持、学习曲线、性能等因素来权衡。

2.1.1 框架选择标准与技术对比

选择合适的前端框架可以大幅度提高开发效率和产品质量。以下是选择前端框架时应考虑的因素：

社区支持和文档 ：一个活跃的社区和详尽的文档是框架可持续发展的保证。
学习曲线 ：对于新团队成员来说，学习成本低的框架更容易被接受。
性能：性能是用户体验的关键指标之一，性能优异的框架能够更快渲染页面。
适用场景 ：不同的框架适用于不同的场景。例如，React 适用于构建大型单页面应用，Vue 适合快速开发小型至中型项目。

以下是一些主流前端框架的技术对比：

| 特性/框架 | React | Vue | Angular | |----------------|-------------------|-------------------|------------------| | 组件化 | 强组件化 | 基于组件 | 基于模块 | | 数据绑定 | 单向数据流 | 双向数据绑定 | 双向数据绑定 | | 学习曲线 | 中等 | 低 | 高 | | 生态系统 | 强大 | 越来越丰富 | 成熟且全面 | | 移动端开发 | React Native | Weex, Nuxt.js | Ionic, NativeScript |

2.1.2 常见框架的实际应用场景

在不同的应用场景中，前端框架的选择也有所不同。以下是一些常见场景及推荐的框架：

大型企业级应用 ：Angular 常用于企业级应用，有着严格的代码规范和良好的测试支持。
需要快速开发的项目 ：Vue 相对轻量且易上手，非常适合初学者和中小型项目。
需要高性能的大型应用 ：React 在处理大型应用和复杂交互场景中表现出色，特别是结合了它的生态系统工具如Redux。

在实际应用中，不同框架往往根据具体需求和团队熟悉度进行选择。例如，React与Vue在社区支持、插件生态系统上各有千秋，选择哪个框架很大程度上取决于团队经验和项目需求。

2.2 地图API的集成与应用

地图API是前端开发中极为常见的功能，它可以集成到各种网页中，提供地理位置服务。集成地图API不仅可以增加应用的丰富性，还可以为用户提供实际的位置信息支持。

2.2.1 地图API的选择与集成步骤

地图API的选择往往取决于需求、费用、易用性等因素。目前比较流行的有Google Maps API、百度地图API、高德地图API等。这些API都提供了丰富的地图服务功能。

集成地图API通常包括以下几个步骤：

注册API服务提供商并获取API Key。
在项目中引入地图API的相关JS/CSS文件。
初始化地图对象，并设置其基本属性如中心点位置、缩放级别等。
根据需求添加地图标记、信息窗口等扩展功能。
调试并优化地图在不同设备上的表现。

2.2.2 实现地图基本功能与定制化扩展

集成地图API后，可以实现一系列基本功能，例如：

显示地图 ：在网页上显示基本的地图。
标记位置 ：在地图上添加自定义标记，代表一个具体位置。
路径规划 ：根据用户需求，计算两点之间的路径。
地图事件处理 ：响应用户与地图的交互，如点击、拖拽等事件。

对于定制化的扩展功能，可以考虑：

自定义样式 ：通过API提供的样式配置，可以调整地图的视觉样式。
地理围栏 ：设置一个地理区域，当用户进入或离开该区域时触发事件。
图层叠加 ：将不同的数据图层叠加在地图上，如热力图、交通状况图层等。

实际操作时，前端开发者需要详细阅读API提供商的文档，并根据API提供的接口进行编程实现。例如，使用Google Maps API时，你可能需要编写如下代码片段：

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: -34.397, lng: 150.644},
        zoom: 8
    });
    // 添加标记等其他代码
}

// 确保在HTML中有相应的<div id="map"></div>标签

代码逻辑解读 ： - 上述代码定义了一个 initMap 函数，该函数在页面加载时被调用。 - new google.maps.Map 创建一个地图实例，并设置其初始的中心点和缩放级别。 - HTML元素上必须有一个ID为 map 的 <div> 元素，用来承载地图。

参数说明 ： - {lat: -34.397, lng: 150.644} ：地图初始化时的中心点坐标，纬度为-34.397，经度为150.644。 - zoom: 8 ：设置地图初始缩放级别为8。

通过以上步骤，开发者可以集成地图API到自己的项目中，并根据需要实现各种功能。每种地图API都有其独特的特性和使用方式，开发者在实际开发时，需要结合具体的API文档进行详细的代码编写和调试。

结语

随着技术的不断演进，前端框架和地图API的选择与应用成为了前端开发中不可或缺的一部分。通过本章节的介绍，相信您对前端框架的应用有了更深刻的理解，并能够根据项目需求选择合适的地图API，并将其集成到您的网页中。下一章，我们将进一步探讨数据可视化技术与API集成，揭开数据与视觉呈现之间神奇的联系。

3. 数据可视化技术与API集成

数据可视化是一种重要的信息表达方式，它帮助人们将复杂的数据集转换为可视图表，以便更容易地理解和分析数据。随着信息技术的发展，数据可视化已经从简单的图表展示进化到高度复杂的交互式可视化。同时，API（应用程序编程接口）的集成在现代Web应用中扮演着重要角色，它允许开发者将外部数据和功能集成到自己的应用中。本章节将深入探讨数据可视化技术和API集成的应用实践。

3.1 数据可视化技术探索

3.1.1 可视化工具的选择与对比

选择合适的可视化工具对于制作高效的、美观的图表至关重要。目前市场上有多种数据可视化工具，包括开源库和商业软件。常见的数据可视化库有D3.js、Chart.js、Highcharts等。

D3.js 是一个基于Web标准的JavaScript库，它使用数据驱动文档的概念来动态地生成和操作DOM。D3.js功能强大，可以创建高度自定义的图表，但其学习曲线相对较陡峭。

Chart.js 是一个简单而直观的图表库，拥有多种图表类型，易于使用并且兼容性良好。它适合快速的图表开发，但是自定义的复杂度不如D3.js。

Highcharts 是一个成熟的商业图表库，它提供了丰富的图表类型和配置选项。Highcharts适合企业级应用，但需要支付授权费用。

在选择可视化工具时，需要考虑以下因素：

可视化需求的复杂程度
对于自定义和交互性的需求
学习和开发时间成本
长期的维护和支持

3.1.2 创造性数据展示的案例分析

数据可视化的高级应用包括交互式和可探索式的可视化，这类可视化通常包含丰富的用户交互功能，如缩放、过滤和动态显示。这种高级数据展示的一个经典案例是纽约时报的交互式新闻报道。

例如，在报道2016年美国总统选举时，纽约时报利用数据可视化技术创建了一个交互式地图。用户可以观看各个州的投票结果，还可以深入分析不同地区、不同人口群体的投票倾向。该地图通过滑动时间轴，展示出选举过程中的动态变化。

另一个例子是 Spotify 的年度回顾，它通过数据可视化让用户轻松回顾一年的听歌习惯。用户可以按时间、类型、艺术家等不同维度查看自己的听歌数据，这种可视化不仅美观，而且极具个性化。

实践应用

要实现类似纽约时报的交互式地图，可以使用D3.js。下面是使用D3.js实现的一个简单地图的代码片段和逻辑分析。

// 引入D3.js
<script src="https://d3js.org/d3.v5.min.js"></script>

// 定义SVG容器大小和投影
const width = 960;
const height = 600;
const projection = d3.geoMercator()
    .scale(100)
    .translate([width / 2, height / 2]);

// 创建SVG元素
const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// 载入并处理地理数据
d3.json("path_to_your_geojson_file.json").then(data => {
    const pathGenerator = d3.geoPath().projection(projection);
    svg.selectAll("path")
        .data(data.features)
        .enter().append("path")
        .attr("d", pathGenerator)
        .attr("fill", "#ccc")
        .attr("stroke", "#fff");
});

在这段代码中，我们首先引入了D3.js的库，并定义了SVG容器的大小和地理投影。接着创建了SVG容器，并使用 d3.json 异步加载了GeoJSON格式的地理数据文件。最后，我们创建了路径（path）元素来绘制地图。每个路径元素的 d 属性由路径生成器 pathGenerator 提供，它根据地理数据和投影计算得出。

这段代码仅作为一个基础例子，实际应用中可能需要更复杂的处理，如添加交互性、数据驱动的样式变化等。

3.2 API集成与数据交互

3.2.1 网络请求的处理与优化

现代Web应用需要通过网络请求从服务器获取数据。网络请求对于保证Web应用的动态性和响应性至关重要。在JavaScript中，通常使用 fetch API或 XMLHttpRequest （XHR）来发送和接收网络请求。

fetch API提供了一个更现代、灵活的方式来进行网络请求。它返回一个Promise，这意味着可以使用 .then() 和 .catch() 方法来处理异步逻辑。

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Fetch error:', error);
    });

在这个例子中，我们向指定的URL发送了一个GET请求。成功获取响应后，将其转换为JSON格式，然后在控制台中打印数据。

为了优化网络请求，可以采取以下措施：

使用缓存来减少重复请求。
使用 Service Workers 来管理请求的生命周期。
采用 Promise.all 来并行处理多个请求，以减少等待时间。
合并多个小文件请求为一个大文件请求，减少HTTP请求次数。

3.2.2 实现API数据的有效整合

有效整合API数据意味着可以将获取的外部数据无缝集成到应用中，以提高用户体验和应用性能。整合API数据时，应该考虑数据的安全性、准确性和实时性。

在JavaScript中，整合API数据通常涉及解析返回的JSON数据，并将其嵌入到DOM中。此外，可以使用现代前端框架的响应式数据绑定功能来动态显示数据。

例如，在一个单页应用中，使用React框架整合API数据可以如下实现：

import React, { useState, useEffect } from 'react';

function App() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(json => setData(json))
            .catch(error => console.error('Fetch error:', error));
    }, []);

    return (
        <div>
            {data.map(item => (
                <div key={item.id}>
                    <h2>{item.name}</h2>
                    <p>{item.description}</p>
                </div>
            ))}
        </div>
    );
}

export default App;

在这个React组件中，我们使用了 useState 和 useEffect 钩子。 useState 用于存储数据状态，而 useEffect 用于处理API调用和数据更新。当组件加载时， useEffect 钩子会触发API调用，并在成功获取数据后更新状态。状态更新会触发组件的重新渲染，并将数据动态显示在页面上。

通过本章节的介绍，我们探索了数据可视化技术的多种工具选择、比较和案例分析，并讲解了如何处理和优化API数据请求，以及如何有效地整合数据到应用中。在接下来的章节中，我们将继续深入了解地理信息系统（GIS）和响应式设计的实现，以及异步编程方法和模块化打包工具的运用。

4. 地理信息系统（GIS）与响应式设计实现

4.1 地理信息系统（GIS）基础

4.1.1 GIS的定义与应用领域

地理信息系统（GIS）是一个集成的集合体，它能够捕获、管理、分析和显示地理数据。GIS将这些地理数据结合成地图，以此反映地球上各种自然和人造现象的地理位置和分布特征。与传统地图不同的是，GIS能提供一个互动的平台，用户不仅可以查看数据，还可以进行查询、分析和修改。

GIS的应用领域极为广泛，包括但不限于城市规划、环境监测、资源管理、交通物流、灾害响应、公共安全和商业智能。例如，在城市规划领域，GIS可以帮助规划者对城市扩展进行模拟和分析；在环境监测方面，GIS用于追踪生态系统变化和污染分布。

4.1.2 GIS在前端开发中的角色

在前端开发中，GIS主要扮演着提供地图和空间信息展示的角色。通过集成GIS地图API，开发者能够在网页或应用中嵌入地图，展示特定地点的位置信息、路线规划、区域覆盖等空间数据。

这些功能的实现通常依赖于如Google Maps API、Mapbox、Leaflet等现代地图服务。它们提供了丰富的API接口，使得在前端实现地图的定制化展示、交互和数据叠加成为可能。

4.2 响应式设计的实现策略

4.2.1 媒体查询与弹性布局技术

响应式设计（Responsive Design）的目的是让网站或应用能够在不同大小的屏幕上都能提供良好的用户体验。媒体查询（Media Queries）是实现响应式设计的关键技术，它允许CSS根据不同的屏幕条件应用不同的样式规则。

例如，使用CSS的@media规则可以根据屏幕宽度变化调整网页布局：

/* 基础样式 */
.container {
  width: 100%;
  margin: 0 auto;
}

/* 屏幕宽度大于600px时 */
@media (min-width: 600px) {
  .container {
    width: 80%;
  }
}

/* 屏幕宽度小于600px时 */
@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}

弹性布局（Flexbox）是另一种重要的布局技术，它简化了容器内元素的排列方式，提高了布局的灵活性和效率。通过设置 display: flex ，开发者可以创建一个灵活的布局容器，其子元素可以自动调整大小和顺序。

4.2.2 设备无关的界面响应与适配

要实现真正的设备无关响应式设计，前端开发者需要考虑不同设备的屏幕尺寸、分辨率、像素密度等因素。除了CSS媒体查询和弹性布局，还可以使用视口（viewport）元标签来控制布局在移动设备上的表现：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个标签告诉浏览器，视口宽度应该与设备的物理宽度一致，并且初始缩放比例应该为1.0。通过这种设定，网页能够正确地适配不同尺寸的屏幕，避免了内容被不适当地缩放或裁切。

此外，基于JavaScript的解决方案，如RESS（Responsive Design + Server Side Components）策略，可以在服务器端根据不同设备的能力动态调整内容和布局，进一步优化了响应式设计的效果。

| 媒体查询示例 | 解释 | |-------------------|--------------------------------------------------------------| | @media (min-width: 768px) | 当屏幕宽度至少为768像素时，应用特定的CSS样式。 | | @media (orientation: landscape) | 当设备方向为横向时，应用特定的CSS样式。 | | @media (max-resolution: 150dpi) | 当屏幕分辨率不超过150dpi时，应用特定的CSS样式。 | | @media (hover: hover) | 当设备支持悬停（如鼠标或触摸屏）时，应用特定的CSS样式。 |

| 响应式设计策略 | 解释 | |-------------------|--------------------------------------------------------------| | 使用媒体查询 | 通过CSS媒体查询为不同的屏幕尺寸和设备特性应用相应的样式。 | | 弹性布局 | 利用Flexbox灵活地安排布局和内容，以适应不同屏幕。 | | 视口元标签 | 通过设置视口元标签控制网页的布局和缩放行为，以适应移动设备。| | JavaScript适配 | 使用JavaScript为不同的设备特性和屏幕尺寸调整网页布局和内容。 |

响应式设计是一个综合性的前端策略，它要求开发者从多个维度考量，包括但不限于上述的媒体查询、弹性布局、视口设置和JavaScript适配技术，以确保网页内容在各种设备和屏幕尺寸下都能保持良好的可用性和访问性。

5. 异步编程方法与模块化打包工具运用

5.1 异步编程的实现方式

5.1.1 异步编程的必要性与优势

异步编程是现代Web应用开发中不可或缺的一部分，特别是在涉及到网络请求、文件读写、数据处理等耗时操作时。在单线程的JavaScript环境中，异步编程允许我们执行这些操作而不会阻塞主线程，从而保持用户界面的响应性和流畅性。这种非阻塞的行为对于提供高性能、高效能的用户体验至关重要。

使用异步编程，开发者可以实现并行执行多个任务，而不必等待每个任务依次完成。这种并行性，加上事件循环的机制，让JavaScript能够处理如动画制作、实时通信等需要高时效性的任务。除此之外，异步编程还有助于避免因单个任务长时间运行而导致的整个应用冻结，这对于构建流畅且交互性强的前端应用至关重要。

5.1.2 Promises、Async/Await与回调地狱的解决方案

异步编程的传统方式包括使用回调函数，但这种方法很容易导致所谓的“回调地狱”，即回调函数嵌套层级过多，使得代码难以阅读和维护。为了避免这种情况，Promises和async/await作为ES6及以上版本中的解决方案被引入。

Promises

Promises提供了一个替代方案，它允许开发者编写更加顺序化的代码，并且它支持链式调用，这让错误处理变得更加容易。一个Promise代表一个最终会完成（或失败）的操作，并且返回一个值。

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据获取成功");
    }, 1000);
  });
}

getData().then((result) => {
  console.log(result); // 输出: 数据获取成功
}).catch((error) => {
  console.error(error);
});

Async/Await

async/await进一步简化了异步代码的编写。它允许以同步的方式编写异步代码，使代码更加清晰和易于理解。使用async声明的函数会返回一个Promise对象，await表达式则暂停函数执行，直到Promise被解决。

async function fetchData() {
  try {
    const result = await getData();
    console.log(result); // 输出: 数据获取成功
  } catch (error) {
    console.error(error);
  }
}

fetchData();

结合使用async/await和Promises，可以显著提升代码的可读性和可维护性，并且能够有效避免回调地狱的发生。

5.2 模块化与打包工具

5.2.1 模块化的概念与实践

模块化是将复杂系统分解为更好的可管理的块或模块的过程。在JavaScript中，模块化意味着我们可以将代码划分为可复用且彼此独立的组件。这不仅有助于避免全局作用域污染，还能提高代码的维护性和可扩展性。

在早期的JavaScript中，通过将代码封装在函数内来实现简单的模块化，但随着复杂度的增加，这种方式的弊端逐渐显露。现代JavaScript开发中，模块化的实践主要依赖ES6模块系统和各种模块打包工具，如Webpack、Rollup等。

ES6模块系统天然支持 import 和 export 语句，允许开发者明确指定需要导入和导出的内容，从而实现了更严格和标准的模块化。

// utils.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './utils';
console.log(add(1, 2)); // 输出: 3

通过这种方式，开发者可以清楚地看到每个模块所提供的功能，以及如何将它们集成到项目中。

5.2.2 常用打包工具的功能与选择

随着项目规模的增长，模块数量和依赖项也会随之增多，这就需要使用模块打包工具来将这些分散的模块合并、打包成可交付的静态文件。打包工具还能通过各种优化手段，比如代码压缩、树摇等，来减小文件体积、提升加载速度。

Webpack

Webpack是一个功能强大的模块打包工具，支持多种模块类型（如CommonJS、AMD、ES6模块）和资源类型（如图片、CSS、Sass等）。它的核心概念是入口起点(entry point)和插件系统(plugins)。通过配置文件，开发者可以指定入口文件，并定义一系列的加载器(loaders)和插件(plugins)，Webpack将解析项目依赖关系，并生成一个或多个包。

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  }
};

Rollup

与Webpack相比，Rollup专注于ES模块打包，并且在打包大型应用时提供了更为优化的代码拆分机制。Rollup会尽量减少代码的重复，通过静态分析，Rollup可以打包并导出单个文件中所有需要的依赖项，这也是它特别适合用于库和框架开发的原因。

// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'bundle.js',
    format: 'es'
  }
};

根据项目需要和资源类型的不同，开发者可以选择合适的打包工具。例如，对于大型应用，可能更倾向于Webpack的丰富插件生态；而对于库或框架，Rollup的代码优化能力则是一个更好的选择。

6. 应用状态管理与测试调试实践

6.1 应用状态管理的策略

应用状态管理是现代前端开发中的关键组成部分，特别是在复杂单页应用（SPA）中。状态管理策略的有效实施，可确保应用拥有可预测、可维护的全局状态。以下内容将探讨状态管理的必要性，常见问题以及流行库如Flux与Redux的应用对比。

6.1.1 状态管理的必要性与常见问题

在没有适当状态管理的情况下，随着应用规模的增长，代码会迅速变得复杂且难以跟踪，导致出现“状态地狱”。这将使应用难以测试、调试和维护。良好的状态管理策略应该提供以下功能：

Predictability（可预测性） : 应用的任何状态变化都应该可预测且可跟踪。
Scalability（可扩展性） : 状态管理应该能够支持应用从小到大的扩展。
Maintainability（可维护性） : 状态的变化应该是集中且明确的，方便后续的维护工作。

6.1.2 Flux与Redux的应用与比较

Flux和Redux是解决复杂状态管理问题的流行方案。它们基于单向数据流原则，通过明确分离动作（actions）、状态（state）和视图（view）来简化状态的管理。

Flux : 由Facebook开发，它将数据流组织为一个单向循环：actions→dispatchers→stores→views→actions。这样可以确保数据的一致性和UI的更新。
Redux : 是Flux的扩展和优化，它基于三大原则：
单一数据源 : 整个应用的状态存储在一颗称为store的树状结构中。
State是只读的 : 唯一改变状态的方法是触发一个action，action是一个描述发生了什么的普通对象。
使用纯函数来修改 : Reducers是纯函数，它们根据前一个state和action来计算并返回新的state。

两者的对比：

| 特性/库 | Flux | Redux | |---------------|-------------------------------------------|-------------------------------------| | 应用复杂度 | 中等至高级，适合大型应用 | 适用所有复杂度级别 | | 学习曲线 | 较陡峭，需要理解dispatcher的角色 | 平缓，结构简单 | | 性能 | 较好，但有多个stores可能导致性能问题 | 高效，单一store和纯函数简化了更新流程 | | 测试 | 困难，需要模拟dispatcher | 容易，因为是纯函数 | | 社区和资源 | 较少，但持续增长 | 大量资源，非常活跃 |

为了进一步说明，下面是一段简单的Redux实践示例代码：

// 引入必要的模块
import { createStore } from 'redux';

// 定义reducer，一个根据action返回新state的纯函数
const initialState = { count: 0 };
function counter(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// 创建store
const store = createStore(counter);

// 订阅store更新
store.subscribe(() => console.log(store.getState()));

// 派发一个action
store.dispatch({ type: 'INCREMENT' });
// 输出: { count: 1 }

// 派发另一个action
store.dispatch({ type: 'DECREMENT' });
// 输出: { count: 0 }