還記得在春招的時候亚隙，某面試官讓我手寫代碼，其中HTML部分我用了header碌更、section裕偿、footer等HTML5標(biāo)簽，寫完之后就發(fā)問了：為什么要用HTML5標(biāo)簽呀痛单？當(dāng)時我就回答了一個語義化嘿棘，然后就沒然后了。
現(xiàn)在想起真是羞愧旭绒。再看HTML5標(biāo)簽鸟妙，已經(jīng)不似當(dāng)年單純，就仿佛看山不像山挥吵，看水不像水一樣重父。
目前只要是前端團隊比較厲害一點的，項目里總是離不開三大框架的身影忽匈，不論是V房午、A還是R，都始終貫穿著一個組件化的思想丹允。而這個組件化的基礎(chǔ)郭厌，就是HTML5標(biāo)簽。
HTML5標(biāo)簽雕蔽，是組件折柠，卻更像是一種數(shù)據(jù)結(jié)構(gòu)，它其中的內(nèi)涵批狐，以及設(shè)計思想和規(guī)范上來說扇售，真是從眾多解決方案里脫胎而得到的。舉個例子嚣艇，如果瀏覽器不支持HTML5標(biāo)簽承冰，那就只能自己來造了，有一個庫html5shiv食零，短短幾百行代碼完美詮釋了HTML5的魅力困乒。就拿這個創(chuàng)建自定義元素的函數(shù)來說，創(chuàng)建了一個相應(yīng)的節(jié)點后慌洪，其實就等于創(chuàng)建了一個新的組件顶燕，或者說數(shù)據(jù)結(jié)構(gòu)。
/**
* returns a shived element for the given nodeName and document
* @memberOf html5
* @param {String} nodeName name of the element
* @param {Document} ownerDocument The context document.
* @returns {Object} The shived element.
*/
function createElement(nodeName, ownerDocument, data){
if (!ownerDocument) {
ownerDocument = document;
}
if(supportsUnknownElements){
return ownerDocument.createElement(nodeName);
}
data = data || getExpandoData(ownerDocument);
var node;
if (data.cache[nodeName]) {
node = data.cache[nodeName].cloneNode();
} else if (saveClones.test(nodeName)) {
node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
} else {
node = data.createElem(nodeName);
}
// Avoid adding some elements to fragments in IE < 9 because
// * Attributes like `name` or `type` cannot be set/changed once an element
// is inserted into a document/fragment
// * Link elements with `src` attributes that are inaccessible, as with
// a 403 response, will cause the tab/window to crash
// * Script elements appended to fragments will execute when their `src`
// or `text` property is set
return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
}
定義完之后冈爹，就是在這個新的標(biāo)簽元素里添加一些屬性涌攻、方法了。和大學(xué)時課程上定義一個數(shù)據(jù)結(jié)構(gòu)簡直有異曲同工之妙频伤。
