歡迎光臨
每天分享高質量文章

自定義標簽在IE6-8的困境

作者:司徒正美

網址:http://www.cnblogs.com/rubylouvre/p/4659431.html

點擊“閱讀原文”可查看本文網頁版

或許未來前端組件化之路都是自定義標簽,但這東西早在20年前,JSTL已在搞了。現在Web Component還只有webkit支持。但一個組件庫,還需要一個特殊的標識它們是一塊的。不過這個XML已經幫我們搞定了,使用scopeName,如”

”。在我繼續往下想如何處理如何為這個標簽系結資料,與其他組件通信,管理生命周期,等等大事之前,我還有一個不得不面對的問題,就是如何兼容IE6-8!

比如以下一個頁面:

在chrome, firefox, IE11, IE11的IE6兼容樣式分別如下:

我們會發現IE6下實際是多出許多標簽,它是把閉標簽也變成一個獨立的元素節點

這個AA:DIV標簽被開膛破肚,裡面子節點全部暴出來,成為其兄弟節點了。因此想兼容它,就要費點勁。有個兩個情況需要考慮,1是用戶已經將它寫在頁面上,情況同上;2是用戶是將它放在字串模版中,這個用正則搞定。不過正則要是碰上複雜的屬性名,還是會暈掉。因此我還是打算使用原生的HTML parser。換言之,字串,我還是會將它變成節點。這麼辦呢?!我想了許多辦法,後來還是使用VML的命名空間法搞定!

我們將上面的頁面改複雜點,再看看效果!

可以看到其套嵌關係現在完全正確,並且標簽名不會大寫化,也不會生成多餘節點!

好了,我們再判定一下是否為自定義標簽,或者準確地說,這個節點是否我們組件庫中定義的自定義標簽。某些情況下,一個頁面可以存在多套組件庫,包括avalon的,ploymer的,或者是直接用Web Component寫的。

avalon的組件庫將使用命名空間,這樣就好區別開。在IE6-9中,判定element.scopeName是否為aa(這是組件庫的命名空間,你可以改個更高大上的名字),在其他瀏覽器判定此元素的localName是否以aa:開頭就行了!

function isWidget(el, uiName){

return el.scopeName ? el.scopeName === uiName: el.localName.indexOf(uiName+”:”) === 0

}

這個難題解決後,我們就可以開搞基於自定義標簽的UI庫了!

赞(0)

分享創造快樂