ajax的原理：相當於在用戶和服務器之間加一箇中間層（ajax引擎),使用戶操作與服務器響應異步化。
優點：在不刷新整個頁面的前提下與服務器通信維護數據。不會導致頁面的重載
可以把前端服務器的任務轉嫁到客服端來處理，減輕服務器負擔，節省寬帶
劣勢：不支持back。對搜索引擎的支持比較弱；不容易調試\t
怎麼解決呢？通過location.hash值來解決Ajax過程中導致的瀏覽器前進後退按鍵失效，
解決以前被人常遇到的重複加載的問題。主要比較前後的hash值，看其是否相等，在判斷是否觸發ajax
複製代碼
function getData(url) {
var xhr = new XMLHttpRequest(); // 創建一個對象，創建一個異步調用的對象
xhr.open('get', url, true) // 設置一個http請求，設置請求的方式，url以及驗證身份
xhr.send() //發送一個http請求
xhr.onreadystatechange = function () { //設置一個http請求狀態的函數
if (xhr.readyState == 4 && xhr.status ==200) {
console.log(xhr.responseText) // 獲取異步調用返回的數據
}
}
}
Promise(getData(url)).resolve(data => data)
\t AJAX狀態碼：0 - （未初始化）還沒有調用send()方法
\t\t 1 - （載入）已調用send方法，正在發送請求
\t\t 2 - （載入完成呢）send()方法執行完成
\t\t 3 - （交互）正在解析相應內容
\t\t 4 - （完成）響應內容解析完成，可以在客戶端調用了
```
#### 三、函數節流（throttle）
```
function throttle (func, wait) {
var timeout;
var previous = 0;
return function () {
context = this;
args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
timeout = null;
func.apply(context,args)
}, wait);
}
}
}
}
```
#### 四、函數防抖（dobounce）
```
function debounce (func, wait) {
var timeout;
return function() {
var context = this;
var args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context,args)
}, wait);
}
}
```
#### 五、實現一個函數clone，可以對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值複製
```
Object.prototype.clone = function() {
var newObject = this.constructor === Array ? [] : {} //對象的深拷貝 獲取對應的構造函數 [] 或者 {}
for (let e in this) { //遍歷對象的屬性 in this[e]
newObject[e] = typeof this[e] === 'object' ? this[e].clone() : this[e] //對象中的屬性如果還是對象 那就繼續遞歸 否則就返回基本的數據類型
}
return newObject
}
```
#### 六、實現一個簡單的Promise https://juejin.im/post/5b2f02cd5188252b937548ab
```
class Promise {
constructor (executor) { // executor裡面有兩個參數，一個叫resolve（成功），一個叫reject（失敗）。
this.status = 'pending',
this.value = undefined;
this.reason = undefined;
// 成功存放的數組
this.onResolvedCallbacks = [];
// 失敗存放法數組
this.onRejectedCallbacks = [];
let resolve = (value) => {
if (this.status == 'pending') {
this.status = 'resolve';
this.value = value;
this.onResolvedCallbacks.forEach(fn => fn())
}
}
let reject = (reason) => {
if (this.status == 'pending') {
this.status = 'reject';
this.reason = reason;
this.onRejectedCallbacks.forEach(fn => fn())
}
}
try{
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
then (onFullFilled,onRejected) {
if (this.status == 'resolved') {
onFullFilled(this.value)
}
if (this.status == 'rejectd') {
onRejected(this.reason);
}
if (this.status == 'pending') {
this.onResolvedCallbacks.push(()=>{
onFullFilled(this.value);
})
this.onRejectedCallbacks.push(()=> {
onRejected(this.reason);
})
}
}
}
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello world')
}, 1000);
})
p.then((data) =>{
console.log(data)
},(err) =>{
console.log(err);
})
```
#### 七、發佈訂閱者模式（觀察者模式）
```
var event = {}; // 發佈者
event.clientList = [] //發佈者的緩存列表
event.listen = function (fn) { // 增加訂閱者函數
this.clientList.push(fn)
}
event.trigger = function () { // 發佈信息
for (var i =0;i var fn = this.clientList[i];
fn.apply(this, arguments);
}
}
event.listen (function(time) {
console.log('正式上班時間為：' +time)
})
event.trigger ('2018/7')
```
#### 八、手動寫一個node服務器
```
const http = require('http');
const fs = require('fs');
const server = http.createServer((req,res) => {
\tif (reu.url == '/') {
\tconst indexFile = fs.createReadStream('./index.html')
\treq.writeHead(200,{'context-Type':'text/html;charset = utf8})
\tindexFile.pipe(res)
}
server.listen(8080)
``` 
分享到:
閱讀更多 碼農三哥 的文章
