目錄

0.前言

1.小程式中的js和普通的javascript區別

（1）小程式不是運行在瀏覽器中，所以沒有BOM和DOM物件

（2）小程式中有更加多的方法函式

（3）生命周期函式

1.1 監聽頁面加載

1.2 監聽頁面初次渲染完成

1.3 監聽頁面顯示

1.3 監聽頁面隱藏

1.4 監聽頁面卸載

2.1 監聽小程式初始化

2.2 錯誤監聽函式

2.JavaScript的基礎一小部分

（1）關鍵字與保留字

（2）系統常量

（3）運算子

（4）例外處理陳述句

（5）with陳述句和空陳述句

（6）資料型別

1、數值

2、字串

3、布爾型

4、物件

5、陣列

（7）函式應用

1、匿名函式

2、函式作為引數

（8）閉包函式

3.事件處理

（1）事件模型

（2）注冊事件和銷毀事件

4.使用Ajax

（1）使用XMLHttpRequest

（2）發送GET請求

（3）發送POST請求

（4）中止請求

0.前言

由于之前為了微信小程式專案是直接學習了微信的js，現在回來補一補JavaScript的基礎，在大致瀏覽JavaScript相關書籍的時候，發現在專案中所用的東西覆寫面還挺全的，感覺很多跳過了學習階段直接強硬使用上去了，但是肯定不夠熟悉，所以需要惡補一下基礎，接下來會就著《HTML5+CSS3+JavaScript從入門到精通(標準版)》進行回補基礎，首先的是JavaScript學習，

1.小程式中的js和普通的javascript區別

（1）小程式不是運行在瀏覽器中，所以沒有BOM和DOM物件

console.log(window); => undefined
console.log(document); => undefined

（2）小程式中有更加多的方法函式

wx.getApp、wx.getCurrentPages、getMenuButtonBoundingClientRect、wx.getSystemInfo、wx.getLaunchOptionsSync等等微信自帶API實用的介面，因為小程式相比于網頁版的，需要適配各種機型或者作業系統（ios、安卓或者鴻蒙等等），所要考慮的東西大大增加，難度也有所增加，除此之外，還有一個比較特殊的函式——生命周期函式，而小程式的也有些不同，

（3）生命周期函式

app、page里面都會有

1.1 監聽頁面加載

onLoad: function (options) {},

一個頁面只會呼叫一次，可以在 onl oad 中獲取打開當前頁面所呼叫的 query 引數，

1.2 監聽頁面初次渲染完成

onReady: function () {},

一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和視圖層進行互動，

1.3 監聽頁面顯示

onShow: function () {},

每次打開頁面都會呼叫一次，

1.3 監聽頁面隱藏

onHide: function () {},

當navigateTo或底部tab切換時呼叫，

1.4 監聽頁面卸載

onUnload: function () {},

當redirectTo或navigateBack的時候呼叫，

微信小程式的 app.js 中 獨有的 函式

2.1 監聽小程式初始化

onLaunch:function () {},

當小程式初始化完成時，會觸發 onLaunch（全域只觸發一次）

2.2 錯誤監聽函式

onError:function () {},

當小程式發生腳本錯誤，或者 api 呼叫失敗時，會觸發 one rror 并帶上錯誤資訊

2.JavaScript的基礎一小部分

我不知道的才會進行記錄，

（1）關鍵字與保留字

關鍵字是值Javascript默認定義具有特殊含義的詞匯，如指令名、陳述句名、函式名、方法名、物件名、屬性名，

（2）系統常量

Javascript暫不支持constant關鍵字，不允許用戶自定義常量，但是提供了幾個默認常量供開發使用，這些系統常量主要是數學和數值常量，方便數學運算和特殊值參考，有以下系統常量：

Math.E: 常量e,自然對數的底數，
Math.LN10: 10的自然對數，
Math.LN2: 2的自然對數，
Math.LOG10E: 以10為底的e的對數，
Math.LOG2E: 以2為底的e的對數，
Math.PI: 常量PI.
Math.SQRT12: 2的平方根除以1，
Math.SQRT2: 2的平方根，
Number. MAX VALUE: 可表示的最大的數，
Number. MIN VALUE: 可表示的最小的數，
Number.NaN: 非數字值，
Number. NEGATIVE INFINITY: 負無窮大；溢位時回傳該值，
Number. POSITIVE INFINITY: 正無窮大：溢位時回傳該值，

（3）運算子

（4）例外處理陳述句

例外表示一種非正常的資訊，它提示程式發生了意外或錯誤，然后Javascrip通過一定的機制把例外信號給暴露出來，這個操作被稱為拋出（throw），拋出操作將告訴系統當前程式出現了問題，Javascript使用例外處理陳述句捕獲（catch）這個例外，并進行處理，

語法形式：

try{
   CreateException();
}
catch(ex){
   alert(ex.number+"\n"+ex.description);
}
finally{
   alert("end");
}

例子：

    try{       //嘗試運行下面代碼
      alert("執行程式");
      var err=new Error("例外");
      throw err;
    }
    catch(e){  //捕獲例外資訊，并進行顯示
      alert("錯誤名稱："+e.name+"\n 錯誤資訊："+e.message);
    }
    finally{   //最后必須執行的陳述句
      alert("finally");
    }

（5）with陳述句和空陳述句

with陳述句能夠為一組陳述句創建預設的物件，在這一句陳述句中，任何不指定物件的屬性參考都將被認為是預設物件的，其語法形式如下：

with(object){
   statements
}

例子：給id為box的元素補上兩種樣式

 with(document.getElementById("box").style){
      borderColor="red";
      borderWidth="1px";
 }

（6）資料型別

函式單獨拿出來記錄

使用typeof運算子可以檢測資料型別（typeof a）

1、數值

使用toString()可以把數值轉化為字串，

有定義的特殊數值，上文已提及，也就是系統常量部分，

2、字串

使用parseInt()和parseFloat()方法可以把字串轉化為數值，parseInt為整數，parseFloat為浮點數，

使用字串的replace方法可以實作字串替換操作，該方法包含兩個引數：第一個引數表示執行匹配的正則運算式，也可以傳遞字串，第二個引數表示準備代替匹配的子字串，

在該方法中，約定了一個特殊的字符“$”，如果這個美元符號附加了一個序號，就表示參考正則運算式中匹配子運算式存盤的字串，語意詳細說明：

$1、$2、$3……：與正則運算式中的第n個子運算式相匹配的文本

$&: 與正則運算式相匹配的子字串

$`: 位于匹配子字串左側的文本

$': 位于匹配子字串右側的文本

$$: 表示$符號

3、布爾型

要把任何值轉化為布爾型資料，在值的前面增加兩個感嘆號即可，任何非0數值轉化后為true，而0是false，

4、物件

系統內置型別函式，即特殊物件：

var o = new Object();            //構造原型物件
var date = new Date();           //構造日期物件
var ptn = new RegExp("ab+c","i") //構造正則運算式物件

5、陣列

定義陣列通過建構式Array()和運算子new來實作，

改變陣列長度、動態增加或洗掉陣列元素：

1、使用push()和pop()方法來操作陣列

使用push方法可以在陣列末尾插入一個或多個元素，使用pop方法可以依次把它們從陣列中洗掉，

2、使用unshift()和shift()方法

和1類似，不過unshift和shift作用于頭部，

3、使用splice()方法

該方法時一個通用洗掉和插入元素的方法，它可以在陣列指定的位置開始洗掉或插入元素，

splice方法包含三個引數：第一個引數指定插入的起始位置，第二個引數指定要洗掉元素的個數，第三個引數開始表示插入的具體元素，

陣列與字串互轉：

使用join方法可以把陣列轉換為多種形式的字串，join方法包含一個引數，用來定義合并元素的連字符，如果join方法不提供引數，則默認以逗號連接每個元素，

使用split方法可以把字串劈開為一個陣列，該方法包含兩個引數：第一個引數指定劈開的分隔符，第二引數指定回傳陣列的長度，

陣列排順：

使用reverse方法可以顛倒陣列元素的順序，該方法是在原陣列基礎上進行操作的，不會新建陣列，

sort方法能夠對于陣列中的元素進行排序，排序的方法通過其引數來決定，這個引數是一個比較兩個元素值的閉包，如果省略引數，則sort方法將按默認的規則對陣列進行排序，

連接陣列：

concat方法能夠把該方法中的引數追加到指定陣列中，形成一個新的連接陣列，

截取子陣列：

slice方法將回傳陣列中指定的片段，所謂片段就是陣列中的一個子陣列，該方法包含兩個引數，它們指定要回傳子陣列在原陣列中的起止點，其中第一個引數指定的元素是被截取的范圍之內，而第二個引數指定的元素不被截取，

（7）函式應用

1、匿名函式

匿名函式就是沒有名稱的函式，它相當于一個復雜的運算式，當只需要一次性使用函式時，使用匿名函式會更加有效率，

var z = function(x,y){
    return (x+y)/2;
} (23,35);     //回傳29

2、函式作為引數

函式作為值可以進行傳遞，因此可以把函式作為引數傳遞給另一個函式，也可以作為回傳值，通過這種方式增強函式的應用能力，

var a = function (f,x,y){
    return f(x,y);
};

var b = function (x,y){
    return x+y;
};

alert( a(b,3,4));     //回傳7

（8）閉包函式

閉包是一個擁有許多變數和系結了這些變數的環境的運算式（通常是一個函式），因而這些變數也是該運算式的一部分，閉包函式就是外部函式被呼叫后，它的變數不會消失，仍然被內部函式所使用，而且所有的內部函式都擁有對外部函式的訪問權限，

function a（）{               //外層函式，閉包函式
       var n=0；              //私有變數
  function b（m）{            //內部函式，私有函式
       n=n+m；                //遞加上級私有變數的值
           return n；         //回傳改變后的值
  }
  return b；                  //回傳私有函式
}
var b=a（）；                 //呼叫外層函式，回傳內部函式
document. write（b（3））；   //輸出3
document. write（"<br>"）；
document. write（b（3））；   //輸出6
document. write（"<br>"）；
document. write（b（3））；   //輸出9
document. write（"<br>"）；
document. write（b（3））；   //輸出12

3.事件處理

簡簡單單寫點，發現有點復雜，后續再繼續，

（1）事件模型

基本事件模型：也稱為DOM 0事件模型，是瀏覽器初期出現的一種比較簡單的事件模型，主要通過事件屬性，為指定標簽系結事件處理函式，由于這種模型應用比較廣泛，獲得了所有瀏覽器的支持，目前依然比較流行，但是這種模型對于HTML檔案標簽依賴嚴重，不利于 JavaScript獨立開發，
DOM事件模型：由W3C制定，是目前標準的事件處理模型，所有符合標準的瀏覽器都支持該模型，E怪異模式不支持，DOM事件模型包括DOM2事件模塊和DOM3事件模塊，DOM3事件模塊為DOM2事件模塊的升級版，略有完善，主要是新增了一些事情型別，以適應移動設備的開發需要，但大部分規范和用法保持一致，
IE事件模型：E4.0及其以上版本瀏覽器支持，與DOM事件模型相似，但用法不同，
Netscape事件模型：由 Netscape4瀏覽器實作，在 Netscape6中停止支持，

（2）注冊事件和銷毀事件

通過呼叫物件的addEventListener方法來注冊事件，用法如下：

element.addEventListener(String a,Function b,boolean c);

使用removeEventListener方法可以從指定物件中洗掉已經注冊的事件處理函式，用法如下：

element.removeEventListener(String a, Function b,boolean c);

4.使用Ajax

Ajax是利用JavaScript腳本和XML資料實作客戶端與服務器端之間快捷通信的一種技巧，這次先簡單記錄一些簡單的，

（1）使用XMLHttpRequest

使用XMLHttpRequest實作異步通信步驟：

1、定義XMLHttpRequest實體物件，

2、呼叫XMLHttpRequest物件的open方法打開服務器端URL地址，

3、注冊onreadystatechange事件處理函式，準備接收回應資料，并進行處理，

4、呼叫XMLHttpRequest物件的send方法發送請求

（2）發送GET請求

發送GET請求時，只需將包含查詢字串的URL傳入open方法，設定第一個引數值為“GET”即可，

（3）發送POST請求

與GET類似，但需要將setRequestHeader方法設定請求訊息的內容型別為“application/x-www-form-urlencoded”，從而表示傳遞的時表單值，

（4）中止請求

使用 abort方法可以中止正在進行的異步請求，在使用abort方法前，應先清除onreadystatechange事件處理函式，因為IE和 Mozilla在請求中止后也會激活這個事件處理函式，如果給onreadystatechange屬性設定為ull,則IE會發生例外，所以可以為它設定一個空函式，