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>

相關標籤/搜索

js3

JavaScript

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。