【前端探索】告别烂代码第二期！用策略模式封装分享组件

const shareUiObj = {};
// 处理给msdk和slugsdk用的分享UI
shareUiObj.initCommShareUI = function (callback) {
  // ...
};
// 处理给微信和QQ用的分享UI
shareUiObj.initCommShareTip = function () {
  // ...
};
/**
 * 打开自定义的分享UI组件
 * @exports openShareUI
 */
const openShareUI = function () {
  // ...
};
/**
 * 初始化方法 obj:{title:'标题',desc:'描述',icon:'图标',link:'地址',callback:''}
 * @exports initShare
 * @param obj 分享参数
 */
const initShare = function (obj) {
  if (typeof obj === 'undefined') obj = {};
  obj.title = obj.title || document.getElementsByTagName('title')[0].innerText;
  obj.desc = obj.desc || obj.title;
  obj.link = obj.link || window.location.href;
  obj.icon = obj.icon || 'http://ossweb-img.qq.com/images/pmd/igameapp/logo/log_igame_3.0.png';
  obj.type = obj.type || null;
  shareObject = obj;
  isWzydShare = obj.isWzydShare;

  const env = getEnv();
  if (env.isMsdk) {
    initMsdkShare();
  } else if (env.isGHelper) {
    initGHelperShare();
  } else if (env.isQQ) {
    initQQShare();
  } else if (env.isMiniProgram) {
    initMiniProgramShare();
  } else if (env.isWeixin) {
    initWeixinShare();
  } else if (env.isPvpApp) {
    initPvpShare();
  } else if (env.isTipApp) {
    initTipShare();
  } else if (env.isSlugSdk) {
    initInGameShare();
  }
};
// msdk分享
function initMsdkShare() {
  // ...
}
// slugsdk分享
function initInGameShare() {
  // ...
}
// 王者营地分享
function initGHelperShare() {
  // ...
}
// QQ分享
function initQQShare() {
  // ...
}
// 微信分享
function initWeixinShare() {
  // ...
}
// 小程序分享
function initMiniProgramShare() {
   // ...
}
// ...其他环境的实现

npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript

export interface ShareOptions {
  title: string;  // 分享标题
  desc: string;   // 分享描述
  link: string;   // 分享链接
  icon: string;   // 分享缩略图
  miniprogramLink?: string;  // 小程序跳转链接，可选
  customShare: any;          // 自定义分享配置，可选
  callback: () => void       // 分享成功回调
}

export interface ShareInterface {
  initShare(options: ShareOptions): void;
  openShareUI(): void;
}

import { ShareInterface, ShareOptions } from '../share-interface';
import loader from '../../little-loader';
import ShareUI from '../share-ui';

// QQ分享接口参考文档：// http://mqq.oa.com/api.html#js-mqq-core
export default class ShareQQ implements ShareInterface {
  public initShare(options: ShareOptions) {
    console.log('QQ分享', options);
    ShareUI.initCommShareTip();
    loader('https://open.mobile.qq.com/sdk/qqapi.js?_bid=152', () => {
      const { mqq } = window as any;
      mqq?.ui?.setOnShareHandler((type: any) => {
        if (type == 0 || type == 1 || type == 2 || type == 3) {
          const param = {
            title: options.title,
            desc: options.desc,
            share_type: type,
            share_url: options.link,
            image_url: options.icon,
            back: true,
            uinType: 0,
          };
          const callback = function () {
            options.callback?.();
          };
          mqq.ui.shareMessage(param, callback);
        }
      });
    });
  }
  public openShareUI(): void {
    ShareUI.showCommShareTip();
  }
}

class Share {
  private static instance: Share = new Share();

  public static getInstance() {
    return this.instance;
  }

  public static initShare(options: ShareOptions|any) {
    // options填充默认数据
    if (typeof options === 'undefined') options = {};
    options.title = options.title || document.getElementsByTagName('title')[0].innerText;
    options.desc = options.desc || options.title;
    options.link = options.link || window.location.href;
    options.icon = options.icon || 'http://ossweb-img.qq.com/images/pmd/igameapp/logo/log_igame_3.0.png';

    this.getInstance().sharehandle.initShare(options);
  }

  public static openShareUI() {
    this.getInstance().sharehandle.openShareUI();
  }

  private sharehandle: ShareInterface;

  constructor() {
    const env = initEnv();
    if (env.isMsdkV5) {
      this.sharehandle = new ShareMSDKV5();
    } else if (env.isMsdk) {
      this.sharehandle = new ShareMSDKV3();
    } else if (env.isGHelper) {
      this.sharehandle = new ShareGHelp();
    } else if (env.isQQ) {
      this.sharehandle = new ShareQQ();
    } else if (env.isMiniProgram) {
      this.sharehandle = new ShareMiniprogram();
    } else if (env.isWeixin) {
      this.sharehandle = new ShareWx();
    } else if (env.isPvpApp) {
      this.sharehandle = new SharePvpApp();
    } else if (env.isTipApp) {
      this.sharehandle = new ShareTipApp();
    } else if (env.isSlugSdk) {
      this.sharehandle = new ShareSlugSdk();
    } else if (env.isLolApp) {
      this.sharehandle = new ShareLolApp();
    } else {
      this.sharehandle = new ShareOther();
    }
  }
}

export default Share;