javascript创建类_使用JavaScript承诺创建基本加载器

清疚 2023-02-22 03:37 10阅读 0赞

javascript创建类

I've used JavaScript loaders for years; whether it was the Dojo loader, [curl.js][], or even using [jQuery as a JavaScript loader][], it's incredibly useful to request a set of resources and react once they've completed loading.  Each JavaScript loader is feature-packed, efficient, and does a wonderful job of shimming the Promise API which didn't exist in the browser when the loader is created.  The following is not that type of loader.

我已经使用JavaScript加载程序多年； 无论是Dojo加载器， [curl.js][] ，还是使用[jQuery作为JavaScript加载器][jQuery as a JavaScript loader] ，请求一组资源并在完成加载后做出React都是非常有用的。 每个JavaScript加载程序都具有功能丰富，高效的特性，并且在填充Promise API方面做得很出色，Promise API在创建加载程序时在浏览器中不存在。 以下不是那种加载器。

This *super simple* loader allows for loading of image, CSS, and JavaScript files, using the [Promise API][], and fires a callback upon success or failure.  This tiny "loader" (I shouldn't even call it that) does **not**:

这个*超级简单的*加载程序允许使用[Promise API][]加载图像，CSS和JavaScript文件，并在成功或失败时触发回调。 这个微小的“加载”(我应该甚至不应该称呼它) **不** ：

*  cache results (though that would be easy)
    
    缓存结果(尽管那很容易)
 *  provide a module/object back
    
    提供模块/对象返回
 *  do AJAX calls (though a [XHR-to-Promise][Promise API] shim is available, or you can use [fetch][])
    
    进行AJAX调用(尽管可以使用[XHR-Promise][Promise API]填充程序，也可以使用[fetch][] )
 *  ... or anything else advanced
    
    ...或其他高级

Here is the tiny "loader" in all of its glory:

这是所有荣耀中的微型“装载机”：

A `load` object is created  with `js`, `css`, and `img` functions which accept a URL to load.  Each function returns a Promise and the `onload` or `onerror` event of the resource's tag triggers `resolve` or `reject` for the promise.  `Promise.all` collects the resources to be loaded and `then` triggers upon successful load of all resources, `catch` if any of them fail.

`load`对象是使用`js` ， `css`和`img`函数创建的，这些函数接受要加载的URL。 每个函数都返回一个Promise，并且资源标签的`onload`或`onerror`事件触发对promise的`resolve`或`reject` 。 `Promise.all`收集要加载的资源， `then`在成功加载所有资源时触发，并在其中任何一个失败时`catch` 。

I have to stress that this is meant to be a very, very simple "loader"; please save the comments about how it doesn't have bells and whistles that other loaders have. I love how awesome the [Promise API][] makes async and resource loading management, as does the ServiceWorker API and [fetch API][fetch].  Do yourself a favor and check out these awesome APIs!

我必须强调，这是非常非常简单的“加载程序”； 请保存有关它没有其他装载机的钟声的评论。 我喜欢[Promise API][]和ServiceWorker API和[fetch API][fetch]一样出色地实现了异步和资源加载管理。 帮个忙，看看这些很棒的API！

> 翻译自: [https://davidwalsh.name/javascript-loader][https_davidwalsh.name_javascript-loader]

javascript创建类

[curl.js]: https://davidwalsh.name/curljs
[jQuery as a JavaScript loader]: https://davidwalsh.name/loading-scripts-jquery
[Promise API]: https://davidwalsh.name/promises
[fetch]: https://davidwalsh.name/fetch
[https_davidwalsh.name_javascript-loader]: https://davidwalsh.name/javascript-loader