「別濫用Class」——HTML語義化、前端三層分離理解

我的從事前端開發恰好2年(持續更新)，從HTML重構到如今JS腳本開發，雖不敢說頗有經驗，但對前端某些部分仍是有我的的獨特的看法，好比HTML經常使用屬性[class]：

[class]是HTML語言中定義節點元素樣式的屬性。顧名思義，這個屬性是爲設計元素外觀所用的，按照前端三層分離的原則，class是爲表現層服務的，可是不少前端開發者甚至專業的資深前端工程師把[class]寫到了邏輯層，他們常常使用$(.nodeClass)之類的類選擇器來獲取元素進行腳本開發。

這種方式我是不推薦的，由於class就是定義元素外觀的，不涉及腳本。把class裏面任同樣式刪去或者添加更多樣式是不該該影響腳本的。但上面的作法把css和js在耦合在一齊了，這樣就背離了前端三層分離原則。你能夠想一想，假如這樣作的話，我想更改元素的class命名，又要去到腳本衆多的js中同步更改相應的代碼，那這樣怎麼算得上前端三層分離呢？！

因此，我建議是，[class]屬性專門爲定義元素外觀服務的，js獲取元素最好使用id或name屬性——$("#nodeId"), $("[name=nodeName]")。打個比喻，把元素比做人來看的話，id其實是人的身份證/學號，name是我的姓名，class是我的衣服。你想一想，老師想叫你起來回答問題，他每次均可以叫你姓名name。不過若是你班不少人重名name的，他每次也能夠喊你身份證號/學號，但他就不可能天天說「那個穿藍衣服的」，由於你外觀是能夠天天都變的。See?

另外，這樣作的話，若是設計更改時，你直接替換class相應樣式便可，大多狀況下根本不須要擔憂這樣對js的影響！Right?

謝謝查閱！歡迎探討～