JavaScript高級(jí)程序設(shè)計(jì) 學(xué)習(xí)筆記 js高級(jí)技巧

更新時(shí)間：2011年09月20日 22:36:02 作者：

JavaScript高級(jí)程序設(shè)計(jì) 學(xué)習(xí)筆記 js高級(jí)技巧,學(xué)習(xí)js的朋友可以參考下。

第十八章高級(jí)技巧
1.高級(jí)函數(shù)
1.1 作用域安全的構(gòu)造函數(shù)
①直接調(diào)用構(gòu)造函數(shù)而不適用new操作符時(shí)，由于this對(duì)象的晚綁定，它將映射在全局對(duì)象window上，導(dǎo)致對(duì)象屬性錯(cuò)誤增加到window。

復(fù)制代碼代碼如下:

 
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
} 
Var person = Person("Jay",29,"singer"); //屬性增加到window對(duì)象上。 

②作用域安全構(gòu)造函數(shù)

復(fù)制代碼代碼如下:

 
function Person(name,age,job){ 
if(this instanceof Person){ 
this.name = name; 
this.age = age; 
}else{ 
return new Person(name,age); 
} 
} 

③上述作用域安全的構(gòu)造函數(shù)，如果使用構(gòu)造函數(shù)竊取模式的繼承且不使用原型鏈，那么這個(gè)繼承很可能被破壞。
□如果構(gòu)造函數(shù)竊取結(jié)合使用原型鏈或者寄生式組合則可以解決這個(gè)問題。

復(fù)制代碼代碼如下:

 
function Polygon(side){ 
if(this instanceof Polygon){ 
this.sides = sides; 
this.getArea = function{return 0;}; 
}else{ 
return new Polygon(sides); 
} 
} 
function Rectangle(width,height){ 
Polygon.call(this,2); 
this.width = width; 
this.height = height; 
this.getArea = function(){ 
return this.width * this.height; 
}; 
} 
Rectangle.prototype = new Polygon(); 
var rect = new Rectangle(5,10); 
alert(rect.sides); //2 

1.2 惰性載入函數(shù)
①惰性載入表示函數(shù)執(zhí)行的分支僅會(huì)發(fā)生一次：既第一次調(diào)用的時(shí)候。在第一次調(diào)用的過程中，該函數(shù)會(huì)被覆蓋為另一個(gè)按合適方式執(zhí)行的函數(shù)，這樣任何對(duì)原函數(shù)的調(diào)用都不用再經(jīng)過執(zhí)行的分支了。
■優(yōu)點(diǎn)：
□要執(zhí)行的適當(dāng)代碼只有當(dāng)實(shí)際調(diào)用函數(shù)時(shí)才進(jìn)行。
□盡管第一次調(diào)用該函數(shù)會(huì)因額外的第二個(gè)函數(shù)調(diào)用而稍微慢點(diǎn)，但后續(xù)的調(diào)用都會(huì)很快，因避免了多重條件。

復(fù)制代碼代碼如下:

 
function create XHR(){ 
if(typeof XMLHttp Request != "undefined"){ 
createXHR = function(){ 
return new XMLHttpRequest(); 
}; 
}else if(typeof ActiveXObject != "undefined"){ 
createXHR = function(){ 
if(typeof arguments.callee.activeXString != "string"){ 
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"]; 
for(vai I = 0, len = versions.length; I < len; i++){ 
try{ 
Var xhr = new ActiveXObject(version[i]); 
Arguments.callee.activeXString = version[i]; 
Return xhr; 
}catch(ex){ 
//skip 
} 
} 
} 
return new ActiveXObject(arguments.callee.activeXString); 
}; 
}else{ 
createXHR = function(){ 
throw new Error("No XHR Object available."); 
}; 
} 
return createXHR(); 
} 

1.3 函數(shù)綁定
①函數(shù)綁定要?jiǎng)?chuàng)建一個(gè)函數(shù)，可以在特定環(huán)境中以指定參數(shù)調(diào)用另一個(gè)函數(shù)。
②一個(gè)簡(jiǎn)單的bind()函數(shù)接受一個(gè)函數(shù)和一個(gè)環(huán)境，并返回一個(gè)在給定環(huán)境中調(diào)用給定函數(shù)的函數(shù)，并且將所有參數(shù)原封不動(dòng)傳遞過去。

復(fù)制代碼代碼如下:

 
function bind(fn, context){ 
return function(){ 
return fn.apply(context, arguments); 
}; 
} 

③被綁定函數(shù)與普通函數(shù)相比有更多的開銷——它們需要更多內(nèi)存，同時(shí)也因?yàn)槎嘀睾瘮?shù)調(diào)用而稍微慢一點(diǎn)——所以最好只在必要時(shí)使用。
1.4 函數(shù)柯里化
定義：用于創(chuàng)建已經(jīng)設(shè)置好了一個(gè)或多個(gè)參數(shù)的函數(shù)。函數(shù)柯里化的基本方法和函數(shù)綁定是一樣的：使用一個(gè)閉包返回一個(gè)函數(shù)。兩者的區(qū)別在于，當(dāng)函數(shù)被調(diào)用時(shí)，返回函數(shù)還需要設(shè)置一些傳入的參數(shù)。

復(fù)制代碼代碼如下:

 
function bind(fn, context){ 
var args = Array.prototype.slice.call(arguments, 2); 
return function(){ 
var innerArgs = Array.prototype.slice.call(arguments); 
var finalArgs = args.concat(innerArgs); 
return fn.apply(context,finalArgs); 
}; 
} 

2.高級(jí)定時(shí)器
①JavaScript是單線程程序，定時(shí)器是在間隔時(shí)間后將代碼添加到列隊(duì)。
②執(zhí)行完一套代碼后，JavaScript進(jìn)程返回一段很短的時(shí)間，這樣頁面上的其他處理就可以進(jìn)行了。
2.1 重復(fù)的定時(shí)器
①setInterval()僅當(dāng)沒有該定時(shí)器的任何其他代碼實(shí)例時(shí)，才將定時(shí)器代碼添加到隊(duì)列中。
□某些間隔會(huì)被跳過。
□多個(gè)定時(shí)器代碼執(zhí)行之間的間隔可能會(huì)比預(yù)期小。
②避免setInterval()的兩個(gè)缺點(diǎn)，使用鏈?zhǔn)絪etTimeout()調(diào)用：

復(fù)制代碼代碼如下:

 
setTimeout(function(){ 
//處理 
if(condition){ 
setTimeout(arguments.callee, interval); 
} 
},interval); 

2.2 Yielding Processes
①JavaScript長(zhǎng)時(shí)間運(yùn)行腳本制約：如代碼運(yùn)行超過特定的時(shí)間或特定的語句數(shù)量就不會(huì)讓它繼續(xù)執(zhí)行。
②當(dāng)某個(gè)函數(shù)要花200ms以上的事件完成，最好分割為一系列可以使用定時(shí)器的小任務(wù)。
③數(shù)組分塊技術(shù)：為要處理的項(xiàng)目創(chuàng)建一個(gè)隊(duì)列，然后使用定時(shí)器取出下一個(gè)要處理的項(xiàng)目進(jìn)行處理，接著再設(shè)置另一個(gè)定時(shí)器。

復(fù)制代碼代碼如下:

 
function chunk(array, process, context){ 
setTimeout(function(){ 
var item = array.shift(); 
process.call(context,item); 
if(array.length>0){ 
setTimeout(arguments.callee, 100); 
} 
} 
} 

2.3 函數(shù)節(jié)流
①DOM操作比起非DOM交互需要更多內(nèi)存和CPU時(shí)間。連續(xù)嘗試進(jìn)行過多的DOM相關(guān)操作可能會(huì)導(dǎo)致瀏覽器掛起，有時(shí)甚至崩潰。
②函數(shù)節(jié)流思想：某些代碼不可以在沒有間斷的情況連續(xù)重復(fù)執(zhí)行。
□示例

復(fù)制代碼代碼如下:

 
var processor = { 
timeoutId : null, 
//實(shí)際進(jìn)行處理的方法 
performProcessing : function(){ 
//實(shí)際執(zhí)行的方法 
}, 
//初始處理調(diào)用的方法 
process : function(){ 
clearTimeout(this.timeoutId); 
var that = this; 
this.timeoutId = setTimeout(function(){ 
that.performProcessing(); 
},100); 
} 
}; 
//嘗試開始執(zhí)行 
Processor.process(); 
□簡(jiǎn)化模式 
function throttle(method,context){ 
clearTimeout(mehtod.tId); 
mehtod.tId = setTimeout(function(){ 
method.call(context); 
},100); 
} 

3.自定義事件
①事件是一種叫做觀察者的設(shè)計(jì)模式，這是一種創(chuàng)建松散耦合代碼的技術(shù)。
□對(duì)象可以發(fā)布事件，用來表示該對(duì)象聲明周期中某個(gè)有趣的時(shí)刻到了。
□其他對(duì)象可以觀察該對(duì)象，等待有趣的時(shí)刻到來并通過運(yùn)行代碼來響應(yīng)。
②觀察者模式由兩類對(duì)象組成：主體和觀察者。
□主體負(fù)責(zé)發(fā)布事件，同時(shí)觀察者通過訂閱這些事件來觀察主體。
□主體并不知道觀察者的任何事情，它可以獨(dú)立自存在并正常運(yùn)作即使觀察者不在。
③自定義事件：創(chuàng)建一個(gè)管理事件的對(duì)象，讓其他對(duì)象監(jiān)聽那些事件。

復(fù)制代碼代碼如下:

 
function EventTarget(){ 
this.handlers = {}; 
} 
EventTarget.prototype = { 
constructor : EventTarget, 
addHandler : function(type,handler){ 
if(typeof this.handlers[type] == "undefined"){ 
this.handlers[type] = []; 
} 
this.handlers[type].push(handler); 
}, 
fire : function(event){ 
if(!event.target){ 
event.target = this; 
} 
if(this.handlers[event.type] instanceof Array){ 
var handlers = this.handlers[event.type]; 
for(var i=0,len=handlers.length; i<len; i++){ 
handlers[i](event); 
} 
} 
}, 
removeHandler : function(type, handler){ 
if(this.handlers[type] instanceof Array){ 
var handlers = this.handlers[type]; 
for(var i=0,len=handlers.length; i<len; i++){ 
if(handlers[i] === handler){ 
break; 
} 
} 
Handlers.splice(i,1); 
} 
}; 

④使用EventTarget類型的自定義事件可以如下使用：

復(fù)制代碼代碼如下:

 
function handleMessage(event){ 
alert("message received:" + event.message); 
} 
//創(chuàng)建一個(gè)新對(duì)象 
var target = new EventTarget(); 
//添加一個(gè)事件處理程序 
target.addHandler("message",handleMessage); 
//觸發(fā)事件 
target.fire({type:"message",message:"hello world!"}); 
//刪除事件處理程序 
target.removeHandler("message",handleMessage); 

⑤使用實(shí)例

復(fù)制代碼代碼如下:

 
function Person(name,age){ 
eventTarget.call(this); 
this.name = name; 
this.age = age; 
} 
inheritPrototype(Person, EventTarget); 
Person.prototype.say = function(message){ 
this.fire({type:"message", message:message}); 
}; 
function handleMessage(event){ 
alert(event.target.name + "says: " + event.message); 
} 
//創(chuàng)建新person 
var person = new Person("Nicholas",29); 
//添加一個(gè)事件處理程序 
Person.addHandler("message",handleMessage); 
//在該對(duì)象上調(diào)用1個(gè)方法，它觸發(fā)消息事件 
person.say("Hi there"); 

4.拖放
功能：①拖放②添加了自定義事件

復(fù)制代碼代碼如下:

 
var DragDrop = function(){ 
var dragdrop = new EventTarget(); 
var dragging = null; 
var diffX = 0; 
var diffY = 0; 
function handleEvent(event){ 
//獲取事件和對(duì)象 
event = EventUtil.getEvent(event); 
var target = EventUtil.getTarget(event); 
//確定事件類型 
switch(event.type){ 
case "mousedown" : 
if(target.className.indexOf("draggable")>-1){ 
dragging = target; 
diffX = event.clientX - target.offsetLeft; 
diffY = event.clientY - target.offsetTop; 
dragdorp.fire( 
{ 
type:"dragstart", 
target : dragging, 
x : event.clientX, 
y : event.clientY 
} 
); 
break; 
case "mousemove" : 
if(dragging !== null){ 
//獲取事件 
event = EventUtil.getEvent(event); 
//指定位置 
dragging.style.left = (event.clientX - diffX) + "px"; 
dragging.style.top = (event.clientY - diffY) + "px"; 
//觸發(fā)自定義事件 
dragdrop.fire( 
{ 
type : "drag", 
target : dargging, 
x : event.clientX, 
y : event.clientY 
} 
); 
} 
break; 
case "mouseup" : 
dargdorp.fire( 
{ 
type : "dragend", 
target : dragging, 
x : event.clientX, 
y : event.clientY 
} 
); 
dragging = null; 
break; 
} 
} 
//公共接口 
dragdrop.enable = function() { 
EventUtil.addHandler(document, "mousedown", handleEvent); 
EventUtil.addHandler(document, "mousemove", handleEvent); 
EventUtil.addHandler(document, "mouseup", handleEvent); 
}; 
dragdrop.disable = function(){ 
EventUtil.removeHandler(document, "mousedown", handleEvent); 
EventUtil.removeHandler(document, "mousemove", handleEvent); 
EventUtil.removeHandler(document, "mouseup", handleEvent); 
}; 
return dragdrop; 
}(); 