feat(runtime): 全站前端脚本统一接入 AksrtFrontend 全局 DOM 生命周期
- rehydrate.js 新增 boot()/aksrt:ready 事件，支持 boot 后晚注册立即以 init 触发 - aksrt-runtime.js 初始加载改走 AksrtFrontend.boot，tooltip/倒计时注册为组件 - 约 30 个前端脚本（首页、评论、支付、路由、页面叶子、widgets） 从直接 DOMContentLoaded 迁移为 AksrtFrontend.register，并加幂等标记 - section-navs 依赖改为 aksrt-runtime，保证注册时序 - 清理死代码：删除孤儿 loader.js/main.js 及 runtime/page-navs 遗留副本 - loader.js 移除已迁移模块的 tbquire 路径映射，main.js 相应瘦身 - build-public-assets.mjs 增加 runtime/main.min.js 自动压缩步骤 - 新增 4 个契约测试（homepage-dom/rehydrate-runtime/global-dom-init/ public-bundle-parity），3 个既有 harness 适配注册表初始化方式
This commit is contained in:
kate522 committed
1 parent
5984d4e42d
commit
1f4a39d8f8
60 files changed
+1810
-1742
No files matched your search
Vendored
+91
-114
@@ -10,108 +10,101 @@
|
||||
'use strict';
|
||||
|
||||
var reducedMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var countUpObserver = null;
|
||||
var countdownElements = [];
|
||||
var countdownTimer = null;
|
||||
var fpsDetectionStarted = false;
|
||||
|
||||
/* ============================================================
|
||||
* 1. 数字递增 (count-up) — IntersectionObserver 触发
|
||||
* 用法：<span data-aksrt-countup data-target="1234" data-duration="2000">0</span>
|
||||
* ============================================================ */
|
||||
function initCountUp() {
|
||||
if (reducedMotion) return;
|
||||
if (!('IntersectionObserver' in window)) return;
|
||||
function scopeFor(root) {
|
||||
return root && root.querySelectorAll ? root : document;
|
||||
}
|
||||
|
||||
var els = document.querySelectorAll('[data-aksrt-countup]');
|
||||
if (!els.length) return;
|
||||
function eachMatch(root, selector, callback) {
|
||||
var scope = scopeFor(root);
|
||||
if (scope.nodeType === 1 && scope.matches(selector)) callback(scope);
|
||||
scope.querySelectorAll(selector).forEach(callback);
|
||||
}
|
||||
|
||||
var observer = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (!entry.isIntersecting) return;
|
||||
var el = entry.target;
|
||||
observer.unobserve(el);
|
||||
function animateCountUp(el) {
|
||||
if (el.dataset.aksrtCountupBound === '1') return;
|
||||
el.dataset.aksrtCountupBound = '1';
|
||||
countUpObserver.observe(el);
|
||||
}
|
||||
|
||||
var target = parseFloat(el.dataset.target || '0');
|
||||
var duration = parseInt(el.dataset.duration || '2000', 10);
|
||||
var decimals = (el.dataset.decimals || '0|').split('|');
|
||||
var prefix = decimals[1] || '';
|
||||
var dec = parseInt(decimals[0], 10) || 0;
|
||||
var start = 0;
|
||||
var startTime = null;
|
||||
function initCountUp(root) {
|
||||
if (reducedMotion || !('IntersectionObserver' in window)) return;
|
||||
if (!countUpObserver) {
|
||||
countUpObserver = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (entry) {
|
||||
if (!entry.isIntersecting) return;
|
||||
var el = entry.target;
|
||||
countUpObserver.unobserve(el);
|
||||
var target = parseFloat(el.dataset.target || '0');
|
||||
var duration = parseInt(el.dataset.duration || '2000', 10);
|
||||
var decimals = (el.dataset.decimals || '0|').split('|');
|
||||
var prefix = decimals[1] || '';
|
||||
var dec = parseInt(decimals[0], 10) || 0;
|
||||
var startTime = null;
|
||||
|
||||
function step(timestamp) {
|
||||
if (!startTime) startTime = timestamp;
|
||||
var progress = Math.min((timestamp - startTime) / duration, 1);
|
||||
// ease-out cubic
|
||||
var eased = 1 - Math.pow(1 - progress, 3);
|
||||
var current = start + (target - start) * eased;
|
||||
el.textContent = prefix + current.toFixed(dec).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step);
|
||||
} else {
|
||||
el.textContent = prefix + target.toFixed(dec).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
function step(timestamp) {
|
||||
if (!startTime) startTime = timestamp;
|
||||
var progress = Math.min((timestamp - startTime) / duration, 1);
|
||||
var current = target * (1 - Math.pow(1 - progress, 3));
|
||||
el.textContent = prefix + current.toFixed(dec).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
if (progress < 1) requestAnimationFrame(step);
|
||||
else el.textContent = prefix + target.toFixed(dec).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(step);
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
|
||||
els.forEach(function (el) { observer.observe(el); });
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 2. 倒计时组件
|
||||
* 用法：<span data-aksrt-countdown data-end="2026-12-31T23:59:59">--:--:--</span>
|
||||
* ============================================================ */
|
||||
function initCountdown() {
|
||||
var els = document.querySelectorAll('[data-aksrt-countdown]');
|
||||
if (!els.length) return;
|
||||
|
||||
function pad(n) { return n < 10 ? '0' + n : '' + n; }
|
||||
|
||||
function update() {
|
||||
var now = Date.now();
|
||||
els.forEach(function (el) {
|
||||
var end = new Date(el.dataset.end).getTime();
|
||||
var diff = end - now;
|
||||
if (diff <= 0) {
|
||||
el.textContent = el.dataset.expired || '已结束';
|
||||
return;
|
||||
}
|
||||
var d = Math.floor(diff / 86400000);
|
||||
var h = Math.floor((diff % 86400000) / 3600000);
|
||||
var m = Math.floor((diff % 3600000) / 60000);
|
||||
var s = Math.floor((diff % 60000) / 1000);
|
||||
var format = el.dataset.format || 'dhms';
|
||||
if (format === 'dhms') {
|
||||
el.textContent = (d > 0 ? d + '天 ' : '') + pad(h) + ':' + pad(m) + ':' + pad(s);
|
||||
} else if (format === 'hms') {
|
||||
el.textContent = pad(h + d * 24) + ':' + pad(m) + ':' + pad(s);
|
||||
} else {
|
||||
el.textContent = (d > 0 ? d + '天 ' : '') + pad(h) + '时' + pad(m) + '分' + pad(s) + '秒';
|
||||
}
|
||||
});
|
||||
requestAnimationFrame(step);
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
}
|
||||
|
||||
update();
|
||||
setInterval(update, 1000);
|
||||
eachMatch(root, '[data-aksrt-countup]', animateCountUp);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 4. 3D 悬停倾斜 (vanilla tilt)
|
||||
* 用法：<div data-aksrt-tilt data-tilt-max="15">...</div>
|
||||
* ============================================================ */
|
||||
function initTilt() {
|
||||
if (reducedMotion) return;
|
||||
function pad(n) { return n < 10 ? '0' + n : '' + n; }
|
||||
|
||||
document.querySelectorAll('[data-aksrt-tilt]').forEach(function (el) {
|
||||
function updateCountdowns() {
|
||||
var now = Date.now();
|
||||
countdownElements = countdownElements.filter(function (el) { return document.documentElement.contains(el); });
|
||||
countdownElements.forEach(function (el) {
|
||||
var end = new Date(el.dataset.end).getTime();
|
||||
var diff = end - now;
|
||||
if (diff <= 0) {
|
||||
el.textContent = el.dataset.expired || '已结束';
|
||||
return;
|
||||
}
|
||||
var d = Math.floor(diff / 86400000);
|
||||
var h = Math.floor((diff % 86400000) / 3600000);
|
||||
var m = Math.floor((diff % 3600000) / 60000);
|
||||
var s = Math.floor((diff % 60000) / 1000);
|
||||
var format = el.dataset.format || 'dhms';
|
||||
if (format === 'dhms') el.textContent = (d > 0 ? d + '天 ' : '') + pad(h) + ':' + pad(m) + ':' + pad(s);
|
||||
else if (format === 'hms') el.textContent = pad(h + d * 24) + ':' + pad(m) + ':' + pad(s);
|
||||
else el.textContent = (d > 0 ? d + '天 ' : '') + pad(h) + '时' + pad(m) + '分' + pad(s) + '秒';
|
||||
});
|
||||
}
|
||||
|
||||
function initCountdown(root) {
|
||||
eachMatch(root, '[data-aksrt-countdown]', function (el) {
|
||||
if (el.dataset.aksrtCountdownBound === '1') return;
|
||||
el.dataset.aksrtCountdownBound = '1';
|
||||
countdownElements.push(el);
|
||||
});
|
||||
updateCountdowns();
|
||||
if (!countdownTimer && countdownElements.length) countdownTimer = window.setInterval(updateCountdowns, 1000);
|
||||
}
|
||||
|
||||
function initTilt(root) {
|
||||
if (reducedMotion) return;
|
||||
eachMatch(root, '[data-aksrt-tilt]', function (el) {
|
||||
if (el.dataset.tiltBound) return;
|
||||
el.dataset.tiltBound = '1';
|
||||
|
||||
var maxDeg = parseFloat(el.dataset.tiltMax || '10');
|
||||
var perspective = parseFloat(el.dataset.tiltPerspective || '800');
|
||||
var scale = parseFloat(el.dataset.tiltScale || '1.03');
|
||||
var glare = el.dataset.tiltGlare === '1';
|
||||
var glareEl = null;
|
||||
|
||||
if (glare) {
|
||||
glareEl = document.createElement('div');
|
||||
glareEl.style.cssText = 'position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 100%);opacity:0;transition:opacity 0.2s;';
|
||||
@@ -119,17 +112,13 @@
|
||||
el.style.overflow = 'hidden';
|
||||
el.appendChild(glareEl);
|
||||
}
|
||||
|
||||
el.addEventListener('mousemove', function (e) {
|
||||
var rect = el.getBoundingClientRect();
|
||||
var x = (e.clientX - rect.left) / rect.width;
|
||||
var y = (e.clientY - rect.top) / rect.height;
|
||||
var rotateX = (0.5 - y) * maxDeg;
|
||||
var rotateY = (x - 0.5) * maxDeg;
|
||||
el.style.transform = 'perspective(' + perspective + 'px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg) scale3d(' + scale + ',' + scale + ',' + scale + ')';
|
||||
el.style.transform = 'perspective(' + perspective + 'px) rotateX(' + ((0.5 - y) * maxDeg) + 'deg) rotateY(' + ((x - 0.5) * maxDeg) + 'deg) scale3d(' + scale + ',' + scale + ',' + scale + ')';
|
||||
if (glareEl) glareEl.style.opacity = '1';
|
||||
});
|
||||
|
||||
el.addEventListener('mouseleave', function () {
|
||||
el.style.transform = 'perspective(' + perspective + 'px) rotateX(0deg) rotateY(0deg) scale3d(1,1,1)';
|
||||
if (glareEl) glareEl.style.opacity = '0';
|
||||
@@ -137,42 +126,30 @@
|
||||
});
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 5. FPS 检测 + 低端设备降级
|
||||
* ============================================================ */
|
||||
function initFpsDetection() {
|
||||
if (!('requestAnimationFrame' in window)) return;
|
||||
|
||||
function initFpsDetection(root, reason) {
|
||||
if (fpsDetectionStarted || !('requestAnimationFrame' in window)) return;
|
||||
fpsDetectionStarted = true;
|
||||
var frames = 0;
|
||||
var startTime = performance.now();
|
||||
|
||||
function countFrames() {
|
||||
frames++;
|
||||
var elapsed = performance.now() - startTime;
|
||||
if (elapsed >= 1000) {
|
||||
var fps = Math.round(frames * 1000 / elapsed);
|
||||
if (fps < 24) {
|
||||
document.body.classList.add('fps-accelerat');
|
||||
}
|
||||
return; // 只检测一次
|
||||
if (Math.round(frames * 1000 / elapsed) < 24 && document.body) document.body.classList.add('fps-accelerat');
|
||||
return;
|
||||
}
|
||||
requestAnimationFrame(countFrames);
|
||||
}
|
||||
|
||||
requestAnimationFrame(countFrames);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 初始化入口
|
||||
* ============================================================ */
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
initCountUp();
|
||||
initCountdown();
|
||||
if (typeof initMarquee === 'function') {
|
||||
initMarquee();
|
||||
}
|
||||
initTilt();
|
||||
initFpsDetection();
|
||||
});
|
||||
function init(root, reason) {
|
||||
initCountUp(root);
|
||||
initCountdown(root);
|
||||
if (typeof initMarquee === 'function') initMarquee(root, reason);
|
||||
initTilt(root);
|
||||
initFpsDetection(root, reason);
|
||||
}
|
||||
|
||||
window.AksrtFrontend.register('aksrt-effects', init);
|
||||
})();
|
||||
Reference in new issue
Block a user