這個月工作比較忙,再加上讀了一本<javascript權威指南>,還有....所以沒有心上來寫blog,這個月最后一天了,趕上來補下作業(yè),這個月主要研究了下ajax,其實對于ajax,年初興起的時候玩過一陣,也做過一些東東,當時的技術也處在異步調(diào)用,返回xml,更新網(wǎng)頁控件這個階段,半年過去了,Prototype.js,DWR,TrimPath JSTemplate等技術的成熟,使ajax更平民化,使我們更容易在自已的系統(tǒng)中使用.以下總結一下這個月學到的東東,同時與以前使用ajax進行對比.
高級javascript總結
1.函數(shù)也是對象
var
?myDog?
=
?
{
????bark:?
function
()
{
????????alert('Woof
!
');
????}
}
;
var
?myCat?
=
?
{
????meow:?
function
()
{
????????alert('I?am?a?lazy?cat.?I?will?not?meow?
for
?you.');
????}
}
;
?
function
?annoyThePet(petFunction)
{
????
//
let's?see?what?the?pet?can?do
????petFunction();
}
//
annoy?the?dog:
annoyThePet(myDog.bark);
//
annoy?the?cat:
annoyThePet(myCat.meow);
2.數(shù)組,對象成員
js中創(chuàng)建對象以及給對象動態(tài)創(chuàng)建成員
var?obj?=?{};?//new,?empty?object
obj['member_1']?=?'this?is?the?member?value';
obj['flag_2']?=?false;
obj['some_function']?=?function(){?/**//*?do?something?*/};
以上代碼等同
var?obj?=?{
????member_1:'this?is?the?member?value',
????flag_2:?false,
????some_function:?function(){?/**//*?do?something?*/}
};
???? obj.some_function();
obj['some_function']();
上面代碼表示在對象中使用成員,類似于hash表中使用一個key.
3.在js中使用class
//defining?a?new?class?called?Pet
var?Pet?=?function(petName,?age){
????this.name?=?petName;
????this.age?=?age;
};
//let's?create?an?object?of?the?Pet?class
var?famousDog?=?new?Pet('Santa\'s?Little?Helper',?15);
alert('This?pet?is?called?'?+?famousDog.name);
JS中類的繼承一般通過
prototype屬性
Pet.prototype.communicate?=?function(){?
????alert('I?do?not?know?what?I?should?say,?but?my?name?is?'?+?this.name);
};
用Prototype.js會簡單一些,prototype.js這個框架的代碼很值得一讀,里面用到了很多高級的JS技巧,巧妙的設計的許多優(yōu)秀的設計方案.
var?Pet?=?Class.create();
Pet.prototype?=?{
????//our?'constructor'
????initialize:?function(petName,?age){
????????this.name?=?petName;
????????this.age?=?age;
????},
????
????communicate:?function(){
????????alert('I?do?not?know?what?I?should?say,?but?my?name?is?'?+?this.name);
????}
};????
???????? 4.將函數(shù)作為參數(shù),類似于ruby的閉包寫法
var?myArray?=?['first',?'second',?'third'];
myArray.each(?function(item,?index){
????alert('The?item?in?the?position?#'?+?index?+?'?is:'?+?item);
}?);