前言

需要原生Javascript + three.js的數(shù)據(jù)標注平臺加入Vue框架.

本來挺順利的, 我直接在mounted周期做了初始化, 然后剩下的操作還是交給JavaScript文件執(zhí)行, 最后發(fā)現(xiàn)里面有很明顯的事件觸發(fā)問題.

一、事件未綁定的原因

找了整一天也沒找著這事件為什么觸發(fā)不了, 在這中間還把代碼簡化掉只留下事件觸發(fā)邏輯執(zhí)行了好幾次.

第二天意識到原生代碼里的template可能有問題, 在原生環(huán)境中template標簽內(nèi)部的東西是不會渲染出來的, 雖然解析器在加載頁面的時候確實會處理這部分代碼片段.

取自MDN:

將模板視為一個可存儲在文檔中以便后續(xù)使用的內(nèi)容片段. 
雖然解析器在加載頁面時確實會處理 <template> 元素的內(nèi)容,
但這樣做只是為了確保這些內(nèi)容有效, 元素內(nèi)容不會被渲染.

但是放到vue里(這里特指Vue2), 如果template標簽在Vue實例綁定的元素內(nèi)部存在(即不是根元素外的那個template), 那么在DOM中該template的子元素是正常存在并顯示的, 我以前經(jīng)常拿template做v-for容器.

然后聯(lián)想前面幾次結(jié)構(gòu)簡化demo, 大概不是沒綁定而是綁錯了目標.

這個原生項目的HTML代碼很多, 所以作者做了一些優(yōu)化, 在需要某個模塊的時候才將其appendChild加入DOM, 其余的時候這些模塊都被放在template標簽內(nèi), 而vue把這些東西都出來渲染了, 那么初始化的時候事件大概率就已經(jīng)被綁到了template里面的那些代碼里, 等到這些模塊被appendChild的時候, 事件綁定已經(jīng)結(jié)束了, 所以appendChild是將沒有事件綁定的DOM加到了正確位置.

我在控制臺把視口里的DOM都刪掉之后發(fā)現(xiàn)下面還有一層被擠出去的DOM, 那是有事件綁定的DOM.

的確是這樣.

二、如何處理原生template標簽

我是想把他appendChild這個優(yōu)化留下來的, 我覺得在原生環(huán)境里能有這種封裝的思想挺好, 不過看起來不好辦…

我打算把原來那幾個模塊抽到組件里, 提前把組件寫到后面會插入到的位置, 然后用這種結(jié)構(gòu)控制顯示隱藏:

<template v-if="isShow">
  <aaa></aaa>
</template>

這樣挺好的其實, 如果這個項目的結(jié)構(gòu)再簡單一點我絕對會用組件方案的, 結(jié)果我發(fā)現(xiàn)我要傳回調(diào)函數(shù), 傳4層干擾到3個很重要的類, 只是為了在合適的時機回調(diào)改變組件的狀態(tài), 我覺得很糟糕.

而且, 如果后面會有…或者現(xiàn)在就有我沒有察覺到的需求是增加不定數(shù)量個這種模塊, 我把組件直接注冊到這里用就算是寫死了, 恐怕會不好改.

需要這種操作的組件有三個, 我想起來學后端渲染的時候給前端發(fā)的html模板, 那…能不能把這些html轉(zhuǎn)成字符串存到一個單獨的js文件, 然后在需要的地方導入后appendChild呢? 這樣對源代碼改動最小, 不用改appendChild, 也讓html文檔那邊更簡潔一些.

export const batchEditorToolsTemplate = `
  <div id="batch-editor-tools-wrapper" class="non-selectable">
	<div id="batch-editor-tools">
	  <div class="menu-button" id="exit">退出</div>
	  <div class="menu-button" id="prev">上一頁</div>
	  <div class="menu-button" id="next">下一頁</div>
	  <div class="menu-button" id="trajectory">軌跡</div>
	  <div class="menu-button" id="auto-annotate">自動</div>
	  <div class="menu-button" id="auto-annotate-translate-only">自動（無旋轉(zhuǎn)）</div>
	  <div class="menu-button" id="interpolate">插值</div>
	  <div class="menu-button" id="reload">重新加載</div>
	  <div class="menu-button" id="finalize">定稿</div>
	</div>
  </div>
`

然后用這個工具函數(shù)把appendChild替換掉:

function analyseDomStr(str, target) { // dom字符串, 目標元素
  const template = document.createElement('template');
  template.innerHTML = str;
  target.appendChild(template.content);
}

這樣性能不如之前好, 不過——事件綁定看起來沒什么問題了.

本來想用Document.createDocumentFragment()API的, 所以初版就寫成這樣了:

function analyseDomStr(str, target) { // dom字符串, 目標元素
  const fragment = document.createDocumentFragment();
  const template = document.createElement('template');
  template.innerHTML = str;
  fragment.appendChild(template.content); // 此處還是要按照原生template的那套來的, 這個template不會被vue特殊解析
  target.appendChild(fragment);
}

很遺憾并不能直接使用innerHTML向DocumentFragment內(nèi)寫入DOM, 仍舊需要appendChild來完成, 所以完全沒有必要創(chuàng)建DocumentFragment, 我認為這個API更加適合用于對頻繁DOM操作進行優(yōu)化, 比如用戶點擊按鈕后就要插入100條tips, 那就更適合先使用這個API生成一個文檔內(nèi)容分段, 然后把成品分段加入DOM.

這個初版和舊版也都是回流一次…

因為文檔片段存在于內(nèi)存中, 并不在 DOM 樹中, 所以將子元素插入到文檔片段時不會引起頁面回流(對元素位置和幾何上的計算).
因此, 使用文檔片段通常會帶來更好的性能.

完全可以把:

const ul = document.querySelector('ul');
const li = document.createElement('li');
for (let i = 0; i < 100; i++) {
  ul.appendChild('li');
}

這種會引起頁面頻繁回流的寫法

改成

const ul = document.querySelector('ul');
const li = document.createElement('li');
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  fragment.appendChild('li');
}
ul.appendChild(fragment);

這樣頁面只會在fragment被appendChild后回流一次.

到此這篇關(guān)于Vue中原生template標簽失效如何解決的文章就介紹到這了,更多相關(guān)Vue template標簽失效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論