roxy 對象（Proxy）是 ES6 的一個非常酷卻鮮為人知的特性。雖然這個特性存在已久，但是我還是想在本文中對其稍作解釋，并用一個例子說明一下它的用法。

什么是 Proxy

正如 MDN 上簡單而枯燥的定義：

Proxy 對象用于定義基本操作的自定義行為（如屬性查找，賦值，枚舉，函數調用等）。

雖然這是一個不錯的總結，但是我卻并沒有從中搞清楚 Proxy 能做什么，以及它能幫我們實現什么。

首先，Proxy 的概念來源于元編程。簡單的說，元編程是允許我們運行我們編寫的應用程序（或核心）代碼的代碼。例如，臭名昭著的 eval 函數允許我們將字符串代碼當做可執行代碼來執行，它是就屬于元編程領域。

Proxy API 允許我們在對象和其消費實體中創建中間層，這種特性為我們提供了控制該對象的能力，比如可以決定怎樣去進行它的 get 和 set，甚至可以自定義當訪問這個對象上不存在的屬性的時候我們可以做些什么。

Proxy 的 API

var p=newProxy(target, handler);

Proxy 構造函數獲取一個 target 對象，和一個用來攔截 target 對象不同行為的 handler 對象。你可以設置下面這些攔截項：

• has —?攔截 in 操作。比如，你可以用它來隱藏對象上某些屬性。
• get —?用來攔截讀取操作。比如當試圖讀取不存在的屬性時，你可以用它來返回默認值。
• set — 用來攔截賦值操作。比如給屬性賦值的時候你可以增加驗證的邏輯，如果驗證不通過可以拋出錯誤。
• apply — 用來攔截函數調用操作。比如，你可以把所有的函數調用都包裹在 try/catch 語句塊中。

這只是一部分攔截項，你可以在 MDN 上找到完整的列表。

下面是將 Proxy 用在驗證上的一個簡單的例子：

constCar={ maker: 'BMW', year: 2018,};
const proxyCar=newProxy(Car, {set(obj, prop, value) {if(prop==='maker'&& value.length < 1) {thrownewError('Invalid maker');}
if(prop==='year'&& typeof value !=='number') {thrownewError('Invalid year');} obj[prop]=value;returntrue;}
});
proxyCar.maker=''; // throw exceptionproxyCar.year='1999'; // throw exception

可以看到，我們可以用 Proxy 來驗證賦給被代理對象的值。

使用 Proxy 來調試

為了在實踐中展示 Proxy 的能力，我創建了一個簡單的監測庫，用來監測給定的對象或類，監測項如下：

• 函數執行時間
• 函數的調用者或屬性的訪問者
• 統計每個函數或屬性的被訪問次數。

這是通過在訪問任意對象、類、甚至是函數時，調用一個名為 proxyTrack 的函數來完成的。

如果你希望監測是誰給一個對象的屬性賦的值，或者一個函數執行了多久、執行了多少次、誰執行的，這個庫將非常有用。我知道可能還有其他更好的工具來實現上面的功能，但是在這里我創建這個庫就是為了用一用這個 API。

使用 proxyTrack

首先，我們看看怎么用：

functionMyClass() {}
MyClass.prototype={ isPrime: function() {const num=this.num;for(var i=2; i < num; i++)if(num % i===0) returnfalse;return num !==1&& num !==0;},
 num: null,};
MyClass.prototype.constructor=MyClass;
const trackedClass=proxyTrack(MyClass);
function start() {const my=new trackedClass(); my.num=573723653;if(!my.isPrime()) {return`${my.num} is not prime`;}}
function main() { start();}
main();

如果我們運行這段代碼，控制臺將會輸出：

MyClass.num is being set by start for the 1 timeMyClass.num is being get by isPrime for the 1 timeMyClass.isPrime was called by start for the 1 time and took 0 mils.MyClass.num is being get by start for the 2 time

proxyTrack 接受 2 個參數：第一個是要監測的對象/類，第二個是一個配置項對象，如果沒傳遞的話將被置為默認值。我們看看這個配置項默認值長啥樣：

const defaultOptions={ trackFunctions: true, trackProps: true, trackTime: true, trackCaller: true, trackCount: true, stdout: null, filter: null,};

可以看到，你可以通過配置你關心的監測項來監測你的目標。比如你希望將結果輸出出來，那么你可以將 console.log 賦給 stdout。

還可以通過賦給 filter 的回調函數來自定義地控制輸出哪些信息。你將會得到一個包括有監測信息的對象，并且如果你希望保留這個信息就返回 true，反之返回 false。

在 React 中使用 proxyTrack

因為 React 的組件實際上也是類，所以你可以通過 proxyTrack 來實時監控它。比如：

classMyComponent extends Component{...}
exportdefault connect(mapStateToProps)(proxyTrack(MyComponent, { trackFunctions: true, trackProps: true, trackTime: true, trackCaller: true, trackCount: true, filter: (data)=> {if( data.type==='get'&& data.prop==='componentDidUpdate') returnfalse;returntrue;}}));

可以看到，你可以將你不關心的信息過濾掉，否則輸出將會變得雜亂無章。

實現 proxyTrack

我們來看看 proxyTrack 的實現。

首先是這個函數本身：

exportfunction proxyTrack(entity, options=defaultOptions) {if(typeof entity==='function') return trackClass(entity, options);return trackObject(entity, options);}

沒什么特別的嘛，這里只是調用相關函數。

再看看 trackObject：

function trackObject(obj, options={}) {const{ trackFunctions, trackProps }=options;
 let resultObj=obj;if(trackFunctions) { proxyFunctions(resultObj, options);}if(trackProps) { resultObj=newProxy(resultObj, {get: trackPropertyGet(options),set: trackPropertySet(options),});}return resultObj;}function proxyFunctions(trackedEntity, options) {if(typeof trackedEntity==='function') return;Object.getOwnPropertyNames(trackedEntity).forEach((name)=> {if(typeof trackedEntity[name]==='function') { trackedEntity[name]=newProxy(trackedEntity[name], { apply: trackFunctionCall(options),});}});}

可以看到，假如我們希望監測對象的屬性，我們創建了一個帶有 get 和 set 攔截器的被監測對象。下面是 set 攔截器的實現：

function trackPropertySet(options={}) {returnfunctionset(target, prop, value, receiver) {const{ trackCaller, trackCount, stdout, filter }=options;const error=trackCaller && newError();const caller=getCaller(error);const contextName=target.constructor.name==='Object'? '': `${target.constructor.name}.`;const name=`${contextName}${prop}`;const hashKey=`set_${name}`;if(trackCount) {if(!callerMap[hashKey]) { callerMap[hashKey]=1;} else{ callerMap[hashKey]++;}} let output=`${name} is being set`;if(trackCaller) { output +=` by ${caller.name}`;}if(trackCount) { output +=` for the ${callerMap[hashKey]} time`;} let canReport=true;if(filter) { canReport=filter({ type: 'get', prop, name, caller, count: callerMap[hashKey], value,});}if(canReport) {if(stdout) { stdout(output);} else{ console.log(output);}}returnReflect.set(target, prop, value, receiver);};}

更有趣的是 trackClass 函數（至少對我來說是這樣）：

function trackClass(cls, options={}) { cls.prototype=trackObject(cls.prototype, options); cls.prototype.constructor=cls;
returnnewProxy(cls, { construct(target, args) {const obj=new target(...args);returnnewProxy(obj, {get: trackPropertyGet(options),set: trackPropertySet(options),});}, apply: trackFunctionCall(options),});}

在這個案例中，因為我們希望攔截這個類上不屬于原型上的屬性，所以我們給這個類的原型創建了個代理，并且創建了個構造函數攔截器。

別忘了，即使你在原型上定義了一個屬性，但如果你再給這個對象賦值一個同名屬性，JavaScript 將會創建一個這個屬性的本地副本，所以賦值的改動并不會改變這個類其他實例的行為。這就是為何只對原型做代理并不能滿足要求的原因。

在前面

今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。

這篇文章比較基礎，在國慶期間的業余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。

自測讀不讀

以下是本文所涉及到的知識點，break or continue ?

• 文件上傳原理
• 最原始的文件上傳
• 使用 koa2 作為服務端寫一個文件上傳接口
• 單文件上傳和上傳進度
• 多文件上傳和上傳進度
• 拖拽上傳
• 剪貼板上傳
• 大文件上傳之分片上傳
• 大文件上傳之斷點續傳
• node 端文件上傳

原理概述

原理很簡單，就是根據 http 協議的規范和定義，完成請求消息體的封裝和消息體的解析，然后將二進制內容保存到文件。

我們都知道如果要上傳一個文件，需要把 form 標簽的enctype設置為multipart/form-data,同時method必須為post方法。

那么multipart/form-data表示什么呢？

multipart互聯網上的混合資源，就是資源由多種元素組成，form-data表示可以使用HTML Forms 和 POST 方法上傳文件，具體的定義可以參考RFC 7578。

multipart/form-data 結構

看下 http 請求的消息體

• 請求頭：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次請求要上傳文件，其中boundary表示分隔符，如果要上傳多個表單項，就要使用boundary分割，每個表單項由———XXX開始，以———XXX結尾。

• 消息體- Form Data 部分

每一個表單項又由Content-Type和Content-Disposition組成。

Content-Disposition: form-data 為固定值，表示一個表單元素，name 表示表單元素的 名稱，回車換行后面就是name的值，如果是上傳文件就是文件的二進制內容。

Content-Type：表示當前的內容的 MIME 類型，是圖片還是文本還是二進制數據。

解析

客戶端發送請求到服務器后，服務器會收到請求的消息體，然后對消息體進行解析，解析出哪是普通表單哪些是附件。

可能大家馬上能想到通過正則或者字符串處理分割出內容，不過這樣是行不通的，二進制buffer轉化為string,對字符串進行截取后，其索引和字符串是不一致的，所以結果就不會正確，除非上傳的就是字符串。

不過一般情況下不需要自行解析，目前已經有很成熟的三方庫可以使用。

至于如何解析，這個也會占用很大篇幅，后面的文章在詳細說。

最原始的文件上傳

使用 form 表單上傳文件

在 ie時代，如果實現一個無刷新的文件上傳那可是費老勁了，大部分都是用 iframe 來實現局部刷新或者使用 flash 插件來搞定，在那個時代 ie 就是最好用的瀏覽器（別無選擇）。

DEMO

這種方式上傳文件，不需要 js ，而且沒有兼容問題，所有瀏覽器都支持，就是體驗很差，導致頁面刷新，頁面其他數據丟失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        選擇文件:
            <input type="file" name="f1"/> input 必須設置 name 屬性，否則數據無法發送<br/>
<br/>
            標題：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 傳</button>

</form>

復制代碼

文件上傳接口

服務端文件的保存基于現有的庫koa-body結合 koa2實現服務端文件的保存和數據的返回。

在項目開發中，文件上傳本身和業務無關，代碼基本上都可通用。

在這里我們使用koa-body庫來實現解析和文件的保存。

koa-body 會自動保存文件到系統臨時目錄下，也可以指定保存的文件路徑。

然后在后續中間件內得到已保存的文件的信息，再做二次處理。

• ctx.request.files.f1 得到文件信息，f1為input file 標簽的 name
• 獲得文件的擴展名，重命名文件

NODE

/**
 * 服務入口
 */
var http=require('http');
var koaStatic=require('koa-static');
var path=require('path');
var koaBody=require('koa-body');//文件保存庫
var fs=require('fs');
var Koa=require('koa2');

var app=new Koa();
var port=process.env.PORT || '8100';

var uploadHost=`http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //設置文件的默認保存目錄，不設置則保存在系統臨時目錄下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 開啟文件上傳，默認是關閉
}));

//開啟靜態文件訪問
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次處理，修改名稱
app.use((ctx)=> {
    var file=ctx.request.files.f1;//得道文件對象
    var path=file.path;
    var fname=file.name;//原文件名稱
    var nextPath=path+fname;
    if(file.size>0 && path){
        //得到擴展名
        var extArr=fname.split('.');
        var ext=extArr[extArr.length-1];
        var nextPath=path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式輸出上傳文件地址
    ctx.body=`{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server=http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
復制代碼

CODE

https://github.com/Bigerfe/fe-learn-code/