LOL前端重构规范

# 海外 - 相关 SDK

  • 国际化组件 i18next
  • 上报组件
  • cookie 管理组件
  • 视频播放器（多语言）
  • 通用页脚组件
  • 游戏内 MSDK

# 国际化组件 i18next

通过 url 的语言参数 lang 确定当前语言，例如 https://goldenspatula.com/act/a20241011testplugin/?lang=th

提示

若是每种语言对应一个 html 请看 多语言区分html

<script src="https://goldenspatula.com/plugins/i18next/i18next.min.js"></script>
<script>
  // 读取 url 参数
  const queryParams = new URLSearchParams(location.search)
  // 获取浏览器默认语言
  const browserLang = (navigator.language || navigator.userLanguage).split('-')[0]
  // 临时语言
  const tempCurLang = queryParams.get('lang') || browserLang
  // 所有语言
  const LANG_LIST = ['en', 'zh', 'th']
  // 判断当前语言，优先级：url lang 参数 -> 浏览器语言 -> 默认语言 en
  const currentLang = LANG_LIST.includes(tempCurLang) ? tempCurLang : LANG_LIST[0]

  // 初始化翻译工具
  i18next.init({
    lng: currentLang, // 当前语言
    fallbackLng: "en", // 回退语言
    resources: langResources, // 翻译文件
  }, (err) => {
    if (err) return console.error(err);
    // 执行 html 中的翻译
    document.querySelectorAll("[data-t]").forEach((element) => {
      const key = element.getAttribute("data-t");
      element.textContent = i18next.t(key);
    });
  });

  // 定义翻译方法 $t
  const $t = (key) => i18next.t(key);

  console.log('测试脚本的翻译 $t：', $t("description"));
</script>

翻译文件 langResources 格式可查看 通用模板

html 中翻译的文案写法：
通过标签内 data-t 属性承载翻译的 key，标签内不需要写内容，会自动填上翻译好的文案进去

<!-- 翻译测试 在标签中用 data-t 属性承载翻译的 key -->
<h1 data-t="title"></h1>
<p data-t="description"></p>
<div><span data-t="Please choose a login method."></span></div>


# 上报方法

JKsendReportData('中文信息', 'English')

<a href="javascript:void(0);" onclick="JKsendReportData('中文信息', 'English')">测试上报</a>



<script src="https://goldenspatula.com/plugins/report/index.js"></script>
<script>
  // 读取 url 参数
  const queryParams = new URLSearchParams(location.search)
  // 初始化上报
  new OverseasReport({
    id: 'a20241011testplugin', // 项目名称
    channel: queryParams.get('media_channel') // 渠道，如需统计不同渠道的数据，通过 url 参数 media_channel 来区分
  })
</script>



<script>
  // 读取 url 参数
  const queryParams = new URLSearchParams(location.search)
</script>
<!-- 上报组件引入 -->
<script src="https://goldenspatula.com/plugins/report/index.js"></script>
<!-- cookie 管理插件引入，必须加上 type="module" 标识模块化加载此脚本 -->
<script type="module">
  import('https://goldenspatula.com/plugins/cookie/index.min.js').then(() => {
    let OReport = null
    // 初始化 cookie 管理组件
    new OverseasCookieConsent((flag) => {
      console.log('cookie偏好分析：', flag)
      // 控制是否上报
      JKReportConfig.open = flag
      // 数据上报一定要放在 cookie 组件初始化之后
      if (!OReport && flag) {
        // 如果还没初始化上报 且 允许上报，则执行一次初始化
        OReport = new OverseasReport({
          id: 'a20241011testplugin', // 项目名称
          channel: queryParams.get('media_channel') // 渠道，如需统计不同渠道的数据，通过 url 参数 media_channel 来区分
        })
      }
    })
  })
</script>



CookieConsent.showPreferences()


# 视频播放器（多语言）

跟国内一样可以使用 SuperPlayer， 注意：必须实现播放器多语言

引入处理播放器多语言的 js

<script src="https://goldenspatula.com/plugins/playerLang/index.js"></script>

在初始化 new window.SuperPlayer 之前调用 handlePlayerLanguage 执行翻译，需传入当前语言

// 处理播放器多语言
handlePlayerLanguage(lang)
// 播放器初始化
const player = new window.SuperPlayer({
  // ...
  ctrlConfig: { disableFakeFullscreen: true } // 需要加上此属性
})


# 通用页脚组件

<body>
  <!-- 页脚容器 -->
  <div id="footer-container"></div>

  <!-- 页脚组件引入 -->
  <script src="https://goldenspatula.com/plugins/footer/index.js"></script>

  <script>
    // 初始化页脚，传入当前语言
    new FooterComponent('footer-container', currentLang);
  </script>
</body>


# 游戏内 MSDK

使用方法与国内 游戏内MSDK 一致，但不包含分享功能，海外网页分享
注意：改为引入海外 MSDK 链接

<script src="https://goldenspatula.com/plugins/ingame/index.js"></script>

← 常用 JS 库 →