【quickhybrid】API多平臺支撐的實現

撒網要見魚發表於2017-12-25

前言

在框架規劃時，就有提到過這個框架的一些常用功能需要支援H5環境下的呼叫，也就是需要實現API的多平臺支撐

為什麼要多平臺支撐？核心仍然是複用程式碼，比如在微信下，在釘釘下，在quick容器下，
如果沒有多平臺支撐，那麼quick.ui.alert只能用於quick容器下，釘釘和微信下就得分別用其它程式碼實現，
程式碼複用率低，如果實現了多平臺支撐。那麼三個平臺中同一個功能的程式碼則是一樣的。

什麼樣的多平臺支撐

當然了，本框架實現的多平臺支撐和一般框架的有點區別。

__一般的框架中支援多個平臺更多的是一個polyfill__，譬如

// 假設以前不支援h5
const oldToast = quick.ui.toast;

quick.ui.toast = function(...) {
    if (os.h5) {
        // 做一些h5中做的
        ...
    } else {
        oldToast(...);
    }
};

這就是墊片實現，如果是新的環境，用新的實現，否則用老的實現

而__本框架中的多平臺實現是直接內建到了框架核心中__，也就是說框架本身就支援多平臺API的設定

quick.extendModule(`ui`, [{
    namespace: `toast`,
    os: [`h5`],
    defaultParams: {
        message: ``,
    },
    runCode(...rest) {
        // 定義h5環境中的做法
        ...
    },
}, ...];

quick.extendModule(`ui`, [{
    namespace: `toast`,
    os: [`quick`],
    defaultParams: {
        message: ``,
    },
    runCode(...rest) {
        // 定義quick環境中的做法
        ...
    },
}, ...];

在框架內部定義API時，不再是直接的quick.ui.alert = xxx，而是通過特定的API單獨給某個環境下定義實現

而且，框架中的定義，每一個API都是有quick，h5環境下的實現的。

多平臺支撐的核心

從上述的介紹中也可以看到，多平臺支撐主要是前端的實現，與原生API，原生API在這裡面只能算一個環境下的實現

核心就是基於：__Object.defineProperty，重寫set和get__

Object.defineProperty(apiParent, apiName, {
    configurable: true,
    enumerable: true,
    get: function proxyGetter() {
        // 需要根據不同的環境，返回對應下的內容
        ...
    },
    set: function proxySetter() {
        // 可以提示禁止修改API
    },
});

本框架中的多平臺實現程式碼可以參考原始碼，這裡不贅述，下文中會介紹如何簡單的實現一個多平臺支撐API

實現一個多平臺支撐API

我們先預設最終的結果：

quick.os.quick = true;
quick.ui.alert(`hello`); // quick-hello

quick.os.quick = false;
quick.ui.alert(`hello`); // h5-hello

quick.ui.alert = 11; // 提示：不允許修改quick API

那麼要達到上述的要求，應該如何做呢？

寫一個雛形

最簡單的，先假設這些實現都已經存在，然後直接基於defineProperty返回

function alertH5(message) {
    alert(`h5-` + message);
}
function alertQuick(message) {
    alert(`quick-` + message);
}
const quick = {};

quick.ui = {};
quick.os = {
    quick: false,
};

Object.defineProperty(quick.ui, `alert`, {
    configurable: true,
    enumerable: true,
    get: function proxyGetter() {
        // 需要根據不同的環境，返回對應下的內容
        if (quick.os.quick) {
            return alertQuick;
        } else {
            return alertH5;
        }
    },
    set: function proxySetter() {
        // 可以提示禁止修改API
        alert(`不允許修改quick API`);
    },
});

那麼，它的呼叫結果是

quick.os.quick = true;
quick.ui.alert(`hello`); // quick-hello

quick.os.quick = false;
quick.ui.alert(`hello`); // h5-hello

quick.ui.alert = 11; // 提示：不允許修改quick API

雖然效果和預設的一樣，但是很明顯還需優化完善

增加擴充API的方法

擴充方式的定義如下

const quick = {};

quick.os = {
    quick: false,
};
/**
 * 存放所有的代理 api物件
 * 每一個名稱空間下的每一個os都可以執行
 * proxyapi[namespace][os]
 */
const proxysApis = {};
// 支援的所有環境
const supportOsArray = [`quick`, `h5`];

function getCurrProxyApiOs(currOs) {
    for (let i = 0, len = supportOsArray.length; i < len; i += 1) {
        if (currOs[supportOsArray[i]]) {
            return supportOsArray[i];
        }
    }

    // 預設是h5
    return `h5`;
}

// 如獲取quick.ui.alert
function getModuleApiParentByNameSpace(module, namespace) {
    let apiParent = module;
    // 只取名稱空間的父級,如果僅僅是xxx，是沒有父級的
    const parentNamespaceArray = /[.]/.test(namespace) ? namespace.replace(/[.][^.]+$/, ``).split(`.`) : [];

    parentNamespaceArray.forEach((item) = >{
        apiParent[item] = apiParent[item] || {};
        apiParent = apiParent[item];
    });

    return apiParent;
}

function proxyApiNamespace(apiParent, apiName, finalNameSpace) {
    // 代理API，將apiParent裡的apiName代理到Proxy執行
    Object.defineProperty(apiParent, apiName, {
        configurable: true,
        enumerable: true,
        get: function proxyGetter() {
            // 確保get得到的函式一定是能執行的
            const nameSpaceApi = proxysApis[finalNameSpace];

            // 得到當前是哪一個環境，獲得對應環境下的代理物件
            return nameSpaceApi[getCurrProxyApiOs(quick.os)] || nameSpaceApi.h5;
        },
        set: function proxySetter() {
            alert(`不允許修改quick API`);
        },
    });
}

function extendApi(moduleName, apiParam) {
    if (!apiParam || !apiParam.namespace) {
        return;
    }

    if (!quick[moduleName]) {
        quick[moduleName] = {};
    }

    const api = apiParam;
    const modlue = quick[moduleName];
    const apiNamespace = api.namespace;
    const apiParent = getModuleApiParentByNameSpace(modlue, apiNamespace);
    // 最終的名稱空間是包含模組的
    const finalNameSpace = moduleName + `.` + apiNamespace;
    // 如果僅僅是xxx，直接取xxx，如果aa.bb，取bb
    const apiName = /[.]/.test(apiNamespace) ? api.namespace.match(/[.][^.]+$/)[0].substr(1) : apiNamespace;

    // 這裡防止觸發代理，就不用apiParent[apiName]了，而是用proxysApis[finalNameSpace]
    if (!proxysApis[finalNameSpace]) {
        // 如果還沒有代理這個API的名稱空間，代理之，只需要設定一次代理即可
        proxyApiNamespace(apiParent, apiName, finalNameSpace);
    }

    // 一個新的API代理，會替換以前API名稱空間中對應的內容
    const apiRuncode = api.runCode;
    const oldProxyNamespace = proxysApis[finalNameSpace] || {};

    proxysApis[finalNameSpace] = {};

    supportOsArray.forEach((osTmp) = >{
        if (api.os && api.os.indexOf(osTmp) !== -1) {
            // 如果存在這個os，並且合法，重新定義
            proxysApis[finalNameSpace][osTmp] = apiRuncode;
        } else if (oldProxyNamespace[osTmp]) {
            // 否則仍然使用老版本的代理
            proxysApis[finalNameSpace][osTmp] = oldProxyNamespace[osTmp];
        }
    });
}

function extendModule(moduleName, apis) {
    if (!apis || !Array.isArray(apis)) {
        return;
    }
    if (!quick[moduleName]) {
        quick[moduleName] = [];
    }
    for (let i = 0, len = apis.length; i < len; i += 1) {
        extendApi(moduleName, apis[i]);
    }

}

quick.extendModule = extendModule;

上述程式碼中增加了些複雜度，有一個統一管理所有代理呼叫的池，然後每次會更新對於環境下的代理

基於上述的方式可以如下擴充對於環境下的API

quick.extendModule(`ui`, [{
    namespace: `alert`,
    os: [`h5`],
    defaultParams: {
        message: ``,
    },
    runCode(message) {
        alert(`h5-` + message);
    },
}]);

quick.extendModule(`ui`, [{
    namespace: `alert`,
    os: [`quick`],
    defaultParams: {
        message: ``,
    },
    runCode(message) {
        alert(`quick-` + message);
    },
}]);

最終的呼叫如下（結果和預期一致）

quick.os.quick = true;
quick.ui.alert(`hello`); // quick-hello
quick.os.quick = false;
quick.ui.alert(`hello`); // h5-hello
quick.ui.alert = 11; // 提示：不允許修改quick API

雖然就一兩個API來說，這類擴充方式看起來很複雜，但是當API一多，特別是還需批量預處理時（如預設引數，Promise支援等），它的優勢就出來了

多平臺支撐在quick中的應用

quick hybrid框架中，預設支援quick和h5有種環境，核心程式碼就是上述列舉的（當然，內部增加了一些代理，預設引數處理等，會稍微複雜一點）。

基於這個核心，然後可以將框架的定義和API定義分開打包

quick.js
quick.h5.js

這樣，最終看起來h5下的API定義就是一個擴充包，是沒有它也不會影響quick環境下的使用，而且，如果增加一個新的環境(比如dd)，
只需要再新增另一個環境的擴充包而已，各種寫法都是一樣的，這樣便於了統一維護

返回根目錄

【quickhybrid】如何實現一個Hybrid框架

原始碼

github上這個框架的實現

quickhybrid/quickhybrid

iOS多裝置適配簡史以及相應的API支撐實現
2019-01-31
iOSAPI
企業日常管理活動支撐平臺
2011-08-30
支撐微博億級社交平臺，小白也能玩轉Redis叢集(實戰篇)
2019-11-06
Redis
GRPC 多平臺實現
2019-07-02
RPC
【quickhybrid】JSBridge的實現
2017-12-25
UIJS
通達信平臺支撐線主圖指標公式原始碼
2024-03-10
指標公式原始碼
演講實錄 | 基於雲原生的敏態微服務全生命週期支撐平臺
2021-01-06
微服務
[轉]：多程式等待的跨平臺實現
2019-05-11
【quickhybrid】JS端的專案實現
2017-12-28
UIJS
實戰化攻防演練支撐利器：綠盟智慧安全運營平臺新版本釋出
2020-05-27
【quickhybrid】Android端的專案實現
2019-02-21
UIAndroid
支撐微博億級社交平臺，小白也能玩轉Redis叢集(原理篇)
2019-10-21
Redis
美創資料支撐平臺釋出，全新升級賦能資料治理
2021-03-10
技術分享| 應急指揮排程平臺需要這些技術支撐
2022-08-17
天和榮利用AWS建設智慧家居雲平臺，支撐全球業務高速增長
2022-06-22
芒果臺小芒APP選擇亞馬遜雲服務（AWS）支撐其電商大資料平臺
2021-01-26
APP亞馬遜大資料
化工行業SaaS多租戶管理平臺支撐精準營銷，滿足企業多元化發展需求
2022-02-25
行業
多個電商平臺API介面聚合解析，實現根據關鍵詞取商品列表
2023-09-25
API
[譯] 支撐現代儲存系統的演算法
2019-03-04
演算法
如何實現LBS軌跡回放功能？含多平臺實現程式碼
2016-09-28
應用多級快取模式支撐海量讀服務
2016-08-17
快取模式
中興新支點國產作業系統與虛擬化平臺和雲管理平臺實現相容
2019-06-14
作業系統
辦公管理支撐流程能力PaaS平臺運維開發軟體需求設計方案
2015-02-01
運維
API自動化測試平臺，高效實現對API的自動化測試
2021-08-16
API
平臺化專案多語言架構實現
2016-07-24
架構
分析如何支撐高併發？
2019-10-31
RestCloud API智慧識別平臺，實現資料高效開放
2021-08-24
RESTCloudAPI
支撐主業內部環境與幾大平臺建設
2011-05-02
RestCloud API低程式碼開發平臺，實現無程式碼快速釋出API
2021-08-25
RESTCloudAPI
三項執行層的支援，支撐起敏捷實施的天空
2009-03-16
敏捷
VMware Fusion Pro 13：打破界限，實現多平臺的無縫融合
2023-10-30
醫院怎樣實現資訊化轉型？F5提供技術支撐
2021-09-10
那些年，支撐尾款人們熬夜的AI
2020-12-05
AI
學習型組織的資訊化支撐
2011-02-03
支撐程式設計師的三種精神
2011-04-11
程式設計師
培訓，就業最有力的支撐 (轉)
2008-01-31
就業
雲端計算怎麼支撐起《流浪地球》的硬科幻實力？
2019-02-03
如何支撐微服務架構落地
2017-07-12
微服務架構