Javascript 之封装（Package）

Javascript 之封装（Package）

在编程中，封装是重要的概念之一，它可以避免代码的重复，提高代码的可维护性和可复用性。本篇教程将介绍Javascript中的封装，重点讲解在Javascript中如何将多个函数和变量进行封装打包，以便于代码的复用和维护。

一、Javascript中的私有变量和私有函数

Javascript中并不存在真正意义上的私有变量和私有函数，因为在Javascript中，所有的变量和函数默认都是公开的（public）。但是通过某些技巧和规范，我们可以模拟实现私有变量和私有函数的效果。

1.使用函数作用域实现私有变量和私有函数

在Javascript中，函数作用域是一个非常重要的概念，我们可以使用函数作用域来模拟实现私有变量和私有函数的效果。下面是一个示例代码：

var Module = (function() {
  var privateVar = '私有变量';
  function privateFunc() {
    console.log('私有函数');
  }
  return {
    publicVar: '公共变量',
    publicFunc: function() {
      console.log('公共函数');
      privateFunc();
    }
  };
})();

在上面的代码中，我们采用了一个自调用的匿名函数，这个函数将返回一个包含两个属性的对象，其中publicVar和publicFunc是公共变量和公共函数，可以被外部访问。而privateVar和privateFunc则是私有变量和私有函数，只能在模块内部被访问。

2.使用闭包实现私有变量和私有函数

除了使用函数作用域之外，还可以使用闭包来模拟实现私有变量和私有函数的效果。下面是一个示例代码：

var Module = (function() {
  var privateVar = '私有变量';
  function privateFunc() {
    console.log('私有函数');
  }
  return function() {
    return {
      publicVar: '公共变量',
      publicFunc: function() {
        console.log('公共函数');
        privateFunc();
      }
    };
  };
})();

在上面的代码中，我们同样采用了一个自调用的匿名函数，这个函数返回的是另一个函数，而这个函数返回的仍然是一个包含公共变量和公共函数的对象。由于这个函数是在自执行函数内部定义的，所以它可以访问自执行函数内部定义的私有变量和私有函数。

二、Javascript中的模块化编程

在Javascript中，模块是一个相对独立的代码块，它可以包含变量、函数、对象等多种类型的数据。模块化编程在Javascript中尤为重要，因为Javascript是一门弱类型语言，代码的可维护性和可复用性都比较差，而模块化编程可以很好地解决这个问题。

1.CommonJS规范

在Javascript中，有很多种模块化编程方式，其中比较常见的一种就是CommonJS规范。CommonJS规范的核心思想是在服务器端广泛使用的模块化规范的JavaScript版本。

在CommonJS规范中，每个模块都是一个单独的文件，文件内部可以使用require和exports这两个全局变量来实现模块之间的依赖和调用。下面是一个示例代码：

// moduleA.js
var a = '这是moduleA.js文件中的变量a';
var b = '这是moduleA.js文件中的变量b';
function func() {
    console.log('这是moduleA.js文件中的函数func');
}
exports.a = a;
exports.func = func;

// moduleB.js
var moduleA = require('./moduleA.js');
console.log(moduleA.a); // 这是moduleA.js文件中的变量a
moduleA.func(); // 这是moduleA.js文件中的函数func

在上面的代码中，moduleA.js文件中定义了变量a、变量b和函数func，并通过exports将这三个变量和函数公开出来。moduleB.js文件中通过require引入了moduleA.js文件，可以直接访问moduleA.js文件中的公开变量和函数。

2.AMD规范

除了CommonJS规范之外，还有一种比较常见的模块化规范就是AMD（Asynchronous Module Definition）。AMD规范是在浏览器端广泛使用的模块化规范，它与CommonJS规范非常类似，但是更加适合用于浏览器端的模块化开发。

在AMD规范中，每个模块也是一个独立的文件，文件内部定义了一个或多个模块，并使用define函数将模块公开出去。下面是一个示例代码：

// moduleA.js
define([], function() {
  var a = '这是moduleA.js文件中的变量a';
  var b = '这是moduleA.js文件中的变量b';
  function func() {
      console.log('这是moduleA.js文件中的函数func');
  }
  return {
    a: a,
    func: func
  };
});

// moduleB.js
define(['./moduleA.js'], function(moduleA) {
  console.log(moduleA.a); // 这是moduleA.js文件中的变量a
  moduleA.func(); // 这是moduleA.js文件中的函数func
});

在上面的代码中，moduleA.js文件中定义了变量a、变量b和函数func，并使用return关键字将其中的公开变量和函数公开出来。moduleB.js文件中则通过define函数引入了moduleA.js文件，可以直接访问moduleA.js文件中的公开变量和函数。

三、示例代码

下面是一个封装了常用工具函数的模块，其中包括了两个公共函数和一个私有函数：

var Utils = (function() {
  var formatNumber = function(n) {
    n = n.toString();
    return n[1] ? n : '0' + n;
  };

  return {
    formatTime: function(timestamp) {
      var date = new Date(timestamp);
      var year = date.getFullYear();
      var month = formatNumber(date.getMonth() + 1);
      var day = formatNumber(date.getDate());
      var hour = formatNumber(date.getHours());
      var minute = formatNumber(date.getMinutes());
      return year + '/' + month + '/' + day + ' ' + hour + ':' + minute;
    },
    randomNumber: function(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  };
})();

console.log(Utils.formatTime(1609792497)); // 2021/01/05 10:21
console.log(Utils.randomNumber(1, 100)); // 随机数1~100之间的整数

在上面的代码中，我们封装了一个Utils模块，其中包含了一个公共函数formatTime和一个公共函数randomNumber，分别用于将时间戳格式化为标准时间和生成指定范围内的随机整数。这两个函数都是通过一个自调用的匿名函数实现的，其中formatNumber是一个私有函数，只能在模块内部被调用。

下面是一个采用AMD规范实现的模块，它引用了jQuery和underscore两个外部库，并返回一个全局变量：

define(['jquery', 'underscore'], function($, _) {
  var exports = {
    name: 'test',
    version: '1.0.0',
    init: function() {
      console.log('初始化模块');
    },
    test: function() {
      console.log('测试模块');
    }
  };
  window.Module = window.Module || {};
  window.Module['test'] = exports;
  return exports;
});

在上面的代码中，我们封装了一个test模块，其中引用了外部库jQuery和underscore，并定义了一个包含name、version、init和test四个属性的模块。在最后，我们将这个模块通过window.Module对象挂载到全局变量中，以便其他模块可以直接访问。同时，我们也将这个模块作为define函数的返回值，以便其他模块可以通过test名称引用到这个模块。