SAP Fiori开发中的JavaScript基础知识12 - 闭包，模块模式，回调函数

1. 前言

本文将介绍JavaScript中几个高阶的知识点：闭包，模块和回调。

2. 闭包

在JavaScript中，闭包是一个非常强大的特性，它允许函数记住并访问它的词法作用域，即使它在词法作用域之外执行。

简单来说，当你在一个函数内部定义另一个函数时，内部的函数会记住外部函数的环境。即使外部函数已经完成了执行，内部函数仍然可以访问和操作外部函数的变量。这就是闭包。

代码示例：

function outerFunction() {var count = 0;function innerFunction() {count++;console.log(count);}return innerFunction;
}var counter = outerFunction();
counter(); // 输出: 1
counter(); // 输出: 2

在这个例子中，outerFunction定义了一个变量count和一个函数innerFunction。innerFunction可以访问和修改count变量。即使outerFunction已经返回了innerFunction并完成了执行，innerFunction仍然可以访问count变量。

闭包在模块模式中非常有用。

3. 模块模式

3.1 概述

JavaScript 的模块模式（Module Pattern）是一种结构和组织代码的方式，它提供了一种将变量和函数封装在私有作用域中的方法，同时只暴露出需要公开的部分。这种模式可以帮助我们减少全局变量的使用，避免命名冲突，提高代码的可维护性。

模块模式通常使用立即执行函数表达式（Immediately-Invoked Function Expression，IIFE）来创建。因为IIFE 可以创建一个新的作用域，防止模块内部的变量和函数污染全局作用域。

3.2 经典模块模式

经典的模块模式通常会有如下特征：

使用立即执行函数IIFE进行封装
返回值为一个对象
返回的函数对包装的模块函数具有闭包(返回的函数能够访问包装模块函数的作用域)
调用方可以向IIFE内部传递参数（通过暴露的方法）
通过变量可以访问模块实例（若需要多实例，则直接使用函数而非IIFE）


var MyModule = (function () {let sMyName;function init(sName) {sMyName = sName;}function printUserName() {console.log(sMyName);}return{ init: init,dispalyUserName: printUserName}
})();MyModule.init("Module Pattern");
MyModule.dispalyUserName();

在这个设计中，MyModule 是一个立即执行的函数，它返回一个对象，这个对象可包含公开的变量和函数。sMyName变量和 init以及printUserName方法是私有的，只能在 myModule内部访问。返回对象中的init 和 displayUserName方法是公开的，可以在 myModule 外部访问（返回对象对封装函数具有闭包）。

3.3 简短的返回参数设计

在模块模式中，也可以考虑直接在返回的对象中声明要暴露的函数。这种方式可以让函数整体变得更加简短，但缺点在于，这些函数没办法在模块内部复用了。

var MyModule = (function () {let sMyName;return {init: function (sName) {sMyName = sName;},dispalyUserName: function () {console.log(sMyName);}}
})();MyModule.init("Module Pattern");
MyModule.dispalyUserName();

3.4 将返回参数也封装到独立的对象中

这种设计思路是对3.3设计思路的一个增强，也即将要返回的对象也声明在模块函数中，这样返回对象中所定义的函数在模块函数中也是可以复用的。

var MyModule = (function () {let sMyName;let PUBLIC_API = {init: function (sName) {sMyName = sName;},dispalyUserName: function () {console.log(sMyName);}}return PUBLIC_API;})();MyModule.init("Module Pattern");
MyModule.dispalyUserName();

4. 异步模块定义

AMD（Asynchronous Module Definition）是一个在JavaScript中用于异步加载模块的规范。它允许开发者定义模块和依赖，并且不需要等待这些模块和依赖全部加载完成后才能开始执行。这种方式可以提高代码的加载和执行效率。

AMD是经典模块模式的在依赖管理角度的一个增强。实例化的过程交由framework完成。

异步模块定义通常由第三方库提供，例如SAP UI5的库就是使用的这种方式。

AMD的主要用法是通过define函数来定义模块，require函数来加载模块。

以下是一个简单的AMD代码示例：

// 定义一个模块
define('module1', ['dependency1', 'dependency2'], function(dependency1, dependency2) {// 这里是模块的代码var module1 = function() {// 使用依赖dependency1.doSomething();dependency2.doSomething();};// 返回模块的公开接口return {module1: module1};
});// 加载一个模块
require(['module1'], function(module1) {// 这里是使用模块的代码module1.doSomething();
});

在上述代码中，define函数接收三个参数：模块的名称（可选）、模块的依赖（可选）和一个工厂函数。工厂函数接收依赖作为参数，并返回模块的公开接口。

5. 回调

在JavaScript中，回调（Callback）是一个函数，它作为参数传递给另一个函数，并在该函数完成后被调用。回调函数常用于处理异步操作，例如读取文件、获取数据等。

这是一个基本的回调函数示例：

function doHomework(subject, callback) {console.log(`Starting my ${subject} homework.`);callback();
}doHomework('math', function() { console.log('Finished my homework');} );

在这个例子中，doHomework函数接受两个参数：一个是主题subject，另一个是回调函数callback。当doHomework函数完成它的工作（打印出一条消息）后，它调用回调函数，回调函数打印出"Finished my homework"。

回调函数在处理异步操作时特别有用。异步操作是指可能不会立即完成的操作，例如读取文件、下载数据等。使用回调函数，你可以在这些操作完成后执行一些代码。

例如，以下是一个使用回调函数下载数据的例子：

function downloadData(url, callback) {// 假设我们在这里下载数据，这可能需要一些时间var data = "some data from " + url;// 当数据下载完成后，我们调用回调函数callback(data);
}// 定义回调函数
function callback(data) {console.log('I received data: ' + data);
}//调用下载数据的函数
downloadData('http://example.com', callback);