需求，web環(huán)境下的插件系統(tǒng)

我希望在web環(huán)境（browser, app web view)里實(shí)現(xiàn)資源式的插件系統(tǒng)，考慮以下設(shè)計(jì)因素钓猬，

• 沙盒環(huán)境，
  能夠完整加載撩独，卸載敞曹，且插件與框架之間，插件之間需要有充分的隔離性综膀，僅通過(guò)框架暴露的API澳迫，實(shí)現(xiàn)擴(kuò)展，以及功能調(diào)用

• 密集計(jì)算阻塞
  插件由用戶剧劝，我們不能預(yù)測(cè)用戶實(shí)現(xiàn)的方式橄登，因?yàn)閣eb的環(huán)境是單線程，任何密集計(jì)算會(huì)對(duì)主框架的響應(yīng)造成直接影響

web worker已經(jīng)是現(xiàn)代瀏覽器標(biāo)準(zhǔn)讥此，我們能夠且只能夠使用web worker解決以上問(wèn)題示绊。

平凡框架下的web worker（或 actor)使用方式如下，

// main.js
worker.onmessage
worker.postMessage


// ext1.js
self.onmessage
self.postMessage

但這顯然不能滿足我們希望用戶使用簡(jiǎn)單的要求暂论，理想中我們希望面褐，作為插件與框架之間通過(guò)接口定義進(jìn)行通信，如下以API直接調(diào)用的形式

// main.js
main_lib = {
    func_a() ...
    func_b() {
        // ...
        // 遠(yuǎn)程調(diào)用 (RPC)
        this.current_ext.method_a ()
    }

}

// ext1.js
ext_methods = {
    method_a(...args) {
        // ...
        // 遠(yuǎn)程調(diào)用 (RPC)
        const r = remote.func_a()
        // ...
    }
}

因此取胎，需要RPC(remote processure call)設(shè)施

1. 首先構(gòu)建協(xié)議

// 請(qǐng)求展哭，當(dāng)SN為-1時(shí)，我們認(rèn)為是不需要返回的純指令
req(SN, command, ...args) // 序列化
 
// 返回序列化
rsp(SN, res) // 序列化

2. 怎么處理語(yǔ)法闻蛀，remote.method(...args)
   javascript es6有proxy特性匪傍，利用此特性可將 remote.xxx, 轉(zhuǎn)成統(tǒng)一函數(shù)調(diào)用的方式，
   (Tips: proxy特性在很多語(yǔ)言中存在觉痛，ruby里 method_missing(ruby), kotlin叫做 getter delegate役衡，也被叫做面向?qū)ο竽Ｐ偷脑椒?)

// remote對(duì)象 =>
remote = new Proxy({
    // 攔截methodName的訪問(wèn)
    get(methodName) {
        // 構(gòu)造了異步方法
        return (...args) => Promise((res, rej) => {
            const now = time.now()
            remoteTaskManager.req(serial_NO, methodName, [...args], now, now + timeout)
            return remoteTaskManager.subscribeRsp(serial_NO, res, rej);
        })
    }
})
 
// SO, remote.method(arg1, arg2) 構(gòu)造了一個(gè)等待 結(jié)果/超時(shí) 的Promise

3. 異步調(diào)度
   remoteTaskManager，是異步任務(wù)的調(diào)度器薪棒，負(fù)責(zé) 任務(wù)請(qǐng)求/yield手蝎，返回/resume
   remoteTaskManager里維護(hù)一個(gè)任務(wù)狀態(tài)隊(duì)列榕莺，如下

SN  state   time_stamp  timeout
... 

10086   timeout 1433    1435
10087   pending 1434    1436
10088   succ    1435    1437
10089   fail    1436    1438
...

它的兩個(gè)方法將作為構(gòu)造異步函數(shù)的基礎(chǔ)，

// 將異步任務(wù)的上下文放入隊(duì)列
remoteTaskManager.request(serial_NO, methodName, [...args], now, now+timeout)

// 注冊(cè)一個(gè)對(duì)流水號(hào)任務(wù)的回調(diào)
remoteTaskManager.subscribeRsp(serial_NO, onResult, onException)

需求棵介，異步.invork (異步.invork (...

除了簡(jiǎn)單函數(shù)的調(diào)用钉鸯，我們還想支持自身是異步函數(shù)的調(diào)用，（這樣可以remote調(diào)用remote邮辽，完成遠(yuǎn)程連續(xù)調(diào)用的完備性）唠雕，
方法是通過(guò)server 判斷調(diào)用如果返回了promise對(duì)象，等待本地異步完成后吨述，再將結(jié)果傳回client

需求岩睁，遠(yuǎn)程對(duì)象/模塊，鏈?zhǔn)秸{(diào)用

但我們的遠(yuǎn)程API揣云，不僅僅是函數(shù)調(diào)用笙僚，而且還存在 遠(yuǎn)端模塊，遠(yuǎn)端對(duì)象灵再，比如遠(yuǎn)端API如下

remote_API.exports = {
    lib:{
        module_:{
            funA():number
            funB():promise<number>
        }, 
        object_:{
            methodA():number
            methodB():promise<number>
        }
    }
}

javascript 作為動(dòng)態(tài)類型語(yǔ)言肋层， 我們不知道比如說(shuō)，remote.object_or_function 成員是模塊對(duì)象還是函數(shù)翎迁，以下是一個(gè)相當(dāng)trick的方式栋猖，它依賴于 javascript函數(shù)也是對(duì)象 這個(gè)特性，而且以遞歸過(guò)程實(shí)現(xiàn)了連續(xù)調(diào)用

function makeProxy(remote_object_or_function) {
    return new Proxy({
        // 攔截methodName的訪問(wèn)
        get(object_or_function) {
            // 構(gòu)造了異步方法汪榔，如果是函數(shù)蒲拉，調(diào)會(huì)在這里調(diào)用
            const async_object_or_function = (...args)=>Promise((res, rej)=>{
                const now = time.now()
                remoteTaskManager.req(serial_NO, methodName, [...args], now, now+timeout)
                return remoteTaskManager.subscribeRsp(serial_NO, res, rej);
            })
            // 遞歸，如果是對(duì)象痴腌，將會(huì)在這里調(diào)用
            return makeProxy(async_object_or_function);
        }
    })
}

當(dāng)我使用webpack發(fā)布時(shí)雌团，babel, ES6→ES5時(shí)發(fā)生了如下意想不到的轉(zhuǎn)換，此時(shí)需要對(duì) apply士聪，eval做特殊處理

// object_.methodA(...args) 
// =>
// apply(object_, "methodA", ...args)
// eval(object_, "methodA", ...args)

需求锦援，注冊(cè)回調(diào)API的處理

通常 RPC不適合處理包括 參數(shù)和返回中有復(fù)雜對(duì)象 (因?yàn)椴⒎撬袑?duì)象可以序列化，并且考慮傳遞到遠(yuǎn)端的性能問(wèn)題)剥悟，更不用閉包（本地上下文信息問(wèn)題）灵寺，但現(xiàn)實(shí)世界中的JS API很多都有閉包參數(shù)和返回，尤其處理起來(lái)頗為棘手区岗，

• 問(wèn)題1, 函數(shù)參數(shù)如何傳遞略板？
  函數(shù)并不傳遞，而是在本地保存一個(gè) callback map, 在遠(yuǎn)端 構(gòu)造一個(gè)回調(diào)函數(shù)代理慈缔，這個(gè)代理函數(shù)作用是叮称，透?jìng)鲄?shù)回本地，調(diào)用本地callback，然后在callback map里釋放這個(gè) callback ID

if (typeof (arg) == 'function') {
    // 注冊(cè)本地callback 到 callbackMap
    const argProxy = __regCb(callbackMap, reqId, arg);
    argProxys.push(proxyArg)
    // ...
}
 
// ...
if (arg.hasOwnProperty('reqId') && arg.hasOwnProperty('cbId')) {
    let reqId = arg.reqId;
    let cbId = arg.cbId;
    // 傳入回調(diào)參數(shù)瓤檐，做遠(yuǎn)程透轉(zhuǎn)
    args.push((...args) => {
        sender({
            type: 'cb', reqId, cbId, args
        })
    })
    // ...
}

• 問(wèn)題2. 返回函數(shù)如何傳遞赂韵？
  這里有一個(gè)（唯一）約定，只允許注冊(cè)類型的API使用回調(diào)距帅，且返回 canceller : （)=>void 類型右锨，作為注冊(cè)取消方法括堤，這所以這樣的限定完全是因?yàn)閖avascript動(dòng)態(tài)類型所致碌秸，調(diào)用期間我無(wú)法得知返回值類型。
  而canceller函數(shù)的遠(yuǎn)程調(diào)用悄窃，處理辦法也類似于問(wèn)題1讥电，只是調(diào)用傳遞過(guò)程反過(guò)來(lái)，client 調(diào)用proxy canceller轧抗， 透?jìng)鞯絪erver中直正的 canceller恩敌，當(dāng)然，在server中也需要建表保存横媚，

chrome 特殊跨域限制

谷歌瀏覽器建立web worker出現(xiàn)cannot be accessed from origin 'null'錯(cuò)誤纠炮，即是說(shuō)，如果client和server處于不同域灯蝴，即使服務(wù)器處理了允許域外訪問(wèn) header恢口，chrome依然創(chuàng)建不能由外域腳本的worker，
參考 爆棧 解法如下

// 將遠(yuǎn)端 javascript文件作為資源對(duì)象加載穷躁，(普通跨域問(wèn)題由服務(wù)器解除限定即可)
const blob = new Blob([workerHeader, workerText], { type: 'application/javascript' });
this.worker = new Worker(URL.createObjectURL(blob));

總結(jié)：

RPC實(shí)現(xiàn)有兩種路線耕肩，一種是中間API描述的代碼生成（如GRPC），另一種是利用反射/動(dòng)態(tài)特性问潭，運(yùn)行時(shí)構(gòu)造遠(yuǎn)端的調(diào)用猿诸，在這里使用的是第二種，javascript的動(dòng)態(tài)特性狡忙，對(duì)于實(shí)現(xiàn)RPC具有優(yōu)點(diǎn)(實(shí)現(xiàn)非常簡(jiǎn)短)梳虽，也帶來(lái)了一些限制(不可解)，
如果在一個(gè)靜態(tài)類型+反射特性+DSL的語(yǔ)言里則可實(shí)現(xiàn)得即完備又簡(jiǎn)單灾茁。

如果有（高性能+跨語(yǔ)言） 的要求怖辆，則建議選擇第一種方式。