javascript - 没有突变观察者的 Dom 节点插入/删除

Question

我正在 React 中构建一个 Tour 组件，其目的是向用户介绍 Web 应用程序的界面。 “游览”的一部分涉及验证用户的操作(例如，如果当前步骤涉及打开模式，一旦用户这样做，“游览”应该继续进行，否则如果用户尝试通过单击“继续”，则“游览”应该显示错误)下一步')。

为此，我需要检测 DOM 中的更改(例如，打开的模式或出现特定类的 div)。我有一些关于连接“onNext”函数的想法，一旦用户与某些目标元素(例如“打开模态”按钮)交互，该函数就会推进教程，但这似乎是一个黑客，我想控制教程的进展仅通过 DOM 中存在的实际元素进行游览，而不是通过监听最终显示必要元素的点击。

最大的限制之一是除了使用 jQuery 之外还要避免 MutationObservers。话虽如此，我对如何验证 dom 感兴趣，如何使用纯 javascript 和 dom 来确定元素的添加和删除？

Answer 1

我认为实现 Flux 架构来处理这个问题是最好的选择。 Redux 非常适合。

为您的游览进程创建一个 ReduxReducer。该 reducer 的状态应该是与用户所在游览的当前步骤相对应的键。

游览中使用的所有组件都应该能够作为 Prop 访问此游览状态。使用此 Prop 来确定功能。 IE。对于必须打开的对话框的示例，相关组件中的代码可能如下所示；

openModal(){
    if(this.props.tourStep == 'prompt_modal_open'){
        ActionCreator.progressTourStep();
    }
    // code for actually opening the modal goes here
},

someOtherAction(){
    if(this.props.tourStep == 'prompt_modal_open'){
        //Display error message here
    } else {
        //normal action result here
    }
}

当用户不进行游览时，只需将reducer中的tourStep设置为undefined，所有与游览相关的功能都会被关闭。

或者，如果你想让你的组件保持干净和“哑”，你可以在 Redux-Thunk 的帮助下将此逻辑直接放入操作创建器中；

ActionCreator.openModal = function(){
    return function(dispatch, getState){
        var state = getState();
        if(state.tourStep == 'prompt_modal_open'){
            dispatch({type: 'progress_tour_step'});
        }
        dispatch({type: 'open_modal'});
    }
}

ActionCreator.someOtherAction = function(){
    return function(dispatch, getState){
        var state = getState();
        if(state.tourStep != undefined){
            dispatch({type: 'show_error'});
        } else {
            dispatch({type: 'some_other_action_type'});
        }
    }
}