proxy-www

  1. const www = new Proxy(new URL('https://www'), {
  2.     get: function get(target, prop) {
  3.         let o = Reflect.get(target, prop);
  4.         if (typeof o === 'function') {
  5.             return o.bind(target)
  6.         }
  7.         if (typeof prop !== 'string') {
  8.             return o;
  9.         }
  10.         if (prop === 'then') {
  11.             return Promise.prototype.then.bind(fetch(target));
  12.         }
  13.         target = new URL(target);
  14.         target.hostname += `.${prop}`;
  15.         return new Proxy(target, { get });
  16.     }
  17. });
  19. // 访问百度
  20. www.baidu.com.then(response => {
  21. console.log(response.status);
  22. // ==> 200
  23. })

解析

  • property key 只有 2 种：string 和 symbol，其实直接判断是否为 symbol 就行了。ts 为了方便，定义了 3 种（额外定义了一个 number），其实 js 只有 2 种。
  • 第一个判断 Reflect.get(target, prop) 是否为 function，是为了调用函数，例如 www.baidu.com.toString() === "https://www.baidu.com/"
  • 第二个判断是否了调用 URL 对象内置的 symbol，比如 www.baidu.com+ 'a/b/c' === "https://www.baidu.com/a/b/c"
  • www.baidu：www 是对象，点(.)是访问 www 对象的 ‘baidu’ 属性，因为 www 对象没有 ‘baidu’ 属性，因此进入 proxy 的 get 逻辑
  • 返回了另一个 proxy，其中的 url 是 www.baidu，当继续调用 .com 方法时，继续上面的步骤。直到调用了 .then 后，运行 fetch(target)