javascript中的单体模式

2024-04-27 15:03:48

字体：大中小

来源：转载

供稿：网友

单体(singleton)模式是js最有用的模式之一。在seajs的require和es6的import出现之前，单体模式用来划分命名空间，减少全局变量数目，也可以在一种名为分支的技术中用来封装浏览器差异。

单体的基本结构

最简单的单体是一个对象字面量，通过一个唯一变量Singleton存储对象引用

var Singleton = { attribute1: true, attribute2: 10, method1: function(){ }, method2: function(){ } }

划分命名空间

单体对象由两部分组成：包含着方法和属性成员的对象，以及用于访问它的变量。这个变量通常是全局性的(如上文的Singleton对象)。命名空间是js的重要工具，在js中什么都可以被改写

function a(){ } // The a function has been overwritten. var a = document.getElementById('a')

所以最好的方式是

var myNameSpace = { a: function(){ } }

当我们想调用a函数的时候，不是a()，而是myNameSpace.a()。命名空间还可以进一步分割，js代码除了你自己写的之外，还有库代码、广告代码等等，这些变量都出现在网页的全局命名空间中，为了避免冲突，可以对他们进行分组，比如定义一个包含自己代码的全局对象，然后把代码和数据组织到这个对象的各个对象(单体)中

var coreGroup = { } coreGroup.common = { ... }

zepto和jquery都通过$创建了一个命名空间。

分支

分支的原理其实就是创建两个或多个字面量

myNameSpace.Singleton = (function(){ var ObjectA = { method1: function(){ }, method2: function(){ } }; var ObjectB = { method1: function(){ }, method2: function(){ } } return (someCondition) ? objectA : objectB; })();

这边的someCondition一般是能力检测的结果，比如浏览器差异，ie浏览器和其他浏览器等等。当然分支技术性能不一定好，因为两个对象创建在内存中，而我们只使用了一个。但是只使用了一次判断，比在后续代码中不断使用判断也强不少，所以在缩短计算时间和占用更多内存上，要进行考量。

上一篇：移动端html5多图上传并压缩实现

下一篇：多个item的高度以最大的那个为准