Promise
所謂Promise，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果。從語法上說，Promise 是一個物件，從它可以獲取非同步操作的訊息。Promise 提供統一的 API，各種非同步操作都可以用同樣的方法進行處理。 —— ECMAScript 6 入門 阮一峰
場景
最近正在做的一個專案,包含"前臺"與"後臺"， 前臺是對資料的展示，後臺是對使用者等相關許可權的管理，大到頁面級別的許可權，小到資料介面與選單許可權。整體是基於Oauth2.0做的一整套許可權系統。
使用者登入成功後,返回許可權列表，一級許可權包含當前使用者可以訪問到的子選單:如下圖：
管理員許可權下，7個子系統圖示會全部返回,實際情況返回多少選單取決於當前使用者許可權。例如普通使用者只能看到檢視兩個子系統，因為是動態可配置的，考慮到後期可能會增加子系統，所以子系統路由、名稱、以及影象全部都來源於後臺，通過後臺管理進行配置。
按照正常的思路,後臺獲取選單資訊，然後迴圈渲染：
//Home.vue
data() {
return: {
list:[]
}
},
mounted() {
this.GetMenuList();
},
methods:{
GetMenuList() {
...
this.list = res.result //後臺獲取選單列表
}
}
複製程式碼<div class='container'>
<div class="col_item" v-for="(item,index) in list" :key="index">
<div class="content_img">
<img :src="item.src" alt class="img_item"
@click="routerLink(item.url)"
>
</div>
<div class="content_title">{{ item.descritpion }}</div>
</div>
</div
複製程式碼正常的公司網速下,頁面載入效果如下圖：
因為是動態獲取子系統圖示，並且頁面響應式，也就是任何螢幕都會一屏顯示,所以未知影象的width，height，寬高會自動計算。
谷歌開發工具調製3G網速下,仔細看：
為了模擬網速慢的情況，使用谷歌瀏覽器network設定了3G網速，可以看到頁面載入時，背景的container是一個最小高度(動態計算),當圖片載入成功並且迴圈顯示後,塊的高度撐搞,並且圖片也是從0高度到實際高度，在弱網路情況下，體驗一般。
考慮過通過固定寬高來解決，但是用不能滿足響應式的一螢幕顯示。
問題原因
因為template迴圈裡，動態賦值圖片src，所以此時的邏輯是先請求所有的資料列表(其中包含影象src欄位),然後動態繫結:src,然後圖片根據src才能載入，也就造成了弱網下的“延遲”問題。
根據原因分析，container容器預先寫在template標籤裡,高度由影象撐開，container內部迴圈完成後,基本的骨架已經渲染完成,然後影象載入完成，container被撐高。
因此,如果先載入完成全部圖片，再進行渲染是不是可以解決？
制定方案：
- 1.通過image物件，用程式碼初始化load所有影象。
- 2.通過appedChild一次性將內容插入container容器內
1.利用Promise,非同步載入影象
修改程式碼如下：
//Home.vue
<script>
export default {
data () {
return {
list: [], //存放後臺返回的資料
}
},
mounted() {
this.GetMenuList();
},
methods:{
GetMenuList() {
...
this.list = res.result //後臺獲取選單列表,不負責渲染，只儲存資料
this.loadImages();
},
//影象載入方法
loadItemImage(img) {
return new Promise(resolve => {
const image = new Image();//通過new Image物件 載入影象，本質是一個object
image.src = img.imgUrl; //指定src
image.url = img.url; //自定義新增一些欄位暴漏到外部
image.id = img.id; //自定義新增一些欄位暴漏到外部
image.name = img.name;
image.descritpion = img.descritpion; //自定義新增一些欄位暴漏到外部
image.onload = () => resolve(image); //載入影象
image.onerror = () => resolve(image);
image.onclick = () => { //新增跳轉點選事件
this.routerLink(img.url, img.name, img.id);//跳轉函式
};
image.className = "home_container_img_item"; //新增class屬性
});
},
//影象處理函式
loadImages() {
Promise.all(
this.list.map(img => {
return this.loadItemImage(img);
})
).then(imgs => {
//imgs是list.map後生成的新陣列，其中包含了n個image物件
//得到已經載入完成的image陣列，準備append到container容器
});
}
}
}
</script>
複製程式碼解讀程式碼：首先後臺返回資料後呼叫loadImages，對list進行map操作,每一項執行loadItemImage方法。
loadItemImage方法:return 了一個Promise例項,例項內部通過程式碼new Image，建立了一個image例項,其中src、onclick、onload、className是image原型上的屬性和事件,因為實際需要點選影象跳轉,所以在image上新增了一些自定義屬性,供跳轉使用。當影象load成功後resolve。迴圈操作後,map返回一個由image物件組成的新陣列：
Promise.all當所有的影象載入完成後,準備進行append到container節點。
如何append？
參考了vue的思想,通過虛擬Dom操作對映到真實的Dom下,避免直接迴圈append操作dom,資料驅動檢視：
新建virtualDom.js
//宣告Dom類,用工廠方法進行封裝：
class Dom {
constructor(tags, attribute, children, event) {
this.tags = tags; // html標籤欄位,div p input..
this.attribute = attribute; //class style 等html屬性
this.children = children; //子節點陣列
this.event = event; //事件物件
}
};
// 建立虛擬DOM，返回虛擬節點(object)
export function createElement(tags, attribute, children, event = {}) {
return new DOM(tags, attribute, children, event);
//少數dom元素可能存在事件，如點選事件等,應對多數情況,設定event預設值｛｝
}
複製程式碼新建render.js :
// render方法虛擬DOM對映到真實DOM
export function render(dom) {
// 根據標籤建立元素
let el = document.createElement(dom.tags);
// 遍歷新增屬性
for (let key in dom.attribute) {
// 設定屬性的方法
setAttr(el, key, dom.attribute[key]);
}
//新增事件
for (let key in dom.event) {
// 新增事件的方法
AddEvent(el, key, dom.event[key]);
}
//針對於與大多數情況做了判斷,本專案的上下文環境中有三種情況
dom.children.forEach(child => {
if (child instanceof Dom) //如果子節點是Dom類，那麼就繼續向下遞迴
child = render(child)
else if (typeof child == 'string') //如果是文字那麼就是文字節點
child = document.createTextNode(child);
else
child = child; //其他html元素,本專案中是<img>元素
// 新增到對應元素內
el.appendChild(child); //插入元素
});
return el;
}
// 設定屬性
export function setAttr(node, key, value) {
switch (key) {
case 'value':
// node是一個input或者textarea就直接設定其value即可
if (node.tagName.toLowerCase() === 'input' ||
node.tagName.toLowerCase() === 'textarea') {
node.value = value;
} else {
node.setAttribute(key, value);
}
break;
case 'style':
// 直接賦值行內樣式
node.style.cssText = value;
break;
default:
node.setAttribute(key, value);
break;
}
}
//新增事件
function AddEvent(el, key, funcEvent) {
switch (key) {
case 'click': //單擊
el.onclick = funcEvent;
break;
case 'dbClick':
//..
break;
//...根據情況新增
}
}
// 將元素插入到頁面內
export function renderDom(el, target) {
target.appendChild(el);
}
複製程式碼準備對映虛擬dom:
對映: Object to dom.
或者說是： js to html.
本專案中的dom結果是這樣的：
接著上面的程式碼
//Home.vue
import { createElement} from "common/utils/virtualDom.js";
import { render, renderDom} from "common/utils/render.js";
...
//影象處理函式
loadImages() {
Promise.all(
this.list.map(img => {
return this.loadItemImage(img);
})
).then(imgs => { //imgs是list.map後生成的新陣列，其中包含了n個image物件
//得到已經載入完成的image陣列，準備append到container容器
let element = []
for(let img of imgs) {
element.push(createElement('div', {class: 'home_container_col_item'},
[ //建立div,子元素img就是每一個img物件
createElement('div',{class: 'home_container_content_img'},[img]),
createElement(//建立文字字,新增點選事件
'div',
{class:'home_container_content_title'},
[img.descritpion],
{click:()=>{this.routerLink(img.url, img.name, img.id)}}),
]
))
}
//createElement的四個引數依次寫入
//上邊的樹就是下面這種結構
// {
// tags: "div",
// attribute: {
// class: "home_container_col_item"
// },
// children: [
// {
// tags: "div",
// attribute: {
// class: "home_container_content_img"
// },
// children: [image]
// },
// {
// tags: "div",
// attribute: {
// class: "home_container_content_title"
// },
// children: ['xxx子系統']
// },
// ]
// };
//然後迴圈push到陣列裡。
//...接上
//container
let virtualDom = createElement(
"div",
{ class: "home_container_menu_row" },
element
);
let el = render(virtualDom); // 渲染虛擬DOM得到真實的DOM結構
renderDom(el, document.getElementById("home_container_center"));//掛載dom
});
}
複製程式碼上面的dom結構只是一個例子，實際情況要根據自己的結構編寫。
看實際專案效果：
選單動態獲取,container並沒有高度被撐開的情況,頁面載入，container為空,後臺返回資料後,container呈現。
參考文章：