目錄
## 一、匿名函數
### 1、學過的函數
1. 普通函數: function 函數名(){}
2. 事件處理函數: onclick = function(){}
3. 構造函數: function Tab(){}
4. 表達式函數: var 變量名 = function(){}
5. 匿名函數: function (){ // 代碼塊 }
```javascript
function (){
console.log(123);
}
```
### 2、立即執行函數
1. 立即執行函數: immediately invoked function expression 自執行函數
2. 優點: 避免全局變量污染 減少不必要的內存浪費
```javascript
(function (){
console.log(1);
})();
(function (){
console.log(2);
}());
// 2. 有參數: 形參: 函數聲明後的括號中 實參: 函數調用的括號中
(function (a, b){
console.log(a, b);
}(10,20));
// 3. 有返回值: return 值
var s = (function (a, b){
console.log(a, b);
return a + b;
}(10,20));
console.log(s);
```
## 二、閉包
### 1、閉包概念
> 能夠讀取其他函數內部變量的函數(函數裏面套函數, 內部函數訪問外部函數的變量), 本質上, 將函數內外連接起來的橋樑
### 2、閉包特點:
> 閉包中使用的變量是一隻存儲在內存中, 類似全局變量, 避免全局污染
```javascript
// 1. 閉包:
function fn(){
var s = 10;
return function(){
console.log(s++);
}
}
// var f = fn();
// console.log(f); // function(){ console.log(s++); }
// f(); // 10
// f(); // 11
// f(); // 12
// console.log(s); // 全局s 沒有
fn()(); // 10
fn()(); // 10
fn()(); // 10
```
### 2、閉包作用
- 1---解決全局變量i帶來的影響
```javascript
var li = document.getElementsByTagName('li');
console.log(li);
// for循環執行太快, i最後保留在結束條件
// 解決全局變量i帶來的影響
for (var i = 0; i < li.length; i++) {
(function (s) {
li[s].onclick = function () {
alert(s); // 5
}
})(i);
}
```
- 2---模擬私有變量
```javascript
function myName(v){
var val = v;
return {
'sayName': function(){
console.log(val);
},
'setName': function(n){
val = n;
}
}
}
var s = myName('付小朋友');
console.log(s);
s.sayName();
s.setName('付大朋友');
s.sayName();
```
## 三、ajax
### 1、ajax概念
> asynchronous javascript and xml(異步js和xml), 是一種創建交互式網頁應用的網頁開發技術, 可以快速創建動態性網頁的技術, 是通過和後臺進行少量的數據交互, ajax可以實現網頁的異步更新。
### 2、同步/異步
- 同步：客戶端和服務端進行數據交互的時候, 不可以做其他的事情
- 異步: 客戶端和服務端進行數據交互的時候, 可以做其他的事情
### 3、readyState: 5種
- 0: 創建了對象
- 1: 建立了連接
- 2: 發送了請求
- 3: 接收到了這個請求, 並且開始處理, 還沒有處理完成
- 4: 已經處理完成, 並返回響應包
### 4、status: 網絡狀態碼
- 1XX: 信息部分
- 2XX: 請求成功, 200
- 3XX: 請求重定向, 304
- 4XX: 頁面錯誤, 404, 405
- 5XX: 服務器錯誤, 500, 504
### 5、ajax創建的過程
1. get請求
1. 創建ajax請求對象
2. 建立連接 ajax.open(請求方式, 請求地址+data, 是否異步);
3. 發送請求 ajax.send();
4. 監聽處理情況
```javascript
// 1. 創建ajax請求對象
var ajax = new XMLHttpRequest(); // http: 超文本傳輸協議 request:請求
// var ajax = new ActiveXObject('Microsoft.XMLHTTP'); // ie6創建
// 2. 建立連接 ajax.open(請求方式, 請求地址+data, 是否異步);
// 請求方式： get、post
// 請求地址+data: 訪問的地址及傳輸的數據, 請求地址?key=value&key=value
// 是否異步： 布爾值, true---異步 false---同步
ajax.open('get', 'a.txt?a=1&b=2', true);
// 3. 發送請求 ajax.send();
ajax.send();
// 4. 監聽處理情況
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){// 請求處理完成
if(ajax.status == 200){ // 請求成功
console.log(ajax.response);
}
}
}
```
2. post請求
1. 創建ajax請求對象
2. 建立連接 ajax.open(請求方式, 請求地址, 是否異步);
3. 設置請求頭\編碼格式:告訴服務器當前提交數據的類型
4. 發送請求 ajax.send(key=value&key=value);
5. 監聽處理情況
```javascript
// 1. 創建ajax請求對象
var ajax = new XMLHttpRequest(); // http: 超文本傳輸協議 request:請求
// 2. 建立連接 ajax.open(請求方式, 請求地址, 是否異步);
// 請求方式： get、post
// 請求地址: 訪問的地址及傳輸的數據, 請求地址
// 是否異步： 布爾值, true---異步 false---同步
ajax.open('post', 'a.txt', true);
// 2.1 設置請求頭\編碼格式:告訴服務器當前提交數據的類型
ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
// 3. 發送請求 ajax.send(key=value&key=value);
ajax.send('a=1&b=2');
// 4. 監聽處理情況
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){// 請求處理完成
if(ajax.status == 200){ // 請求成功
console.log(ajax.response);
}
}
}
```
3. Content-type參數
application/x-www-form-urlencoded: 默認, 表單
text/plain: 文本
multiple/form-data: 上傳文件
## 四、json
### 1、json格式數據：
- 1.json文件後綴: .json
- 2.文件中2種數據格式: []\{}
- 3.key:value,key必須加雙引號
- 4.value只能是簡單數據類型: string\number\boolean\null\{}\[] 函數、undefined、變量不能用
- 5.string必須要加雙引號
### 2、json數據轉成js數據
- js: {}默認就是完整的js代碼塊
- 方法一：eval(要轉的數據)
- 方法二：JSON.parse(要轉的數據)
```javascript
myjsKu.ajax({
'url': 'student.json', //相對html頁面的地址
'success': function(res) {
console.log(res); //string類型
//js中 {}默認就是完整的js代碼塊
//方法一：eval(要轉的數據),將字符串轉成js代碼並執行其中的js代碼
// var r = eval(res);//res是字符串--轉成表達式加（）
var r = eval('(' + res + ')'); //運行字符串中js的代碼
console.log(r);
console.log(eval('3+2')); //5
//方法二、JSON.parse(要轉的數據)：json數據轉成js數據
console.log(JSON.parse(res));
var r = JSON.parse(res);
//字符串轉成數組後對其進行遍歷--獲取到每一個學生的信息
//ajax請求後操作數組的方式
for (var i = 0; i < r.length; i++) {
console.log(r[i]);
ul.innerHTML += '<li><span>' + r[i].name + '</span> <span>' + r[i].sex + '</span> <span>' + r[i].age + '</span></li>'
}
}
})
```
## 五、移動端事件
1. touchstart: 當手指在屏幕上按下的時候
2. touchmove: 當手指在屏幕上移動的時候
3. touchend: 當手指離開屏幕的時候觸發
```javascript
div.ontouchstart = function(){
console.log('這是點擊touch');
}
div.addEventListener('touchmove', function(){
console.log('touchmove');
});
div.addEventListener('touchend', function(){
console.log('touchend');
});
// 注意： 在移動端一般使用事件綁定的方式添加事件
```
4. pc端事件在移動端中的問題: 有一個300ms的延遲
5. 移動端事件問題:
1. 點透: 當兩個元素疊加在一起，並且下方元素有點擊事件或連接跳轉時， 當上方元素點擊隱藏後，並且點擊事件時間不超過300ms, 事件會漂移到下方元素上, 造成了點透事件
2. ```javascript
var div = document.getElementsByTagName('div')[0];
div.addEventListener('touchstart', function(){
div.style.display = 'none';
});
```
3.解決
- 阻止默認事件，在 touch 時間的某個階段執行 event.preventDefault() ，去取消系統生成的 click 事件，一半在 touchend 中執行
- 要消失的元素延時300ms，然後在消失
6. 事件對象
1. 事件處理函數的第一個參數
2. ```javascript
div.addEventListener('touchstart', function(ev){
console.log(ev); // TouchEvent
console.log(ev.touches); // 當前位於整個屏幕上的手指列表
console.log(ev.targetTouches); // 當前位於目標元素上的一個手指列表
console.log(ev.changedTouches); // 當前事件的手指列表
var touch = ev.changedTouches[0]; // 在事件的手指列表中拿出來第一個手指
console.log(touch);
console.log(touch.identifier); // 標識符
console.log(touch.target); // 目標源
console.log(touch.screenX, touch.screenY); // 顯示器
console.log(touch.clientX, touch.clientY); // 到可視區域的左上角
console.log(touch.pageX, touch.pageY); // 到頁面左上角的距離
console.log(touch.radiusX, touch.radiusY); // 手指觸發的圓的半徑
console.log(touch.force); // 壓力的大小
console.log(touch.rotationAngle); // 旋轉角度
});
```
## 六、touch.js
1. 介紹: 移動端的手勢識別和事件庫, 百度clouda團隊維護, 在百度內部也是廣泛應用的
2. 搜索: touch.js: touch cdn ---> bootcdn 0.2.14
3. touch.js: 標準格式版本, 學習
touch.min.js: 壓縮版本, 工作
4. 作用： 專門爲移動設備設計, 請在webkit內核中使用
5. touch.on()
1. touch.on(elem, type, callback);
elem: 要綁定事件的對象
type: 事件類型
callback: 回調函數
+ 給一個元素綁定一個事件
+ 給一個元素的同一事件添加不同的處理函數
+ 給一個元素不同事件添加同一處理函數
+ 給同一元素不同事件添加不同處理函數
```javascript
var div = document.getElementsByTagName('div')[0];
// 1. 給一個元素綁定一個事件
// tap: 單擊
touch.on(div, 'tap', function (ev) {
console.log(ev.type);
});
function callB(ev){
console.log('當前事件類型是: ' + ev.type);
}
// 2. 給一個元素的同一事件添加不同的處理函數
touch.on(div, 'tap', callB);
// 3. 給一個元素不同事件添加同一處理函數
// hold: 長按 doubletap:雙擊事件
touch.on(div, 'tap hold doubletap', callB);
// 4. 給同一元素不同事件添加不同處理函數
// touch.on(elem, {'事件類型': 事件處理函數});
touch.on(div, {
'hold': function(){
console.log('1');
},
'tap': function(){
console.log(2);
}
});
```
2. 事件委託：touch.on(父元素, type, selector, callback)
父元素：父元素\選擇器
type: 事件類型
selector: 子元素的選擇器
callback: 回調函數
```java
var div = document.getElementsByTagName('div')[0];
touch.on(div, 'tap', 'span.box,em', function(ev){
console.log(ev.target);
console.log(this);
});
```
6. 事件對象
```javascript
console.log(ev);
console.log(ev.originEvent); // 原生的事件對象
console.log(ev.type); // 事件類型
console.log(ev.rotation); // 旋轉角度
console.log(ev.scale); // 縮放比例
console.log(ev.direction); // 操作方向
console.log(ev.position); // 位置信息
console.log(ev.distanceX, ev.distanceY); // 手勢事件中滑動事件在橫線和縱向上的偏移量, 以當前點擊開始的位置作爲座標原點，分成四象限, 向上、左是負值, 向下、右是正值
console.log(ev.angle); // rotate事件觸發的時候, 旋轉的角度
console.log(ev.duration, '1----'); // 時長(touchstart到touchend)
```
| 類 | 事件 | 描述 |
| :---------- | -------------- | ------------ |
| 縮放類 | pinchstart | 縮放手勢起點 |
| pinchend | 縮放手勢終點 | |
| pinch | 縮放手勢 | |
| pinchin | 收縮 | |
| pinchout | 放大 | |
| 旋轉類 | rotateleft | 向左旋轉 |
| rotateright | 向右旋轉 | |
| rotate | 旋轉 | |
| 滑動類 | swipestart | 滑動手勢起點 |
| swiping | 滑動中 | |
| swipeend | 滑動手勢終點 | |
| swipeleft | 向左滑動 | |
| swiperight | 向右滑動 | |
| swipeup | 向上滑動 | |
| swipedown | 向下滑動 | |
| swipe | 滑動 | |
| 拖動類 | dragstart | 拖動開始 |
| drag | 拖動 | |
| dragend | 拖動結束 | |
| 長按 | hold | |
| 單擊、雙擊 | Tap、doubletap | |