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 经典模块模式

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

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

在这个例子中，downloadData函数接受一个URL和一个回调函数。它模拟下载数据，这可能需要一些时间。当数据下载完成后，它调用回调函数，并将数据作为参数传递给回调函数。回调函数接收数据，并打印出一条消息。

6. 小结

本文介绍了JavaScript中闭包，模块和回调的概念，并给出了示例代码。希望对你有帮助！