知识点

1. window.postMessage 跨页消息
2. Promise 使用技巧 async/await
3. 保护数据的三种方式和应用场景 defineProperty，Object.freeze 和 Proxy
4. es5中的类 和 继承
5. rpc 实现原理
6. 其他知识点

   参数归一化，解构，展开，惰性函数，立即执行函数，箭头函数，闭包，async/await

2. 原始设计

参考RPC框架的思路，设计一个前端跨页通讯组件 LinkCom - 领航

3. 类模块设计(UML)

4. 时序图

5. 类模块功能解释

提示：后续内容中示例代码目的是展示核心逻辑，会删除例如参数校验，文档注释等代码

5.1 帮助函数

5.1.1 createId

const id = createId();

用于创建一个随机id

• 除了随机数以外，增加num变量每次递增，进一步减少重复概率；
• 使用闭包和IIFE，减少私有变量num对其他代码影响

const createId = (function () {
    let num = 0;
    return () => (++num) + ":" + Math.random().toString(36).substring(2);
})();

• 名词解释

  闭包：是前端开发中一种保护私有参数的手段，但是如果滥用可能会引起内存泄露
  立即执行函数：它是一种设计模式，也被称为 自执行匿名函数，它可以有效的避免污染全局命名空间

5.1.2 freezeDeep

freezeDeep(obj)

用于深度冻结对象 普通的对象冻结只能保证当前对象不被修改，但无法保证对象包含的子对象也无法修改 使用递归的方式将对象和对象中的属性都冻结掉

const freezeDeep = (function () {
    function freeze(obj) {
        Object.freeze(obj);
        for (const key in obj) {
            if (typeof obj[key] === "object" && obj[key] != null) {
                freeze(obj[key]);
            }
        }
    }
    return (obj) => {
        freeze(obj);
        return obj;
    };
})();

• 名词解释

  对象冻结：这项功能一般用在需要保护的数据对象上，被冻结的对象将无法修改对中的任何属性，也无法追加属性，如果是数组，也同样无法向数组中添加元素，对象冻结可以有效防止数据被其他代码篡改。

5.1.3 log(message, ...args)

log && log("打印日志");

用于打印日志

let log = function (message, ...args) {
    if (window.location.hostname === "localhost") {
        log = function (message, ...args) {
            if (message instanceof Error) {
                console.trace();
            }
            console.log(`${window.document.title} - ${new Date().toLocaleTimeString()} LinkCom.${message}`, ...args);
        };
        log(message, ...args);
    } else {
        log = null;
    }
};

• 名词解释：

  惰性函数：这是一种开发技巧，表示函数执行的分支只会在函数第一次调用的时候判断，在第一次调用过程中，该函数会被覆盖为另一个按照合适方式执行的函数，这样任何对原函数的调用就不用再经过执行的分支了
  参数展开：在这个例子中参数...args表示在调用时，第1个之后的参数会被包装为一个数组，例如调用log(1,2,3)后message=1，args=[2,3]；参数展开还有更多用法，可以自行查阅文档

5.2 帮助类

5.2.1 信号量 Semaphores

const ss = new Semaphores();
ss.resolve("完成");

表示一个信号量, 继承自 Promise, 自身包含 resolve 和 reject 函数, 可以直接解决或拒绝 Promise

class Semaphores extends Promise {
    constructor(...args) {
        if (args.length === 0 || (args.length === 1 && typeof args[0] === "object")) {
            const hander = Object.assign({}, args[0]);
            super((resolve, reject) => {
                hander.resolve = resolve;
                hander.reject = reject;
            });
            Object.assign(this, hander);
            freezeDeep(this);
        } else {
            super(...args);
        }
    }
}

• 名词解释：

  Promise：通常用来表示一个可以由人为控制的异步操作，可以通过主动调用Promise构造函数中的resolve和reject来结束异步等待；
  调用resolve并传入一个任意对象表示异步完成，调用reject并传入一个Error表示异步操作出现异常。
  同时 Promise 还可以由[async/await](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function)关键触发异步等待操作。

5.2.2 异步队列 AsyncQueue

const queue = new AsyncQueue();
queue.push(123);
const value = await queue.shift();

表示一个先进先出的异步队列； 使用push(data)存入数据, 使用异步方法async shift()取出数据, 当没有数据时, 会等待, 直到数据被push方法存入
由于 class 的私有属性兼容性不好, 希望对外隐藏list的操作，所以使用闭包代替class
首先初始化会在内部列表中放入一个等待中的信号

• push：获取到列表中最后一个信号，并将其标识为已解决，然后将一个新的等待中信号放入列表尾部
• shift：等待列表中一个信号被处理（解决或拒绝），然后将信号从列表第一位移除，这里需要注意，shift可以多次调用，可能存在多个等待中的操作，当第一个等待结束后，会将信号移除，之后的等待操作结束必须判断目前列表第一位的数据是否还是等待前取出的信号，如果不是，则说明已经由其他操作移除了，不用再进行任何操作
• destroy：销毁列表时，向所有列表中的信号发送拒绝，并附上原因

function AsyncQueue() {
    const list = [new Semaphores()];
    this.shift = async () => {
        const first = list[0];
        const data = await first;
        if (first === list[0]) {
            list.shift();
        }
        return data;
    }
    this.push = data => {
        const last = list[list.length - 1];
        last.resolve(data);
        list.push(new Semaphores());
    }
    this.count = () => list.length;
    this.destroy = reason => {
        const err = reason instanceof Error ? reason : new Error(reason || "queue is destroyed");
        list.forEach(x => x.reject(err));
        list.length = 0;
    }
}

• 名词解释：

参数归一化：是将不同类型的数据变为相同类型，以方便后续处理的一种技巧
例如：const err = reason instanceof Error ? reason : new Error(reason || "queue is destroyed");
以上操作就是无论 reason 现在是什么类型，都转为 Error 类型，后续操作只需要操作 Error 就可以了

5.2.3 任务板 TaskBoard

const tasks = new TaskBoard(); 
tasks.put(message.id, new Semaphores({ message, targetToken: handler.targetToken }), timeout);
tasks.finish(message.id, message.result);

表示一个任务板, 任务为 Semaphores 类型
每个存入的任务都有一个超时时间, 超时后自动删除, 并将 Semaphores 解决为错误
每个存入的任务可在超时前被完成(完成可以是解决或拒绝), 完成后自动删除
同样的为了隐藏 tasks 使用闭包

• 方法：
  • put：添加任务时，构造一个setTimeout用于控制超时时间，超时后直接调用完成方法传入Error
  • finish：完成任务方法中判断结果值，如果是Error执行reject
  • take：取出任务的时，将任务从tasks中删除，并删除定时器

function TaskBoard() {
    const tasks = {};
    this.put = (id, task, timeout) => {
        const timeoutId = setTimeout(() => this.finish(id, new Error("timeout")), timeout);
        tasks[id] = { content: task, timeoutId };
    };
    this.take = id => {
        const data = tasks[id];
        clearTimeout(data.timeoutId);
        delete tasks[id];
        return data.content;
    };
    this.has = id => id in tasks;
    this.count = () => Object.keys(tasks).length;
    this.clear = () => Object.keys(tasks).forEach(id => this.take(id));
    this.get = id => this.has(id) ? tasks[id].content : null;
    this.finish = (id, result) => {
        const task = this.take(id);
        const exec = result instanceof Error ? task.reject : task.resolve;
        exec(result);
    };
}

5.3 消息类

要实现类似RPC的通信功能，首先要设计的就是消息类结构 消息类分为 请求（RequestMessage）和响应（ResponseMessage） 两种类型的消息会有一些共同的特点，所以抽象出消息基类（Message）

5.3.1 消息基类 Message

消息作为一个DTO（Data Transfer Object 数据传输对象），创建后就不应再被更改，所以执行freezeDeep将其保护起来 考虑到继承的问题，子类也无法对其进行更改，所以在构造函数中需要传入子类的属性，由基类执行属性绑定操作

• 属性：

  • type：消息类型 ("request"或"response")
  • token：用于标识发送消息的程序的身份
  • id：每个请求消息都会生成唯一的id，而响应消息的id取自请求消息id，表示响应的是哪个请求
  • *：任意扩展属性，用于绑定子类属性

• 方法：

  • buildMessage()：构建可用于发送的消息体，默认实现Object.assign({}, this);可由子类重写
  • static parse(Object)：静态方法，用于将任意对象转为Message

class Message {
    constructor(token, type, id, props) {
        Object.assign(this, props, { token, type, id });
        freezeDeep(this);
    }
    
    buildMessage(){
        return Object.assign({}, this);
    }
    
    static parse(message) {
        const { token, type, id } = message;
        return new Message(token, type, id, message);
    }
}

• 名词解释：

  类 ：前端 ES5 之后也提供了与后端类似的class声明的方式，语法和代码更为纯粹

5.3.2 请求消息 RequestMessage

const message = new RequestMessage(handler.token, "call", { method, args })

请求消息，用于 主动调用方 发给 被动接收方 时的消息

• 属性：
  • token：生成消息的处理程序token，用于接收方对消息进行来源认证
  • command：消息命令，用于接收方确定使用何种方式处理
  • data data：消息数据

class RequestMessage extends Message {
    constructor(token, command, data) {
        super(token, "request", createId(), { command, data });
    }
}

• 名词解释

  继承：extends 关键字用于表示类之间的继承关系，在构造函数中使用super关键字来调用父类的构造函数

5.3.3 响应消息 ResponseMessage

const message = new ResponseMessage(handler.token, id, result);

响应消息，用于 被动接收方 收到消息并处理完成后将返回值发送给 主动调用方 时的消息

• 属性：
  • id：请求消息id，用于调用方确定当前响应是回复哪一个请求消息
  • result：响应结果

class ResponseMessage extends Message {
    constructor(token, id, result) {
        super(token, "response", id, { result });
    }
}

5.4 消息处理程序 MessageHandler

const handler = new MessageHandler(methods, url, window);
handler.onmessage = (message, event) => { };
handler.send(message);
handler.apply(data.method, handler, [...data.args, event]);

提供最基础的发送消息方法和接收消息回调
处理程序与Message不同，并不是所有属性都是冻结的 其中targetUrl，targetUrl，targetWindow都需要后期设置，但设置时需要验证值的类型，所以使用属性劫持（defineProperty）来处理，其中targetUrl也使用了参数归一化的技巧，将String和URL都转为URL，方便后续使用；

• 属性：
  • token：消息处理程序token，该属性自动生成只读，身份标识，在发送消息时需要设置到
  • Message，用于接收方识别身份
  • methods：注册为允许远程调用方法
  • targetToken：目标token，该属性用于接收消息时验证消息来源
  • targetUrl：目标url
  • targetWindow：目标window
• 函数：
  • send(Message)：发送消息
  • onmessage：接收消息回调，模拟window.onmessage的行为，将事件参数改为[Message, Event]方便语义理解 apply(methodName, that, args)：执行已注册的方法，如果方法不存在则返回 undefined

class MessageHandler {
    constructor(methods, url, win) {
        Object.defineProperties(this, {
            token: { value: createId() },
            methods: { value: methods },
            targetUrl: {
                get: () => url && url.origin,
                set(value) {
                    if (url instanceof URL) {
                        url = value;
                    } else if (typeof value === "string") {
                        url = new URL(value);
                    } else {
                        throw new Error("url is not URL");
                    }
                }
            },
            targetWindow: {
                get: () => win,
                set(value) => win = value;
            },
        });
        if (win != null) {
            this.targetWindow = win;
        }
        if (url != null) {
            this.targetUrl = url;
        }
        window.addEventListener("message", event => {
            const message = Message.parse(event.data);
            this.onmessage(message, event);
        }, false);
    }

    send(message) {
        const data = message.buildMessage();
        this.targetWindow.postMessage(data, this.targetUrl);
    }

    targetToken = null;

    onmessage = null;

    apply(that, method, args) {
        const fn = this.methods[method];
        if (typeof fn !== "function") {
            return undefined;
        }
        const result = fn.apply(that, args);
        return result === undefined ? null : result;
    }
}

• 名词解释

  defineProperty：属性劫持，与对象冻结一样，也是一种保护数据的手段，他们的区别在于，属性劫持可以更灵活的控制那些属性需要保护，需要怎样的保护；而对象冻结是将整个对象所有的属性都保护起来

5.5 收发客户端 Client

const client = new Client(handler, timeout);
const token = await client.request("$ask", data);
const { message, event } = await client.receive(); const result = commands[message.command](message.data, event); client.response(message.id, result);
const invoker = client.build();

对消息处理程序进行封装，对外提供封装后的新函数

• 私有属性：
  • handler：消息处理程序（MessageHandler），用于发出和接收消息
  • inbox：先进先出队列（AsyncQueue）, 表示一个收件箱，用于存放收到的情况，由另一个线程取出数据操作
  • tasks：任务板（TaskBoard），用于存放发出的请求，收到回复或超时后从任务板中移除
• 方法：
  • async request(command, data, unresponse)：发送请求消息，第三个参数表示是否忽略响应
  • response(id, result)：发送响应消息
  • async receive()：等待接收消息
  • close()：关闭客户端
  • build()：编译一个用于调用远程方法的代理对象

function Client(handler, timeout) {
    timeout = Math.max(100, parseInt(timeout) || 1000);
    const inbox = new AsyncQueue();
    const tasks = new TaskBoard();
    const beforeunload = () => handler.targetWindow && this.request("close", null, true);
    window.addEventListener("beforeunload", beforeunload, false);
    handler.onmessage = (message, event) => {
        switch (message.type) {
            case "request":
                inbox.push({ message, event });
                break;
            case "response":
                tasks.finish(message.id, message.result);
                break;
            default:
                return;
        }
    };

    this.close = function (reason) {
        window.removeEventListener("beforeunload", beforeunload);
        window.removeEventListener("message", onmessage, false);
        // 清理资源
        handler.onmessage = null;
        tasks.clear();
        inbox.destroy(reason || "主动断开");
    }

    this.request = async function (command, data, unresponse) {
        const message = new RequestMessage(handler.token, command, data);
        const content = new Semaphores({ message, targetToken: handler.targetToken });
        if (unresponse !== true) {
            tasks.put(message.id, content, timeout);
        }
        handler.send(message);
        return await content;
    }

    this.response = (id, result) => handler.send(new ResponseMessage(handler.token, id, result));

    this.builder = () => {
        const invoker = new Proxy({}, {
            get: (target, prop) => {
                // 如果是 MessageHandler 属性, 则直接返回
                if (["targetUrl", "targetWindow", "token", "targetToken", "then", "catch", "finally"].includes(prop)) {
                    return handler[prop];
                }
                return (...args) => this.request("call", { method: prop, args });
            }
        });

        const methods = handler.methods;

        const commands = { /* 命令部分代码省略... */ }

        async function execRequestMessage(message, event) {
            const { command, data } = message;
            const fn = commands[command];
            try {
                return fn(data, event);
            } catch (error) {
                return new Error(error.message || "error");
            }
        }

        // 循环接收消息
        (async () => {
            while (true) {
                const { message, event } = await inbox.shift();
                window.requestIdleCallback(async () => {
                    const result = await execRequestMessage(message, event);
                    if (result !== undefined) {
                        this.response(message.id, result);
                    }
                });
            }
        })();

        return invoker;
    }
}

• 名词解释：

  箭头函数：箭头函数可以忽略函数中的this，直接使用当前作用的this对象，在闭包中使用，可以忽略调用者对作用域的影响
  Proxy：动态代理与 defineProperty最大的不同点在于他可以劫持一个对象中的所有操作，而不仅仅是已知属性，但会产生一个新对象，而 defineProperty不会产生新的对象； 在builder方法里对Messagehandler进行动态代理，可以让用户方便的调用远端的方法。

5.6 领航组件主入口 LinkCom

// 主动连接
const invoker = await new LinkCom(methods).connect(win, url, {}); // 创建跨站调用器, 主动发出连接申请
const res = await invoker.hello("world");
invoker.close()

// 被动连接
const methods = {
    connect() {
        this.hello("world");
    },
    hello(msg){
        alert(msg);
        return "你也好";
    },
    close(){
        // 已断开
    }
};
new LinkCom(methods).wait();  // 创建跨站调用器, 并等待连接

主入口，用户使用组件从该对象开始

function LinkCom(methods) {
    this.connect = async function (window, url, data) {
        try {
            const handler = new MessageHandler(methods, url, window);
            const client = new Client(handler);
            const invoker = client.builder();
            const result = await client.request("connect", handler.token);
            if (result) {
                return invoker;
            }
        } catch (error) {
            throw new Error("拒绝连接:" + error.message);
        }
        throw new Error("拒绝连接");
    }
    this.wait = function () {
        const handler = new MessageHandler(methods);
        new Client(handler).builder();
        return this;
    }
}

6. 最终效果

7. 完整代码：

LinkCom.js