JavaScript单例模式：从基础到惰性加载的实现原理

本文通过具体实例，详细解析JavaScript面向对象编程中单例模式的原理及其多种实现方法，供读者参考学习。

1.单例模式概述

参考百度百科对单例模式的定义：

单例模式的核心在于确保一个类仅存在一个实例，并由该自行负责实例化，向整个系统提供访问入口。此类被称为单例类。

在JavaScript环境中，由于“一切皆对象”且缺乏严格的类定义机制，无法像Java、C++或PHP那样通过特定方法返回实例。因此，JavaScript中的单例模式旨在创建一个“不可被多次实例化”的对象，即确保该对象在整个生命周期中仅被实例化一次。

2.简单单例模式：

对于只需实例化一次的对象，可以直接采用“对象字面量”的方式进行定义：

var singleton = {
  attribute:'',
  method:function(){}
}

这种定义方式生成的对象，无法通过 `new singleton` 的方式再次生成新实例（因为其不存在 `prototype` 和 `constructor` 属性）。

3.包含私有成员的单例模式：

若参考此前关于类成员的讲解，我们可以利用闭包来实现。既然涉及闭包，必然需要函数及其返回值，因此单例模式的定义可改进如下：

var singleton = function(){
  var private_attribute = '';
  functioin private_method(){}
  return {
   public_attribute:'',
   public_method:function(){}
  };
}

是否还记得匿名函数？它在闭包使用中十分常见。改进后的代码如下：

var singleton = (function(){
  var private_attribute = '';
  functioin private_method(){}
  return {
   public_attribute:'',
   public_method:function(){}
  };
})();

4.惰性加载（lazy loading,延迟加载）单例模式

前文第2、3节所述的单例模式，在定义时即创建实例，这可能导致内存浪费。如何实现“使用时才创建”（即lazy loading，常用于图片延迟加载）？所谓惰性加载，即先定义结构，在特定时刻才创建对象。因此必须借助函数。在Java或PHP中，单例通常通过静态方法创建；同理，我们可改进闭包形式的定义：

var singleton = (function(){
  var unique;
  function getinstance(){
    if(!unique){
      unique = construct();
      return unique;
    }
  }
  function construct(){
    var private_member;
    function private_method(){}
    return {//这里才是真正的单例对象
      public_member:'',
      public_method:function(){}
    };
})();

调用单例对象的方法如下：

singleton.getinstance().publicmethod();

此时，只有在调用方法或引用属性时，才会真正创建 `unique` 对象。虽然实现了延迟加载，但使用方式相对繁琐：）

5.简单mvc代码风格

在此分享一种简单的JavaScript编码风格。尽管JS主要用于前端，但从逻辑结构上，仍可将其内容划分为MVC（Model、Controller、View）三部分（关于MVC概念可参考百度或Google）。在编写页面JS代码时，我会采用如下结构：

//函数封装在此
var controller = {
  init:function(){}
};
//页面相关内容封装在此
var view = {
  table:{},
  banner:{},
  foot:{}
};
//数据相关内容封装在此
var model = {
  table_data:{}
}

在页面 `onload` 事件中调用 `controller.init()` 以完成初始化工作（包括数据加载、页面渲染、事件监听等）。这样做的目的是将相似逻辑集中组织，便于查找和修改。目前这只是一个雏形，期望在研读《javascript设计模式》后，能构建出一个轻量级的模型^_^

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。