// }); }, // 通过接口获取语言列表 loadLanguage: function () { const self = this; $.ajax({ url: languageApi, type: 'GET', data: { ajax: 1 }, dataType: 'json', cache: false, timeout: 10000, success: function (res) { if (res && res.code === 0 && $.isArray(res.data)) { if (!res.data.length) { //code 为 0 但没数据:一般是 lang 表没有 isshow=1 的记录 console.warn('[language] 接口返回空列表,count=' + res.count + ',total=' + res.total); } self.generateLinks(res.data); } else { self.renderMsg((res && res.msg) || '语言列表获取失败'); } }, error: function (xhr) { console.error('[language] 接口请求失败:', languageApi, xhr && xhr.status); if (xhr && xhr.responseText) { //返回的不是 JSON(多为路由未命中,返回了 HTML 页面)时,打印前 200 字符便于定位 console.error('[language] 响应内容:', xhr.responseText.slice(0, 200)); } //接口不通时,用页面 里已渲染的多语言数据兜底 if (!self.fallbackLinks()) { self.renderMsg('语言列表加载失败,请稍后重试'); } } }); }, // 接口异常 / 无数据时提示 renderMsg: function (msg) { this.$container.empty().append($('', { class: 'language_load_msg' }).text(msg)); }, // 接口异常时,从页面 head 里已渲染的 兜底取数 fallbackLinks: function () { const list = []; $('link[rel="alternate"][hreflang]').each(function () { const $el = $(this); const href = $el.attr('href'); if (!href) return; const hreflang = $el.attr('hreflang'); list.push({ lang: $el.data('lang') || (hreflang === 'x-default' ? '' : hreflang), name: $el.data('name') || hreflang, url: href }); }); if (!list.length) return false; this.generateLinks(list); return true; }, generateLinks: function (list) { if (!list.length) { this.renderMsg('暂无可用语言'); return; } // 创建文档片段 // DocumentFragment 是一个轻量级的 DOM 节点容器,它具有以下特点: // 虚拟容器:它不是真正的 DOM 节点,不会被添加到文档树中 // 性能优化:可以在内存中构建 DOM 结构,然后一次性插入到文档中 // 批量操作:避免多次 DOM 操作引起的页面重排和重绘 const fragment = document.createDocumentFragment(); $.each(list, function (index, lang) { const name = lang.name || lang.title || lang.lang; const $link = $('', { href: lang.url || 'javascript:;', class: 'language_modal_a', title: name, 'data-lang': lang.lang || '' }).css({ display: 'flex', flexDirection: 'column', alignItems: 'center' }); $link.append( $('
', { class: 'icon-language icon-' + (lang.lang || '') }), $('').text(name) ); fragment.appendChild($link[0]); }); this.$container.empty().append(fragment); }, show: function () { //接口尚未返回时被打开,补一次请求,避免弹窗空白 if (this.$container.children().length === 0) { this.loadLanguage(); } this.$mask.add(this.$blade).fadeIn(200); this.$body.css('overflow', 'hidden'); }, close: function () { this.$mask.add(this.$blade).fadeOut(200); this.$body.css('overflow', 'auto'); }, handleKeyup: function (e) { if (e.keyCode === 27 && this.$mask.is(':visible')) { this.close(); } } }; // 初始化 $(function () { languageModal.init(); }); translate.language.setDefaultTo('english'); //设置默认语言 translate.nomenclature.append('english', 'chinese_simplified', ` International = 国际 Hai Mi = 海米 Room 501, No. 172, Shijie Science and Technology Road, Shijie Town, Dongguan City, Guangdong Province = 广东省东莞市石碣镇石碣科技中路172号501室 `); translate.nomenclature.append('english', 'chinese_traditional', ` International = 國際 Hai Mi = 海米 Room 501, No. 172, Shijie Science and Technology Road, Shijie Town, Dongguan City, Guangdong Province = 廣東省東莞市石碣鎮石碣科技中路172號501室 `); /* * 是否显示 select选择语言的选择框,true显示; false不显示。默认为true * 注意,这行要放到 translate.execute(); 上面 */ translate.selectLanguageTag.show = false; translate.service.use('client.edge'); //设置机器翻译服务通道 translate.execute(); //进行翻译