js3

时间 2019-12-12

标签 js3 栏目 JavaScript 繁體版

原文原文链接

单例模式（singleton）

单例的使用1：用户注册

【示例1】： javascript

var Singleton = { java

att1:"hello", jquery

att2:"world", ajax

m1:function() { 正则表达式

alert("m1"); 浏览器

}, 闭包

m2:function() { jsp

alert("m2"); post

}

};

alert(Singleton.att1);

Singleton.m1();

</script>

【单例的运用1】：

【注意】：（单例的实际使用：建立命名空间）

好比有两个js文件01.js和02.js：

01.js：

var findName = function(){

}

02.js：

var findName = $(“#name”).val();

当一个文件同时引入这两个js文件的话，就会出现覆盖的问题。解决方法是，咱们能够将这两个文件中的js内容放到本身的命名空间（相似包）中：

01.js：

zmj. functions= {

findName : function(){

}

使用findName方法的时候，就能够com.zmj.common.functions.findName()

02.js：

zmj. values = {

findName : $(“#name”).val()

}

以上，若是直接这么用的话，明显有问题的，由于zmj这个对象并不存在。因此要使用

zmj.functions = { }

这个代码的话，就必须先建立zmj对象：

var zmj = { }

有时候咱们想让命名空间惟一，就会使用zmj.org.functions这样的命名空间，那么咱们就要把zmj和org都要建立出来：

var zmj = {

org: { }

}

【示例2】：文件专属js之注册案例

reg.html：

// 使用jquery

$(function(){

Org.reg.init();

});

// 或者使用js

window.onload = Org.reg.init;//init没有括号

</script>

</head>

<body>

<hr />

username:<input type="text" id="username" name="username" /><br/>

nickname:<input type="text" id="nickname" name="nickname" /><br/>

password:<input type="password" id="password" name="password" />

</form>

</body>

</html>

Org.reg.js

/**reg表明页面名*/

KongHao.reg = {

FORM_ID:"regForm",

OUTPUT_CONTAINER:"outputResult",

handlerSubmit:function(event) {

event.preventDefault();

var data = {};

KongHao.reg.form.find("input").each(function(i) {

if(

$(this).attr("type")!="submit"&&

$(this).attr("type")!="button"&&

$(this).attr("type")!="reset")

{

data[$(this).attr("name")] = $(this).val();

}

});

KongHao.reg.ajaxSubmit(data);

ajaxSubmit:function(data) {

//经过$.post(href,data,funtion(data){showResult})

var href = KongHao.reg.form.attr("action");

alert(href);

KongHao.reg.showResult(data);

showResult:function(data) {

var str = "";

for(var k in data) {

str+="name:"+k+",value:"+data[k]+"<br/>";

}

KongHao.reg.outContainer.html(str);

init:function() {

var KR = KongHao.reg;

KR.form = $("#"+KR.FORM_ID);

KR.outContainer = $("#"+KR.OUTPUT_CONTAINER);

KR.form.submit(KR.handlerSubmit);

}

};

单例的使用2：私有变量：

方式1、常规方式

即便用下划线表示私有变量。

Org.Private = {

//使用下划线来定义私有的成员

_pm1:function() {

m1:function() {

}

};

</script>

【示例：】

Org.HtmlParser = {

//使用_开头，将其设定为私有方法

_tranSpace:function(txt) {

return txt.replace(/\n/g,"<br/>").replace(/\s/g," ");

_tranBrace:function(txt) {

return txt.replace(/\>/g,">").replace(/\</g,"<");

_resumeSpace:function(txt) {

return txt.replace(/ /ig," ").replace(/<br*\/?>/ig,"\n");

_resumeBrace:function(txt) {

return txt.replace(/>/ig,">").replace(/</ig,"<");

parseTxt:function(txt) {

//1、转换<>括号

txt = this._tranBrace(txt);

//2、转换空格

txt = this._tranSpace(txt);

return txt;

resumeHtml:function(txt) {

//1、转换<>括号

txt = this._resumeBrace(txt);

//2、转换空格

txt = this._resumeSpace(txt);

return txt;

}

};

方式二：使用闭包将方法私有化

【原理：】

KongHao.Private = (function(){

//实现合理的私有化了

function pm1() {

alert("pm1");

};

return {

m1:function() {

alert("m1");

pm1();

}

};

})();

KongHao.Private.m1();

//报错

KongHao.Private.pm1();

</script>

【实例：】基于闭包的定义方式（最经常使用的方式）

$(function() {

$("#btn").click(function() {

var KH =Org.HtmlParser;

//var t = KH._tranSpace("aaa d");

var txt = KH.parseTxt($("#intro").val());

$("#introTxt").html(txt);

$("#intro1").val(KH.resumeHtml(txt));

});

</script>

</head>

<body>

</body>

js代码：

Org.HtmlParser = (function(){

// 斜杠开头的方法表示私有方法

function _tranSpace(txt) {

// 正则表达式：第一个斜杠表示正则表达式开始；/g表示作全局转换；

// \n表示换行。

// \s表示文本中的空格

return txt.replace(/\n/g,"<br/>").replace(/\s/g," ");

};

function _tranBrace(txt) {

return txt.replace(/\>/g,">").replace(/\</g,"<");

};

// ig表示忽略大小写

function _resumeSpace(txt) {

return txt.replace(/ /ig," ").replace(/<br*\/?>/ig,"\n");//<br>

};

function _resumeBrace(txt) {

return txt.replace(/>/ig,">").replace(/</ig,"<");

};

return {

parseTxt:function(txt) {

/**这里注意转换顺序*/

//1、转换<>括号

txt = _tranBrace(txt);

//2、转换空格

txt = _tranSpace(txt);

return txt;

resumeHtml:function(txt) {

//1、转换<>括号

txt = _resumeBrace(txt);

//2、转换空格

txt = _resumeSpace(txt);

return txt;

}

};

})();

上面这个方法虽然是真正意义上的单例，可是，这个方法会将整个方法所有加载到内存（无论用不用到），因此，能够对上面这个单例方法作进一步改进：

方式三：基于延迟的单例

$(function() {

$("#btn").click(function() {

var KH = Org.HtmlParser;

//var t = KH._tranSpace("aaa d");

var txt = KH.getInstance().parseTxt($("#intro").val());

$("#introTxt").html(txt);

$("#intro1").val(KH.getInstance().resumeHtml(txt));

});

</script>

</head>

<body>

</body>

js代码：

/* 基于闭包的方式定义，最经常使用的定义方式

* 实现了延迟加载，只有在这个对象被使用到的时候才会加载

* 和基于闭包的方式的惟一区别是，在调用的时候须要经过

* KongHao.HtmlParser.getInstance.parseTxt()*/

Org.HtmlParser = (function(){

var instance;

function constructor() {

function _tranSpace(txt) {

return txt.replace(/\n/g,"<br/>").replace(/\s/g," ");

};

function _tranBrace(txt) {

return txt.replace(/\>/g,">").replace(/\</g,"<");

};

function _resumeSpace(txt) {

return txt.replace(/ /ig," ").replace(/<br*\/?>/ig,"\n");

};

function _resumeBrace(txt) {

return txt.replace(/>/ig,">").replace(/</ig,"<");

};

return {

parseTxt:function(txt) {

//1、转换<>括号

txt = _tranBrace(txt);

//2、转换空格

txt = _tranSpace(txt);

return txt;

resumeHtml:function(txt) {

//1、转换<>括号

txt = _resumeBrace(txt);

//2、转换空格

txt = _resumeSpace(txt);

return txt;

}

};

}

return {

getInstance:function() {

if(!instance) {

instance = constructor();

}

return instance;

}

};

})();

单例使用3：在分支里使用单例：

【知识点】：

咱们常常会使用if(){ }else(){ }来检测不一样的浏览器，若是使用浏览器自带的检测方法会有效率的问题，咱们可使用单例来解决这个问题。

KongHao.CreateObj = (function(){

//假如objA是IE，objB是FireFox

var objA = {

m1:function() {

alert("obja+m1");

m2:function() {

alert("obja+m2");

}

};

var objB = {

m1:function() {

alert("objb+m1");

m2:function() {

alert("objb+m2");

}

};

//根据不一样的状况返回不一样的对象

var x = 3;

return x<10 ? objA:objB;

})();

KongHao.CreateObj.m1();

</script>

【检测浏览器实例】：

KongHao.SimpleXhrFactory = (function(){

var standard = {

createXhr:function() {

alert("s");

return new XMLHttpRequest();

}

};

var activeXNew = {

createXhr:function() {

alert("an");

return new ActiveXObject("Msxml12.XMLHTTP");

}

};

var activeXOld = {

createXhr:function() {

alert("on");

return new ActiveXObject("Microsoft.XMLHTTP");

}

};

try {

standard.createXhr();

return standard;

} catch(e) {

try{

activeXNew.createXhr();

return activeXNew;

} catch(e) {

try{

activeXOld.createXhr();

return activeXOld;

} catch(e) {

throw new Error("你的浏览器不支持XHR");

}

})();

var xhr = KongHao.SimpleXhrFactory.createXhr();

alert(xhr);

</script>

工厂模式

在java中，工厂模式使用来建立对象的。

简单工厂模式

var ICar = new Interface("ICar",["assemble","wash","run"]);

/**

* 表示小轿车

var Car = function() {};

Car.prototype = {

assemble:function() {

alert("小轿车组装中!");

wash:function() {

alert("小轿车清洗中");

run:function() {

alert("小轿车移动中");

}

};

var Truck = function() {};

Truck.prototype = {

assemble:function() {

alert("大卡车组装中!");

wash:function() {

alert("大卡车清洗中");

run:function() {

alert("轰隆隆隆!");

}

};

var Org = {};

Org.CarFactory = {

createCar:function(model) {

var car;

switch(model) {

case "car":

car = new Car();

break;

case "truck":

car = new Truck();

break;

}

Interface.checkImplements(car,ICar);

return car;

}

};

var CarShop = function(){};

CarShop.prototype = {

sellCar:function(model) {

var car = Org.CarFactory.createCar(model);

car.assemble();

car.wash();

return car;

}

};

var c = new CarShop().sellCar("truck");

c.run();

</script>

</head>

<body>

稍复杂简单工厂模式

var ICar = new Interface("ICar",["assemble","wash","run"]);

/*表示小轿车*/

var AudiCar = function() {};

AudiCar.prototype = {

assemble:function() {

alert("奥迪的小轿车组装中!");

wash:function() {

alert("奥迪的小轿车清洗中");

run:function() {

alert("奥迪的小轿车移动中");

}

};

var AudiTruck = function() {};

AudiTruck.prototype = {

assemble:function() {

alert("Audi大卡车组装中!");

wash:function() {

alert("Audi大卡车清洗中");

run:function() {

alert("Audi轰隆隆隆!");

}

};

var CarShop = function(){};

CarShop.prototype = {

sellCar:function(model) {

var car = this.createCar(model);

car.assemble();

car.wash();

return car;

vip:function() {

createCar:function(model) {

throw new Error("这是个抽象方法，必须被实现!");

}

};

var AudiCarShop = function(){};

extend(AudiCarShop,CarShop);

/*不能使用如下写法覆盖，会连sellCar也取消掉

AudiCarShop.prototype = {

};*/

AudiCarShop.prototype.createCar = function(model) {

var car;

switch(model) {

case "car":

car = new AudiCar();

break;

case "truck":

car = new AudiTruck();

break;

}

Interface.checkImplements(car,ICar);

return car;

};

var BenzCar = function() {};

BenzCar.prototype = {

assemble:function() {

alert("奔驰的小轿车组装中!");

wash:function() {

alert("奔驰的小轿车清洗中");

run:function() {

alert("奔驰的小轿车移动中");

}

};

var BenzTruck = function() {};

BenzTruck.prototype = {

assemble:function() {

alert("Benz大卡车组装中!");

wash:function() {

alert("Benz大卡车清洗中");

run:function() {

alert("Benz轰隆隆隆!");

}

};

var BenzCarShop = function(){};

extend(BenzCarShop,CarShop);

BenzCarShop.prototype.createCar = function(model) {

var car;

switch(model) {

case "car":

car = new BenzCar();

break;

case "truck":

car = new BenzTruck();

break;

}

Interface.checkImplements(car,ICar);

return car;

};

var c = new BenzCarShop().sellCar("car");

c.run();

</script>

基于Ajax的工厂模式

var AjaxHandler = new Interface("AjaxHandler",["request","createXhrObject"]);

var SimpleAjaxHandler = function(){};

SimpleAjaxHandler.prototype = {

request:function(method,url,data,callback) {

var xhr = this.createXhrObject();

xhr.onreadystatechange = function() {

if(xhr.readyState!=4) return;

if(xhr.status==200) {

callback.success(xhr.responseText);

} else {

callback.failure(xhr.status);

}

};

xhr.open(method,url,true);

if(method!="post") data = null;

xhr.send(data);

createXhrObject:function() {

var methods = [

function () { return new XMLHttpRequest();},

function () { return new ActiveXObject("Msxml12.XMLHTTP");},

function () { return new ActiveXObject("Microsoft.XMLHTTP");}

];

for(var i=0;i<methods.length;i++) {

try {

var f = methods[i]();

/**

* 下面一段代码的做用是用来提升运行效率的

this.createXhrObject = methods[i];

return f;

} catch(e) {

continue;

}

throw new Error("你的浏览器必须支持XMLHttpRequest对象");

}

};

var simpleHandler = new SimpleAjaxHandler();

Interface.checkImplements(simpleHandler,AjaxHandler);

var callback = {

success:function(txt) {

alert("success:"+txt);

failure:function(code) {

alert("failure:"+code);

}

};

simpleHandler.request("get","02.txt",null,callback);

</script>