Javascript 设计模式 单例，前端开发h5

/**

• 方式一

• 采用约定，所有以_开头的变量或者方法为私有变量

*/

var singleTon = {

_m1: “hello”,

_f1: function ()

{

},

init: function ()

{

}

};

可以觉得方式1不是自己骗自己么，但是项目嘛，约定由于配置，也是可行的。实在觉得不能忍受，看方式二：

/**

• 方式二

*/

var singleTon = (function ()

{

var _m1 = “hello”;

var _f1 = function ()

{

console.log(" i am a private function !");

}

return {

//public method

init: function ()

{

//invoke the private method in the singleTon

_f1();

}

};

})();

采用了闭包的方式，很好的实现了私有变量和私有方法的隐藏。

5、单例实例：解决Textarea的数据存储时的Html转Txt和展示时Txt转Html

在web项目中，很多情况会使用到Textarea。

a、比如留言、技能的书写等；对于这类Textarea我们有必要对用户输入的html代码做特殊处理，防止用户填写恶意代码或者把页面的样式弄乱。

b、相反来说，在Textarea中书写的换行以及空格，最终在div中显示却没有效果，都是一个空格，所有很多web开发者会选择使用只读textarea来回显用户输入内容，其实需要做一定的转换。

html：

html转化为Txt，供Div展示

Txt转化为Html,供Textarea修改

第一个Textarea用于用户输入，然后经过转义显示到div中，然后将转义后的数据进行逆向恢复显示到第二个TextArea中。相当与模拟了，div中展示数据和用户再次编辑数据，这些功能在项目中都相当实用。

我们的js代码：

/**

• 对用户在TextArea中输入的数据进行过滤，把< -> <等操作，以及逆向操作

*/

ZhangHongYang.htmlFilter = (function ()

{

/**

• 转化textarea中的空格为$nbsp;

• \n转化为
  

• @private

*/

function _transSpace(data)

{

return data.replace(/\n/g, “
”).replace(/\s/g, " ");

};

/**

• 转化所有尖括号

• @private

*/

function _transBrace(data)

{

return data.replace(/</g, “<”).replace(/>/g, “>”);

};

function _resumeSpace(data)

{

return data.replace(/ /g, " ").replace(/<br\s*/>/ig, “\n”);

};

function _resumeBrace(data)

{

return data.replace(/</g, “<”).replace(/>/g, “>”);

};

return {

txt2Html: function (data)

{

return _transSpace(_transBrace(data));

}, html2Txt: function (data)

{

return _resumeSpace(_resumeBrace(data));

}

};

})();

在我的命名空间下定义了htmlFilter方法，然后最后暴露两个方法Html2Txt和Txt2Html给使用者。

调用的代码：

效果图：

可以看到换行、空格、以及恶意的HTML代码等都得到了很好的在DIV中的显示；且最终可还原为Textarea中供编辑；如果各位项目中没有考虑到这类问题，首先你可以测试下问题，然后可以使用上面的代码解决这类问题。

6、单例写法提高多分支代码效率

相信大家都了解过ajax，对象ajax肯定离不开XMLHttpRequest，而且不同版本、类型的浏览器创建方式不一致。一般我们可能会这么写创建XMLHttpRequest的方法：

function createXhr()

{

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);

}

return xmlhttp ;

}

存在一个问题，每次创建XHR对象都需要进行分支判断，如果某个方法分支特别多，我们可以做进一步的优化，当浏览器加载js文件时，就决定以后调用只会用其中合适的方式，而不会走分支。

我们把代码改成：

/**

• 用于在程序加载次js文件时，根据当前浏览器返回一个创建xhr的工厂方法，而不需要每次都去分支判断

*/

ZhangHongYang.xhrFactroy = (function ()

{

function _ieCreateXhr()

{ // code for IE6, IE5

return new ActiveXObject(“Microsoft.XMLHTTP”);

}

function _newCreateXhr()

{

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

if (window.XMLHttpRequest)

{

return _newCreateXhr;

}

else

{

return _ieCreateXhr;

}

})();

当程序加载完成js文件后，会自动根据浏览器类型返回适合的方法，避免每次都会进行分支判断，我们只需要使用ZhangHongYang.xhrFactroy();创建XHR对象。

7、单例引入懒加载功能

上述的js的文件基本在引入页面后，浏览器加载就会进行大量操作占用内存，有时候我们希望等到我们去使用时再去执行一些操作，如果从未使用就省去不必要的内存消耗，我们可以进行如下改写代码：

/**

• 用于在程序加载次js文件时，根据当前浏览器返回一个创建xhr的工厂方法，而不需要每次都去分支判断

*/

ZhangHongYang.xhrFactroy = (function ()

{

var _instance = null;

function _constructor()

{

function _ieCreateXhr()

{ // code for IE6, IE5

return new ActiveXObject(“Microsoft.XMLHTTP”);

}

function _newCreateXhr()

{

// code for IE7+, Firefox, Chrome, Opera, Safari

return new XMLHttpRequest();

}

if (window.XMLHttpRequest)

{

return _newCreateXhr;

}

else

{

return _ieCreateXhr;

}

}

return {getInstance: function ()

{

if (_instance == null)

{

_instance = _constructor();

}

return _instance;

}};

})();