2022年8月31日：面向初学者的 web 开发--使用 JavaScript 中的函数创建模块化代码（没看懂）

本文链接：https://blog.csdn.net/DXB2021/article/details/126631213

函数是要创建的任何应用程序的构建基块。利用函数，可以创建命名的、可重用的代码节，以帮助使其更易于阅读和维护。此模块介绍函数的核心概念。

简介

当我们考虑编写代码时，我们总是要确保代码是可读的。虽然这句话听起来有悖直觉，但代码的读取次数确实比写入次数要多得多。

开发人员工具箱中确保代码的可维护性的一个核心工具是函数。从本质上来说，函数是可以按需运行的代码块。此代码可能会执行任务（例如转到网站的其他部分）或计算值（如两个数字之和）。

函数概述

函数是编写代码的关键构建基块。函数是可重用的代码行集合，可在程序中执行某些操作。

函数非常适合需要多次执行同一任务的情况。可以将逻辑集中在一个位置，而不是在多个位置重复逻辑（这会使得以后难以更新代码）。这样，每当需要再次执行操作时，就可以调用它。甚至可以从其他函数调用函数！

同样重要的是能够命名函数。尽管命名函数看似简单，但名称提供了记录代码节的快速方法。可以将命名视为按钮上的标签。

创建和调用函数

函数接受一些输入，然后返回通过某种方式转换输入的输出。

函数由三个不同的组件组成：

函数主体是调用函数时运行的代码块。
参数是传递给函数的输入的另一个名称。
最后，还有一个返回值，即函数的输出。

编写函数时，参数和返回值是可选的。

每当你想要调用该函数时，可以使用函数的名称，后跟一对括号 (())。值得注意的是，你可以在决定调用函数之前或之后定义函数。无论哪种方式，JavaScript 都将找到该函数，只要它在调用范围内。

最佳实践

创建函数时，请记住几个最佳做法：

使用描述函数用途的描述性名称。例如，名称 displayGreeting 可以清楚地表明函数的用途是显示问候语。对于执行相同任务的函数而言，类似于 greet 的名称有点含糊不清。它可能会显示问候语，但也可能执行不同的操作。
使用 camelCasing 合并单词。若要使用 camelCase 进行编写，请将变量或函数的第一个词保持为小写，并大写每个后续单词。由于函数和变量名称不能包含空格，因此 camelCasing 使代码中的单词更易于阅读。例如，displayGreeting 比 displaygreeting 更易于阅读。
使函数集中于特定任务。这样做不仅会使函数在整个程序中更易于重用，还可以更轻松地调试代码。如果遇到函数未执行你想要执行的任务的问题，则你知道问题包含在该函数中。
使用注释文本批注代码，并描述函数的作用。为提高代码的可读性，请在注释中包含每个函数任务的简短说明。可以通过键入一个双斜杠 (//)，然后键入说明来创建注释。开始新行时，注释结束。

函数参数

为了使函数可重用性更高，将经常需要向其中传递信息。此类型的输入称为参数。参数有时也称为自变量，是发送到函数的其他信息。

参数在函数的定义中列出，并包含在括号 (()) 中。可以有多个以逗号分隔的参数，如下所示：

function name(param, param2, param3) {

}

默认值

可以通过添加更多参数，使函数更加灵活。设置值的方式与设置变量值的方式大致相同。

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

调用函数时，可以决定是否为称呼设置一个值，如下所示：

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

返回值

如果函数应返回某些内容，则使用 return 关键字，通常后跟值或对要返回的内容的引用。不过，也可以单独使用 return 来退出函数。

创建函数

创建示例页面

首先，在 Visual Studio Code 中创建一个新页面。

打开 Visual Studio Code 终端或命令窗口。

若要创建新目录并对其进行更改，请运行以下命令之一：

# Windows
md functions && cd functions

# macOS or Linux
mkdir functions && cd functions

若要在 Visual Studio Code 中打开新目录，请运行以下命令：

code .

在“资源管理器”窗格中，将鼠标悬停在“函数”上，然后选择“新建文件”图标。

添加代码以显示消息

现在可以添加代码以显示消息。

在 index.html 文件中，以下 HTML 代码来创建 HTML 文件的核心：

<!DOCTYPE html>
<html>
<head>
    <title>Message</title>
</head>
<body>
    <script>
        // TODO: Add hello code

        // TODO: Add setTimeout code

    </script>
</body>
</html>

在 index.html 文件中，在注释行 //TODO: Add hello code 下方，通过添加以下代码来创建一个函数。

函数采用一个名为 name 的参数，并返回一个字符串，其中显示“Hello”和提供该输入的人员的姓名：

// TODO: Add hello code
function getMessage(name) {
    return 'Hello, ' + name + '...';
}

在刚才添加的代码中的右大括号 (}) 下方，添加以下代码以获取消息，并使用 document.write 将其显示在网页上。

const message = getMessage('Ornella');
document.write(message);

选择“文件”>“保存”来保存文件。

查看页面

在 Visual Studio Code 中，通过选择 Ctrl+Shift+P (Windows) 或 Cmd+Shift+P (Mac) 打开“命令面板”。

在“命令面板”中，通过键入“Live Server”打开 Live Server，然后选择“Live Server: 使用 Live Server 打开”。

在浏览器中打开

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>Message</title>
</head>
<body>
    <script>
        // TODO: Add hello code
        function getMessage(name) {
            return 'Hello, ' + name + '...';
        }
        const message = getMessage('Ornella');
        document.write(message);

        // TODO: Add setTimeout code

    </script>
</body>
</html>

匿名函数

可以通过使用函数名称并传入任何适当的参数来按需调用函数。

回调简介

从本质上来说，回调是将函数作为参数传递给另一个函数的方式。此参数的行为方式与任何其他参数（如字符串或数字）的行为方式相同，不同之处在于它可以被调用，因为它是一个函数。

回调经常用于各种框架和库中，用于指示当某些事情发生或完成时要运行的代码。

使用回调

回调是一种常规函数，你可以像创建过去编写的任何函数一样创建回调。

setTimeout 回调是允许创建计时器的内置函数。计时器完成后，它将调用作为第一个参数传入的函数。第二个参数指示在调用函数之前要等待的毫秒数。

如果要设置 3 秒超时，并且代码在运行完成后显示“完成!”，你可以使用 setTimeout，如下所示：

// timer value is in milliseconds
setTimeout(displayDone, 3000);

匿名函数

匿名函数是没有名称的函数。匿名函数的行为方式与常规函数相同，它们也是开发人员通常设置回调的方式。

setTimeout(
    function() { // anonymous function
        console.log('Done!');
    },
    3000 // 3000 milliseconds (3 seconds)
)

箭头函数

箭头函数或胖箭头函数是创建匿名函数的一种略有不同的方式。箭头函数使用 => 运算符指示函数主体的开头。

setTimeout(
    () => { // anonymous function
        console.log('Done!');
    },
    3000 // 3000 milliseconds (3 seconds)
)

创建匿名函数

完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>Message</title>
</head>
<body>
    <script>
        // TODO: Add hello code
        function getMessage(name) {
            return 'Hello, ' + name + '...';
        }
        const message = getMessage('Ornella');
        document.write(message);

        // TODO: Add setTimeout code
        setTimeout(
            () => { document.write('...Hello again!')},
            2000
        );
    </script>
</body>
</html>