> 时尚
前端需要学到什么程度(前端需要掌握的)
导语：前端必须学习内容
前言
我们写程序的时候会经常遇到显示进度的需求，如加载进度、上传进度等。最常见的实现方式是通过记录 已完成数量(loadedCount) 和 总数量(totalCount)，然后算一下就能得到进度了。这种方式简单粗暴，容易实现，但不好扩展，必须有个地方维护所有 loadedCount 和 totalCount。本文将会基于上述实现方式，实现一种更容易扩展的进度管理方式。
问题
笔者在写 WebGL 应用，在应用预加载阶段需要计算加载进度。加载的内容包括：模型资源、贴图资源、脚本资源等。其中模型资源中又会包含材质资源，材质资源里面又会包含贴图资源。画图来表示的话就是如下的结构：
------------------------------------------------------------- | || resources || || ---------- ----------------- ----------------- || | script1 | | model1 | | model2 | || ---------- | | | | || | ------------- | | ------------- | || ---------- | |model1.json | | | |model2.json | | || | script2 | | ------------ | | ------------ | || ---------- | | | | || | ------------ | | ------------ | || ---------- | | material1 | | | | material1 | | || | texture1 | | | -------- | | | | -------- | | || ---------- | | |texture1| | | | | |texture1| | | || | | -------- | | | | -------- | | || ---------- | | -------- | | | | -------- | | || | texture2 | | | |texture2| | | | | |texture2| | | || ---------- | | -------- | | | | -------- | | || | ------------ | | ------------ | || | | | | || | ------------ | | ------------ | || | | material2 | | | | material2 | | || | ------------ | | ------------ | || ----------------- ----------------- || | ------------------------------------------------------------- 这里有个前提：当加载某个资源的时候，必须保证这个资源及它引用的资源全部加载完成后，才能算加载完成。基于这个前提，我们已经实现了一个 onProgress 接口，这个接口返回的进度是已经包含了子资源的加载进度的了。翻译成代码就是：
class Asset { load(onProgress) { return new Promise((resolve) =本文内容由小茜整理编辑！