javascript – 我如何设计客户端队列系统?

前端之家收集整理的这篇文章主要介绍了javascript – 我如何设计客户端队列系统?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
概述

我正在研究一个项目,我遇到了一个问题,因为事情并没有按照我希望它们发生的顺序发生.所以我一直在考虑设计某种Queue,我可以使用它来组织函数调用和其他在启动期间使用的各种JavaScript / jQuery指令,即在页面加载时.我正在寻找的并不一定需要是一个队列数据结构,而是一些系统能够确保事物以我指定的顺序执行,并且只有在前一个任务完成后才能开始执行新任务.

我简要地看了一下jQuery QueueAjaxQueue,但我真的不知道它们是如何工作的,所以我不确定这是否是我想采取的方法……但我会继续阅读有关这些工具的更多信息.

SPECIFICS

目前,我已经设置了一些工作,以便在$(document).ready(function(){…})中发生一些工作;其他工作发生在$(window).load(function(){…});中.例如,

<head>
  <script type="text/javascript">    

    // I want this to happen 1st
    $().LoadJavaScript();
    // ... do some basic configuration for the stuff that needs to happen later...

    // I want this to happen 2nd
    $(document).ready(function() {

      // ... do some work that depends on the prevIoUs work do have been completed
      var script = document.createElement("script");
      // ... do some more work...
    });

    // I want this to happen 3rd
    $(window).load(function() {

      // ... do some work that depends on the prevIoUs work do have been completed
      $().InitializeSymbols();
      $().InitializeBlock();
      // ... other work ... etc...
    });
  </script>
</head>

……这真的很乏味和丑陋,更不用说糟糕的设计了.因此,我想设计一个非常通用的系统,而不是处理那个混乱,我可以,例如,将$().LoadJavaScript();,然后var script = document.createElement(“script”);,然后$().InitializeSymbols();,然后是$().InitializeBlock();等等……然后Queue将执行函数调用和指令,这样一条指令执行完毕后,另一条指令就可以启动,直到队列为止是空的,而不是我反复呼叫出队.

这背后的原因是,在开始其他工作之前,需要进行一些工作,例如配置和初始化,因为依赖于配置和初始化步骤已经完成.如果这听起来不是一个好的解决方案,请告诉我:)

一些基本工作

我已经为基本的Queue编写了一些代码,which can be found here,但是我希望扩展它的功能,以便我可以存储各种类型的“对象”,例如单独的JavaScript / jQuery指令和函数调用,基本上是代码片段.我想执行.

UPDATE

使用我实现的当前Queue,看起来我可以存储函数并在以后执行它们,例如:

// a JS file... 
$.fn.LoadJavaScript = function() {

    $.getScript("js/Symbols/Symbol.js");
    $.getScript("js/Structures/Structure.js");
};

// another JS file...
function init() { // symbols and structures };

// index.html
var theQueue = new Queue();
theQueue.enqueue($().LoadJavaScript);
theQueue.enqueue(init);

var LJS = theQueue.dequeue();
var INIT = theQueue.dequeue();

LJS();
INIT();

我也认为我已经想出了如何存储个别指令,例如$(‘#equation’).html(“”);或者甚至if-else语句或循环,通过这样包装它们:

theQueue.enqueue(function() { $('#equation').html(""); // other instructions,etc... });

但是这种方法需要我等到Queue完成它的工作才能继续我的工作.这似乎是一个不正确的设计.有一个更聪明的方法吗?另外,我怎么知道某个功能已经完成执行,以便队列可以知道继续前进?是否存在某种我可以等待的返回值或者我可以为队列中的每个任务指定的回调函数

包起来

因为我正在做客户端的所有事情而且我不能让Queue独立完成它自己的事情(根据下面的答案),有没有比我等待Queue完成其工作更聪明的解决方案?

因为这更像是一个设计问题,而不是特定的代码问题,我正在寻找解决我的问题的方法的建议,关于我应该如何设计这个系统的建议,但我绝对欢迎,并且很乐意看到,代码到备份建议:)我也欢迎任何有关我上面链接的Queue.js文件的批评和/或我对我的问题的描述以及我打算采取的方法解决它.

谢谢,Hristo

解决方法

我建议使用 http://headjs.com/它允许您并行加载js文件,但按顺序执行它们,基本上与您想要做的事情相同.它非常小,你可以随时使用它来获取灵感.

我还要提到依赖执行顺序的处理程序并不是很好的设计.我总是能够将所有引导代码放在ready事件处理程序中.如果您需要访问图像,有些情况下您需要使用加载处理程序,但对我来说这种情况并不常见.

原文链接:https://www.f2er.com/js/157970.html

猜你在找的JavaScript相关文章