快捷導(dǎo)航

JS設(shè)計(jì)模式之單例模式（一）

更新時(shí)間：2017年09月29日 10:58:45 作者：kMacro

這篇文章主要為大家詳細(xì)介紹了JS設(shè)計(jì)模式之單例模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

命名空間

單例模式是JavaScript中最常見的一種模式，通過這種模式可以為我們提供一個(gè)命名空間，例如jQuery庫的命名空間為jQuery或$。命名空間的使用是為了讓代碼更加整潔，在多人協(xié)作開發(fā)的情況下，不同的人定義的變量很有可能重復(fù)，此時(shí)就需要使用命名空間來約束每個(gè)人定義的變量，使相同名稱的變量放在不同的命名空間中，避免相互干擾。例如：

// A程序員的命名空間
var A = {
  get: function(id){
    return document.getElementById(id);
  }
  css: function(id,key,value){
    get(id).style[key] = value;
  }
}
// B程序員的命名空間
var B = {
  get: function(className){
    return document.getElementByClassName(className)[0];
  }
  css: function(className,key,value){
    get(className).style[key] = value;
  }
}

A、B兩個(gè)命名空間中都有一個(gè)get方法和一個(gè)css方法，用于元素獲取和元素樣式修改，不同的是A是通過id來獲取元素，而B是通過class來獲取元素，通過命名空間，可以使這些相同名稱的方法共存，使用時(shí)指定相應(yīng)的命名空間即可。

模塊化

JavaScript中單例模式除了定義命名空間之外，還可用于管理代碼庫的各個(gè)功能模塊。例如：

google.dom.addClass       // 添加元素類
google.dom.append        // 插入元素
google.event.stopPropagation  // 阻止事件冒泡
google.event.preventDefault   // 阻止默認(rèn)行為
google.string.trim       // 去除字符串首尾空格
google.string.encodeHTML    // 將字符串進(jìn)行HTML編碼

以上各個(gè)模塊都位于google命名空間下，每個(gè)模塊都有屬于自己的方法，使用時(shí)只需按照需求調(diào)用特定功能模塊下對(duì)應(yīng)的方法即可。

常量

JavaScript中并沒有final、static這類關(guān)鍵字用來定義常量，但JavaScript非常靈活，通過常量只能訪問不能修改這一特點(diǎn)，我們可以將變量保存在函數(shù)內(nèi)部，并且只提供獲取變量的方法，不提供設(shè)置變量的方法，通過閉包的方式使函數(shù)執(zhí)行一次并返回相應(yīng)的訪問方法對(duì)象，最后將這個(gè)對(duì)象放在全局空間中作為常量單例對(duì)象使用。例如：

var Color = (function(){
  // 私有變量
  var color = {
    'RED': '#ff0000',
    'YELLOW': '#ffff00',
    'BLUE': '#0000ff'
  }
  // 返回訪問方法對(duì)象
  return {
    // 常量獲取方法
    get: function(name){
      return color[name] ? color[name] : null;
    }
  }
})();

var color = Color.get('BLUE');
console.log(color);  // #0000ff

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: