使用从两个函数

Question

我在一个调用函数的按钮上有这个load-more监听器，它工作正常。

let moviesPage = 1;
let seriesPage = 1;

document.getElementById('load-more').addEventListener('click', () => {

  if (document.querySelector('#movies.active-link')) {

    moviesPage++;
    getMovies(moviesPage); 

    //getMovies(genreId, moviesPage); 

  } else if (document.querySelector('#series.active-link')) {

    seriesPage++;
    getSeries(seriesPage);

  }

});

现在我在调用以下代码的链接列表上有另一个侦听器。它将事件参数中的genreId作为参数发送到api调用。到目前为止也工作正常。

document.querySelector('.dropdown-menu').addEventListener('click', 
getByGenre);

function getByGenre (e) {


    const genreId = e.target.dataset.genre;


    movie.movieGenre(genreId)
        .then(movieGenreRes => {
            ui.printMovieByGenre(movieGenreRes);
        })
        .catch(err => console.log(err));

};

我想要做的是从getByGenre侦听器调用load-more，同时传递moviesPage参数，就像在评论代码上看到的那样，它也可以传递给api调用。 / p>

最好的方法是什么？我已经研究过.call（）和.bind（），但我不确定在这种情况下查看它是否正确，甚至是如何实现它。

Answer 1

简答

Kludge：Global State

现在解决这个问题的最简单但不是最优雅的方法是使用一些全局状态。

获取包含所选selection的全局genreId对象。确保在之前在任何地方声明对象文字。

因此，您的代码可能如下所示：

var selection = { };

document.querySelector('.dropdown-menu').addEventListener('click', 
getByGenre);

function getByGenre (e) {

    const genreId = e.target.dataset.genre;

    selection.genreId = genreId;

    movie.movieGenre(...);

};

...

let moviesPage = 1;
let seriesPage = 1;

document.getElementById('load-more').addEventListener('click', () => {

  if (document.querySelector('#movies.active-link')) {

    ...

    if (selection.genreId !== undefined) {
       getMovies(selection.genreId, moviesPage); 
    }

  } else if (...)) {

    ...

  }

});

封闭

更优雅的方法是通过使用闭包来实现这一点，但为此我必须更多地了解您的代码结构。目前，像上述这样的全球国家将为您服务。

更长的答案

您的疑虑尚未分开。你在对象中混淆了多个问题。

例如要加载更多电影，请在load-more侦听器中调用名为getMovies的函数。但是，在.dropdown-menu侦听器中，您可以通过movie方法调用getByGenre对象的方法。

理想情况下，您希望将UI问题（例如，使用查询选择器选择元素或从元素中读取数据）与实际业务对象分开。因此，更具可扩展性的模型如下所示：

var movies = {
    get: function(howMany) {

        if (howMany === undefined) {
          howMany = defaultNumberOfMoviesToGetPerCall;
        }

        if (movies.genreId !== undefined) {
            // get only those movies of the selected genre
        } else {
          // get all kinds of movies
        }
    },

    genreId : undefined,

    defaultNumberOfMoviesToGetPerCall: 25
};

document.get...('.load-more').addEventListener('whatever', (e) => {
    var moviesArray = movies.get();

    // do UI things with the moviesArray
});


document.get...('.dropdown-menu').addEventListener('whatever', (e) => {
    movies.genreId = e.target.dataset.genreId;

    var moviesArray = movies.get();

    // do UI things with the moviesArray
});