javascript创建类

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加载器 ，请求一组资源并在完成加载后做出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 shim is available, or you can use fetch)

进行AJAX调用(尽管可以使用XHR-Promise填充程序，也可以使用fetch )

... or anything else advanced

...或其他高级

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

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

var load = (function() { // Function which returns a function: https://davidwalsh.name/javascript-functions function _load(tag) { return function(url) { // This promise will be used by Promise.all to determine success or failure return new Promise(function(resolve, reject) { var element = document.createElement(tag); var parent = 'body'; var attr = 'src'; // Important success and error for the promise element.onload = function() { resolve(url); }; element.onerror = function() { reject(url); }; // Need to set different attributes depending on tag type switch(tag) { case 'script': element.async = true; break; case 'link': element.type = 'text/css'; element.rel = 'stylesheet'; attr = 'href'; parent = 'head'; } // Inject into document to kick off loading element[attr] = url; document[parent].appendChild(element); }); }; } return { css: _load('link'), js: _load('script'), img: _load('img') } })(); // Usage: Load different file types with one callback Promise.all([ load.js('lib/highlighter.js'), load.js('lib/main.js'), load.css('lib/highlighter.css'), load.img('images/logo.png') ]).then(function() { console.log('Everything has loaded!'); }).catch(function() { console.log('Oh no, epic failure!'); });

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.  Do yourself a favor and check out these awesome APIs!

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

翻译自: https://davidwalsh.name/javascript-loader

javascript创建类

相关资源：jdk-8u281-windows-x64.exe