目前來看,團隊內(nèi)部前端項目已全面實施組件化開發(fā)。組件化的好處太多,如:按需加載、可復(fù)用、易維護、可擴展、少挖坑、不改組件代碼直接切成服務(wù)器端渲染(如Nuclear組件化可以做到,大家叫同構(gòu))...
怎么做到這么強大的優(yōu)勢,來回憶下以前見過的坑,或者現(xiàn)有項目里的坑。

CSS層疊樣式?保佑不要污染別的HTML!

在web前端,一般一個組件必須要有骨架HTML和裝飾的CSS以及JS邏輯。而CSS要是可以是局部作用域那就再好不過了!就不用寫長長的前綴了,浪費帶寬不說,而且費勁。

.ui-popup-arrow-xx-xxxxx-xxxx-container { }

這回夠長了吧,不會污染別的HTML了吧。真的太長了,沒有辦法,因為CSS不是局部的,怕污染其他的HTML,規(guī)劃好長長的namespace、module是以前的最佳實踐。

怎么優(yōu)雅綁定事件?只能定義在window下?

如果HTML綁定的事件是局部作用域那就再好不過了!我真的見過模版代碼里出現(xiàn)下面的代碼:

<div onclick="xxx()"></div>

然后在js里找到了下面的代碼: