使用History.js更改全局变量

Question

我一直在尝试实现History.js。我已经了解了如何获取和推动状态的工作，但是我对历史的数据存储组件以及使用全局变量都有特殊的麻烦。

作为一个简单的例子，我决定尝试设置一个脚本，它会在点击时改变html框的颜色。这也会触发历史记录 - 实际上是创建了一个用于点击框的历史记录（其颜色在历史记录的每个状态下都会更改）。

有没有办法根据历史状态数据中提供的数据（在这种情况下，更新i每次点击）更新全局变量？

HTML：

<div id="box">CLICK ME</div>
<button id="back">Back</button>
<button id="forward">Forward</button>

CSS：

#box {
    width: 300px;
    height: 300px;
    background-color: black;
    color: white;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}

JavaScript的：

var History = window.History;
var i = 0;

if (History.enabled) {
    var State = History.getState();
    History.pushState({count:i}, $("title").text(), State.urlPath);
} else {
    return false;
}

// Bind to StateChange Event
History.Adapter.bind(window,'statechange', function(){
    State = History.getState();
    console.log(State.data, State.title, State.url);
    $(this).css('background-color', getColour());
});

// Trigger the change
$("#div").on("click", function() {
    i++;
    History.pushState({count:i},"State " + i,"?state=" + i);
});

function getColour() {
    var colours = ["red", "orange", "yellow", "green", "aqua","blue", "purple", "magenta","black"];
    if (i > colours.length - 1) {
        i = 0;
    }
    if (i < 0) {
        i = colours.length - 1;
    }
    return colours[i];
}

$("#back").on("click", function() {
    History.back();
});

$("#forward").on("click", function() {
    History.forward();
});

我也按照其他主题的建议使用 JQuery ， ajaxify-html5.js 和 scrollto.js 。

Editable JSFiddle | Viewable JSFiddle

Answer 1

在玩了这一吨（并阅读更多问题）之后，我已经弄明白了。我将详细说明解决方案对遇到此问题的其他人的意义。

JSFIDDLE VIEW SOLUTION | JSFIDDLE VIEW SOLUTION

首先是最终代码。请注意，JavaScript有document.ready个附加功能，可以在JSFiddle之外使用它。

同样值得注意的是，我拿出了 ajaxify-html5.js 和 scrollto.js ，因为它们不需要（并且在某处破坏了代码）。

<强> HTML：

<div id="box">
    <div id="count"></div>
    <div id="colour"></div>
</div>
<button id="back">Back</button>
<button id="forward">Forward</button>

<强> CSS：

#box {
    width: 300px;
    height: 300px;
    background-color: white;
    color: white;
    vertical-align: middle;
    text-align: center;
    display: table-cell;
}
button {
    width: 148px;
    height: 40px;
}

#count, #colour {
    background-color: black;
    font-family: "Consolas";
}

<强> JavaScript的：

var History = window.History;
var i = 0;
var colour = getColour();
var colourName = getColourName();

$(document).ready(function() {

    if (History.enabled) {
        changeHistory();
    }
    else {
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange', function(){  
        State = History.getState();
        i = State.data.count;
        colour = State.data.colour;
        colourName = State.data.colourName;
        changeHistory();
    });

    // Trigger the change
    $(document).on("click", "#box", function() {
        i = i + 1;
        colour = getColour();
        colourName = getColourName();
        changeHistory();
    });

    $(document).on("click", "#back", function() {
        History.back();
    });

    $(document).on("click", "#forward", function() {
        History.forward();
    });


});

function getColour() {
    var colours = ["rgb(220,45,45)", "orange", "rgb(230,230,50)", "rgb(15,210,80)", "rgb(100,220,220)","rgb(50,80,210)", "rgb(140,20,180)", "rgb(230,70,110)","grey"];
    if (i > colours.length - 1) {
        i = 0;
    }
    if (i < 0) {
        i = colours.length - 1;
    }
    return colours[i];
}

function getColourName() {
    var colourNames = ["Red","Orange","Yellow","Green","Light Blue","Blue","Purle","Pink","Grey"];
    return colourNames[i];
}

// Make the changes
function changeHistory () {
    $("#colour").html(colourName);
    $("#count").html(i);
    $("#box").css('background-color', colour);
    History.pushState({count:i, colour: colour, colourName: colourName},"A Shade of " + colourName,"?colour=" + colourName);
}

回到我想要实现的问题：

• 点击此框会添加历史记录
• 每个历史记录都包含影响全局变量所需的变量

值得注意的是，解决方案具体使用历史的每次迭代中的变量来为全局变量提供动力，而程序本身使用全局变量。用于为界面提供动力的变量永远不会访问存储在历史记录中的。

让我们将程序分解为单独且简单的过程和函数。就像其他history.js解决方案一样，您可以使用它来实现它的工作：

• History.getState（）：从堆栈中获取最新的历史记录项
• History.Adapter.bind（window，'statechange'，function（）{}：当窗口具有状态转换时将触发函数的事件侦听器（在本例中为历史记录更改）< / LI>
• History.pushState（{data}，title，url）：将状态推入“历史堆栈”。保存一个对象（数据），标题（标签/窗口）和要显示的网址。

设置历史记录：

当用户点击该框时，该程序应该：

• 递增计数器（i）
• 更改颜色和colourName
• 在
中添加新的历史堆栈对象

我决定将前两个功能与最后一个功能分开。函数changeHistory()负责更新框的内容（来自全局变量）并推送新的历史对象（使用全局变量）。

每当我想要添加新的历史项目并更新框中的内容以反映新的历史记录时，

changeHistory()就会被调用 - 因此在启动时会点击该框。

单击该框时，将满足前两个条件。使用现有的全局变量和函数，检索新颜色和名称并将其设置为全局变量。

这是它的表现方式：

  

Box Click - ＆gt;增量i，更改变量 - ＆gt;推送历史

听取历史变化：

完成历史记录更改后（通过单击框，按后退/前进按钮或浏览器按钮），需要进行更改。

通过创建变量State = History.getState()，我们可以轻松地从最新的历史堆栈对象访问数据。

我们将使用history object.data中的这些数据来分配全局变量。更新变量后，我们将使用changeHistory()更新视图。

这就是模型的工作方式：

  

历史记录已更改 - ＆gt;从历史更新全局变量 - ＆gt;更新视图

每当有人按下后退，前进或方框时，都会发生历史记录变更，从而导致所有可能的变化。