如何在index.php中同步onload.js里的page变量值

问题背景 #

我有./js/onload.js文件，核心代码如下：

$('#fb5-book').turn({
    display: DISPLAY,
    duration: 600,
    acceleration: true,
    elevation: 50,
    page: nrPage,
    when: {
        first: function (e, page) {
            $('.fb5-nav-arrow.prev').hide();
        },
        turned: function (e, page) {
            Book_v5.currentPage = page;  // 不可删除，其他功能依赖此变量
            
            if (page > 1) {
                $('.fb5-nav-arrow.prev').fadeIn();
                //$('#fb5-about').hide();
            }
            if ((page == 1 && RTL == 'false') || (page == $(this).turn('pages') && RTL == 'true')) {
                $('#fb5-about').css('z-index', 11);
            }
            if (page < $(this).turn('pages')) {
                $('.fb5-nav-arrow.next').fadeIn();
            }
        }
    }
});

在Book_v5.currentPage = page;后添加alert(page)或console.log(page)能正常获取页码值。我想在index.php中创建变量let pageNumber=1，让它的值随onload.js中的page值同步变化。但之前在onload.js中定义let pageNumber=page;并在index.php的<script>标签中调用的方法失败了，寻求解决办法。

问题原因 #

之前的方案失败是变量作用域隔离导致的：

• 如果在turned回调函数内部用let pageNumber=page;定义变量，该变量仅在函数局部生效，外部无法访问；
• 如果在onload.js的全局作用域定义变量，但index.php的脚本执行顺序早于onload.js，会出现变量未初始化的问题。

解决方案 #

方案1：使用全局共享变量（最简单直接） #

利用window对象挂载全局变量，实现跨脚本的变量共享：

1. 在index.php的<script>标签中定义全局变量：

// index.php 中的脚本
window.pageNumber = 1; // 挂载到window，成为全局可访问的变量

2. 在onload.js的turned回调中更新该变量：

turned: function (e, page) {
    Book_v5.currentPage = page;
    window.pageNumber = page; // 同步更新全局页码变量
    // 保留原有逻辑代码...
}

之后在index.php中需要使用页码时，直接访问pageNumber或window.pageNumber即可。

方案2：自定义事件通知（解耦代码，更优雅） #

通过自定义DOM事件传递页码变化，避免全局变量污染：

1. 在index.php的<script>标签中监听自定义事件：

// index.php 中的脚本
let pageNumber = 1;
// 监听页码变化事件
document.addEventListener('pageChanged', function(e) {
    pageNumber = e.detail.page;
    // 可在此添加页码更新后的逻辑，比如渲染页面
    console.log('当前页码已更新为:', pageNumber);
});

2. 在onload.js的turned回调中触发事件：

turned: function (e, page) {
    Book_v5.currentPage = page;
    // 触发自定义事件，传递当前页码
    document.dispatchEvent(new CustomEvent('pageChanged', { 
        detail: { page: page } 
    }));
    // 保留原有逻辑代码...
}

注意事项 #

• 确保脚本加载顺序：如果index.php中的脚本需要立刻访问全局变量，需将onload.js放在该脚本之前加载，或者用DOMContentLoaded包裹代码，确保所有脚本加载完成后再执行：

// index.php 中的脚本
document.addEventListener('DOMContentLoaded', function() {
    console.log('初始页码:', window.pageNumber);
});

内容的提问来源于stack exchange，提问作者Mohammad Fathi Rahman