MaterializeCSS 中的 getInstance 方法是什么

Question

我只花了几个小时使用MaterializeCSS框架，我发现了我认为我不理解的代码，文档中可能没有解释，你能给我解释一下它的功能是什么getInstance() 方法 ?

let elems = document.querySelectorAll(".sidenav");
M.Sidenav.getInstance(elems).close();
M.Sidenav.init(elems);

Answer 1

getInstance returns 组件及其可用的所有数据 - 我们可以在其上使用因组件而异的提供方法。

#1 var elems = document.querySelectorAll('.sidenav');

此 select 具有 class sidenav 的所有元素。如果我们记录 elems，我们会看到它是一个节点列表。您可能只会有一个 sidenav，但您可以想象如果我们正在查看 select 个输入，我们可能在页面上有多个输入。

#2 var instances = M.Sidenav.init(elems);

这将初始化组件。在我的 codepen 中，我记录了 instances[0] - 请记住我们正在 selecting 潜在的多个元素，因此我们需要通过节点列表索引访问它们。 [0] returns 第一个实例，或本例中的第一个 sidenav。

假设您有多个 sidenav，并且您想运行在其中一个 sidenav 上使用一种方法，比如打开它。为此，我们需要获取特定实例。所以我们可以使用节点列表索引 - instances[0].open() - 或者，我们可以更明确：

#3 var elem = document.querySelector('#mobile-demo');

这通过 ID 获取单个 sidenav（注意使用 querySelector 而不是 querySelectorAll）。

#4 var instance = M.Sidenav.getInstance(elem);

这会获取特定实例，如果我们查看 instance 的日志，我们可以看到它与使用 instances[0].

相同

我们现在可以运行 instance.open()，或者通过检查返回的对象来获取各种数据。记录 instance.options 显示用于初始化的选项 - 在本例中 none - 所以我们看到返回的默认值。

检查 codepen 并查看日志。

What Is getInstance Method in MaterializeCSS