西部数码主机 | 阿里云主机| 虚拟主机 | 服务器 | 返回乐道官网
当前位置: 主页 > 开发教程 > JavaScript教程 >

使用JavaScript Promises创建简单的Loader

时间:2016-06-02 16:39来源:未知 作者:好模板 点击:
我使用JavaScript加载器已经有几年了;无论是Dojo Loader,curl.js,还是使用jQuery做为JavaScript loader,加载一组资源,一旦这些资源加载完成就给出响应,这是超级实用的。每个JavaScript loader都

我使用JavaScript加载器已经有几年了;无论是Dojo Loader,curl.js,还是使用 jQuery做为JavaScript loader,加载一组资源,一旦这些资源加载完成就给出响应,这是超级实用的。每个JavaScript loader都是功能强大,高效的,创建loader时浏览器不支持Promise API,loader可以代替Pormise API完成类似的工作。接下来的loader不属于该类型。

这个超级简单的loader使用 Promise API,成功或失败时触发回调,允许加载图片,CSS和javascript文件。这个小小的 "loader" (甚至不能称之为loader)不做:

  • 缓存结果 (虽然这很容易)
  • 提供一个模板/对象的返回
  • 做Ajax调用 (虽然 XHR-to-Promise shim是可用的, 或者你可以使用 fetch)
  • ... 或其他高级的东东

这是小小的"loader"的所有荣耀:

var load = (function() {
  // 返回一个函数的函数: https://davidwalsh.name/javascript-functions
  function _load(tag) {
    return function(url) {
      // 这个promise使用Promise.all确定成功或失败
      return new Promise(function(resolve, reject) {
        var element = document.createElement(tag);
        var parent = 'body';
        var attr = 'src';

        // promise重要的成功和失败
        element.onload = function() {
          resolve(url);
        };
        element.onerror = function() {
          reject(url);
        };

        // 需要根据标签类型设置不同的属性
        switch(tag) {
          case 'script':
            element.async = true;
            break;
          case 'link':
            element.type = 'text/css';
            element.rel = 'stylesheet';
            attr = 'href';
            parent = 'head';
        }

        // 注入文件以启动加载
        element[attr] = url;
        document[parent].appendChild(element);
      });
    };
  }

  return {
    css: _load('link'),
    js: _load('script'),
    img: _load('img')
  }
})();

// 用法:  用一个回调加载不同的文件类型
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!');
  });

load对象提供了js, css, 和 img函数,这些函数都可以接受一个URL并加载这个URL。每个函数都会返回一个Promise,资源标签的 onload 或 onerror 事件会触发对应promise的resolve 或 reject。Promise.all使这些资源集中加载,这些资源都加载成功会触发then,这些资源中有任何一个没有加载成功就会触发catch。

我要强调的是,这是一个非常非常简单的"loader";请不要评论为什么它没有其他加载器的花里胡哨的功能。 Promise API 使异步资源加载可管理,还有ServiceWorker API和fetch API,这些都是我喜欢的非常棒的API。帮自己一个忙来看看这些超级棒的API!

(责任编辑:好模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容