Question

我正在编写一些实用程序JS库，其中包含一些用于前端Web开发的常用代码 - 当我们需要设计师想要的某些像素完美的东西时，这些内容可以填补CSS无法解决的空白

我有一组在init页面上运行的函数以及resize和其他事件，每个事件都做某件事，例如匹配一堆元素的高度，就像那样。每个函数很可能包含某种循环，循环遍历元素集合并更新一些CSS样式。

我的问题是这个 - 如果其中一个函数中的某些操作依赖于其中一个先运行的OTHER函数会怎么样？我只是通过重新排序函数调用来无法处理这个问题，因为随着这个utils库的增长，最终会有很多不同的函数被调用。

此外，并非每个函数中循环的所有迭代都需要等待另一个函数循环完成 - 有时它不重要。

我不确定我是否能很好地解释这个问题，还有一些伪问题

function matchHeights(){
   for(item in items){
      //do CSS stuff to each item
   }
}

function verticalCenter(){
   for(item in items){
      //do CSS stuff each item
   }
}

正如您所看到的，matchHeights()和verticalCenter()都包含一个循环，循环遍历一堆项目，并为每个项目执行一些JS以将所需的CSS应用于每个项目。

但是如果verticalCenter()循环中的某些项目嵌套在matchHeights()循环中的某些项目内的DOM中会怎样？相关的父项需要先matchHeights()在他们的子项调用verticalCenter()之前调用它们，否则子元素将无法正确地垂直居中于{为父项设置的新高度{ {1}}

显然，在这种情况下，在 matchHeights()之后调用verticalCenter() 会解决它，但我希望这能说明如何通过简单的重新排序来解决这样的问题函数调用。

我认为我需要的是某种＆＃34;主人＆＃34;循环具有一系列事件，它以正确的顺序调用每个项目上的特定函数，而不是每个函数盲目地循环遍历所有项目，但我不确定如何最好地构建它。

如果我的任何喋喋不休有意义，我会赞赏一些建议：）

Answer 1

你所展示的代码很模糊，但我会详细说明我对你的理解。

您需要通过多个函数来处理几个项目，因此不要单独信任每个循环。

让“经理”了解每件商品应具备的内容，例如：

var items = [
     {item: "whatever", matchHeights: true, verticalCenter: true},
     {item: "whatever", verticalCenter: true},
     {item: "whatever", matchHeights: true}
];

现在你的“经理”将循环使用items数组，并检查每个项目需要运行的方法。

当然，如果它更复杂，你给它优先权，等等。

Answer 2

您可以使用某种回调，如下所示。您需要以插件样式实现它。您可以使用某些逻辑来触发匹配高度完全应用于您需要的元素。

$('div').matchHeight({
   onComplete: function(){
      $('another-div').verticalHeight();
   }
});

Javascript - 根据其他函数的结果运行

2 个答案: