JavaScript 中的所有事物都是對(duì)象：字符串、數(shù)值、數(shù)組、函數(shù)。下面小編給大家收集整理些javascript中的對(duì)象及promise對(duì)象的實(shí)現(xiàn)。具體內(nèi)容如下：

到處都是對(duì)象

window對(duì)象

常用的屬性和方法介紹

location

　　包含頁面的URL，如果改變這個(gè)屬性，瀏覽器會(huì)訪問新的URL

status

　　包含將在瀏覽器狀態(tài)去顯示的一個(gè)串。一般在瀏覽器左下角

onload：

　　包含了需要在頁面完全加載后調(diào)用的函數(shù)

document：

　　包含DOM

alert方法：

　　顯示一個(gè)提醒

prompt方法：

　　類似于alert，不過會(huì)從用戶那得到信息

open

　　打開一個(gè)新窗口

close

　　關(guān)閉窗口

setTimeout：

　　指定的時(shí)間間隔后調(diào)用一個(gè)處理函數(shù)

setlnterval

　　以一個(gè)指定的時(shí)間間隔反復(fù)調(diào)用一個(gè)處理函數(shù)

談?wù)剋indow.onload

 通過向window的onload屬性指定一個(gè)函數(shù)，可以確保在頁面加載和DOM完全建立之前不會(huì)運(yùn)行代碼。

 用于改變DOM的函數(shù)

 window.onload = function(){
   //code here 
 }
 //function是一個(gè)匿名函數(shù)，賦給onload

我們之所以不說window.inload = init(),是因?yàn)槲覀儾皇钦{(diào)用函數(shù)，而是要使用它的值。

　將一個(gè)函數(shù)的值賦給window對(duì)象的inload屬性，讓它在頁面加載完后，執(zhí)行。

　創(chuàng)建window.onload處理程序有兩種方法-----使用函數(shù)名和使用匿名函數(shù)。

　這兩種方法基本上都會(huì)做同一件事，但如果賦給window.onload的函數(shù)還要在別處使用，則選擇使用函數(shù)名

document對(duì)象

常用的屬性和方法介紹

domain：

　　提供文檔的服務(wù)器的域，如kelion.com.

title:

　　通過document.title，可以獲得文檔的標(biāo)題

URL：

　　文檔的URL

getElementById方法：

　　根據(jù)元素id獲取這個(gè)元素

getElementsByTagName，

getElementsByClassName：

　　這兩個(gè)方法類似前一個(gè)，只不過他們使用標(biāo)記和類來獲取元素

createElement：

　　創(chuàng)建適合包含在DOM中的新的元素

談?wù)刢reateElement

 //創(chuàng)建<li>元素，
 var li = document.createElement("li"); 
 //給剛創(chuàng)建的元素賦值
 li.innerHTML = "songName";
 //獲取<ul>元素
 var ul = document.getElementById("playlist")
 //把<li>元素增加到ul中
 ul.appendChild(li)

注：在進(jìn)行第8行代碼前，li元素始終都是獨(dú)立于DOM之外的

元素對(duì)象

常用的屬性和方法介紹：

innerHTML：

　　包含元素的內(nèi)容

childElementCount：

　　保存元素的個(gè)數(shù)

firstChild

　　第一個(gè)子元素

appendChild方法：

insertBefore方法：

　　用于插入元素，作為一個(gè)元素的子元素

getAttribute方法
setAttribute方法

　　使用者兩個(gè)方法來設(shè)置和獲取元素中的屬性：如“src”，“id”，“class”等

最后來了解下button對(duì)象

button對(duì)象有一個(gè)經(jīng)常用的屬性：

　　　　onclick（用于監(jiān)聽一個(gè)按鈕是否被按下了）?！?/p>

var button = document.getElementById("Button"); //button只是一個(gè)變量名，可以是button1，button2等等，但本質(zhì)是一個(gè)按鈕
 button.onclick = handleButtonClick;

 ps：淺談Javascript中Promise對(duì)象的實(shí)現(xiàn)

 很多做前端的朋友應(yīng)該都聽說過Promise（或者Deferred）對(duì)象，今天我就講一下我對(duì)Promise的認(rèn)識(shí)

What？

Promise是CommonJS的規(guī)范之一，擁有resolve、reject、done、fail、then等方法，能夠幫助我們控制代碼的流程，避免函數(shù)的多層嵌套。如今異步在web開發(fā)中越來越重要，對(duì)于開發(fā)人員來說，這種非線性執(zhí)行的編程會(huì)讓開發(fā)者覺得難以掌控，而Promise可以讓我們更好地掌控代碼的執(zhí)行流程,jQuery等流行的js庫都已經(jīng)實(shí)現(xiàn)了這個(gè)對(duì)象，年底即將發(fā)布的ES6也將原生實(shí)現(xiàn)Promise

Why

想象這樣一個(gè)場景，兩個(gè)異步請(qǐng)求，第二個(gè)需要用到第一個(gè)請(qǐng)求成功的數(shù)據(jù)，那么我們代碼可以這樣寫

  ajax({
    url: url1,
    success: function(data) {
      ajax({
        url: url2,
        data: data,
        success: function() {
        }
      });
    }
  });

如果繼續(xù)下去在回調(diào)函數(shù)中進(jìn)行下一步操作，嵌套的層數(shù)會(huì)越來越多。我們可以進(jìn)行適當(dāng)?shù)母倪M(jìn)，把回調(diào)函數(shù)寫到外面

 function A() {
    ajax({
      url: url1,
      success: function(data) {
        B(data);
      }
    });
  }
  function B(data) {
    ajax({
      url: url2,
      success: function(data) {
        ......
      }
    });
  }

即使是改寫成這樣，代碼還是不夠直觀，但是如果有了Promise對(duì)象，代碼就可以寫得非常清晰，一目了然，請(qǐng)看

new Promise(A).done(B);

這樣函數(shù)B就不用寫在A的回調(diào)中了

How

目前的ES標(biāo)準(zhǔn)中還未支持Promise對(duì)象，那么我們就自己動(dòng)手，豐衣足食吧。思路大致是這樣的，用2個(gè)數(shù)組(doneList和failList)分別存儲(chǔ)成功時(shí)的回調(diào)函數(shù)隊(duì)列和失敗時(shí)的回調(diào)隊(duì)列
* state: 當(dāng)前執(zhí)行狀態(tài)，有pending、resolved、rejected3種取值
* done: 向doneList中添加一個(gè)成功回調(diào)函數(shù)
* fail: 向failList中添加一個(gè)失敗回調(diào)函數(shù)
* then: 分別向doneList和failList中添加回調(diào)函數(shù)
* always: 添加一個(gè)無論成功還是失敗都會(huì)調(diào)用的回調(diào)函數(shù)
* resolve: 將狀態(tài)更改為resolved,并觸發(fā)綁定的所有成功的回調(diào)函數(shù)
* reject: 將狀態(tài)更改為rejected,并觸發(fā)綁定的所有失敗的回調(diào)函數(shù)
* when: 參數(shù)是多個(gè)異步或者延遲函數(shù)，返回值是一個(gè)Promise兌現(xiàn)，當(dāng)所有函數(shù)都執(zhí)行成功的時(shí)候執(zhí)行該對(duì)象的resolve方法，反之執(zhí)行該對(duì)象的reject方法

下面是我的具體實(shí)現(xiàn)過程：

var Promise = function() {
  this.doneList = [];
  this.failList = [];
  this.state = 'pending';
};
Promise.prototype = {
  constructor: 'Promise',
  resolve: function() {
    this.state = 'resolved';
    var list = this.doneList;
    for(var i = 0, len = list.length; i < len; i++) {
      list[0].call(this);
      list.shift();
    }
  },
  reject: function() {
    this.state = 'rejected';
    var list = this.failList;
    for(var i = 0, len = list.length; i < len; i++){
      list[0].call(this);
      list.shift();
    }
  },
  done: function(func) {
    if(typeof func === 'function') {
      this.doneList.push(func);
    }
    return this;
  },
  fail: function(func) {
    if(typeof func === 'function') {
      this.failList.push(func);
    }
    return this;
  },
  then: function(doneFn, failFn) {
    this.done(doneFn).fail(failFn);
    return this;
  },
  always: function(fn) {
    this.done(fn).fail(fn);
    return this;
  }
};
function when() {
  var p = new Promise();
  var success = true;
  var len = arguments.length;
  for(var i = 0; i < len; i++) {
    if(!(arguments[i] instanceof Promise)) {
      return false;
    }
    else {
      arguments[i].always(function() {
        if(this.state != 'resolved'){
          success = false;
        }
        len--;
        if(len == 0) {
          success ? p.resolve() : p.reject();
        }
      });
    }
  }
  return p;
}
Improve

目前只是實(shí)現(xiàn)了Promise的基礎(chǔ)功能，但仍然還有無法處理的情況，例如要實(shí)現(xiàn)3個(gè)或3個(gè)以上的異步請(qǐng)求的串行，目前我的Promise沒有辦法支持new Promise(A).then(B).then(C)這樣的形式，jQuery在1.7的版本中為Deferred(Promise)對(duì)象實(shí)現(xiàn)了pipe函數(shù)，可以通過這個(gè)函數(shù)實(shí)現(xiàn)上述功能，代碼為$.Deferred(A).pipe(B).then(C)，我嘗試去讀了jQuery這部分的代碼，但是沒能讀懂，希望有大神能夠給一些實(shí)現(xiàn)思路

最新評(píng)論