標籤:

怎麼覺得JS和CSS重疊的東西太多了?

之前看見大家都滿推薦那本JSDOM書的,看到最後感覺除了做動畫那章其餘的用CSS都能實現似得。看到現在也沒發現JS能做什麼特別的事。漸漸的有點沒興趣了


所謂 JS 實現和 CSS 實現改的不還是同一個東西么?區別只在於編程的介面不一樣,CSS 是一個聲明式的介面,JS 里操作 style 屬性/元素、CSSOM 是指令式的罷了。

不要給自己偷懶少學一點東西找借口好不好……


現代js已經是一門通用編程語言,理論上其他編程語言能幹的一切事情它都能幹。

只不過早期js主要用於瀏覽器編程,所以你看的這本老書里大部分都用js操作網頁。在js里調用的cssom(即操作css的api介面),理論上這屬於css部分,而不是js。

所以你看的書本來就只是主要講dom/css(包括cssom) 的。


瀏覽器解析了頁面代碼然後需要將其渲染成頁面,因此有一個渲染引擎。

如果你想做一個網頁,那麼就要通過代碼去描述這樣一個渲染規則讓瀏覽器的渲染引擎渲染出來 UI 的東西,最早其實是用 HTML 來做這件事情的,比如一段紅色文字:

&在網頁渲染一段紅色文本&

這樣的描述規則非常簡單、語義化,但是有個問題就是 UI 展現和內容混合在了一起,因此這種描述規則很難適應複雜的 UI 界面描述,而且非常難維護。比如頁面上出現了多段大紅色加粗字體,每一段你都要加上這些標籤,而且每次修改樣式的時候,你都需要把每一處都進行修改。

早期屏幕比較小,也不在乎什麼設計,只要有內容就好了。但是後來由於互聯網的發展,信息量變大,屏幕變大變清晰,頁面內容非常複雜,維護這樣的東西就變得十分蛋疼。為了解決這種問題,W3C 在後面的 xhtml、html5 等規範逐步廢除這些附帶樣式描述的標籤,專門創造了一種 DSL 來專門描述網頁的樣式,那就是 CSS。CSS 就是專門告訴瀏覽器渲染引擎要怎麼渲染的語法描述,比如把某一段帶有 error class 的 dom 變成紅色:

.error { color: red; }

這樣一個頁面上,只要 DOM 帶有 error class 那麼渲染引擎就把這段樣式附加到內容上面渲染出來。

樣式和內容分離帶來了巨大的效率提升,比如某些頁面使用橙色來描述 error 報錯信息,它只需要把這個 CSS 的 color 值換成 orange 即可,不需要去改動內容的東西。

美觀的靜態網頁又支撐了幾年互聯網的發展,但是新技術的產生(Ajax 等)讓頁面承載更多交互功能變成了可能,可以通過 JS 來控制頁面某個模塊的展示和消失以及位置等,這些交互效果底層的實現其實還是 JS 通知渲染引擎去做的,為此渲染引擎為 JS 擴展了一系列操作它的 api,比如把 class 為 error 的第一個 DOM 的顏色變成紅色:

let errors = document.getElementsByClassName("error");
errors[0].style.color = "red";

====

回到你的問題,你覺得 CSS 和 JS 重疊的部分太多了。其實不然,不要把 CSS 理所當然的想成 UI 本身,CSS 只是描述 UI 的專用手段,你用 HTML、JS 仍然可以描述,只是不那麼高效和好用。CSS 可以輕鬆的完成簡單動畫,而 JS 卻需要大量計算位置等,是因為對於 CSS 來說大量的計算不需要你來寫了而是瀏覽器內部實現了,(你懂得原因)同樣動畫 CSS 比 JS 實現渲染性能要好。

其實 CSS 早期也有 CSS 表達式 這種技術期望能實現部分 JS 的效果,不過幸好還是分離開廢除了。JS 更專註的是功能交互邏輯,但具體的頁面效果反饋還是需要操作渲染引擎實現,除了直接操作之外,更常用的是換一個 class 讓渲染引擎重新讀取對應的 CSS 來重繪頁面。

所以 JS 的 DOM 只是 JS 的一部分 API 而已,並不是全部,還有很多東西需要你繼續去探索。


其實除了動畫其他的基本上都不能用css實現………


你用css給我後端發送一條數據過來。


學而不思則罔,思而不學則殆


「沒發現JS能做什麼特別的事」,JSer們會哭暈在廁所的……

JS的可能性無極限,而CSS的作用非常狹小。當然,如果你只是滿足於實現一些很普通的靜態頁面,就當我什麼都沒說。

借用另一個答案中的話:懶惰不要緊,但不要給自己找借口!


JS的東西現在可多了,隱隱有Web端C++的趨勢,各種工程工具層出不窮,伺服器斷全面開花,瀏覽器端應有盡有,CSS不過能實現動畫,連復用都只能通過方言來實現。火熱得一塌糊塗的React還有Native,雖然比原生的差多了,微信都要開發出小程序的功能來試驗JS的威力。從前是沒有Python不能做的,雖然慢了點,現在是沒有JS不能做的,還是高效的。


js上天入地嘛都能幹 很多類繼承程序員搞不懂的

css局限啊


這種問題連反駁的慾望都沒有。。。


真可怕。。你知道的太少了兄弟,學之前先了解了解比較好。。


因吹斯汀。JavaScript 居然敗給了一個不能聲明變數、if else邏輯都處理不了的語言u.u


此類書純粹是教讀者炫技、裝13的,往深處去想你就入歧途了。


你為什麼只看js的dom部分呢,這只是js裡面的一小部分。。。而且css的重點在於渲染,js的重點在於交互。。。火車和自行車都是車。。


有重疊的嘛?


推薦閱讀:

盒模型的哪種寬高定義更符合人類直覺?
面對變化莫測的 CSS,我該怎麼辦?
CSS:line-height:150%與line-height:1.5的真正區別是什麼?
body上加上overflow:hidden為什麼沒形成BFC阻止body下移?
margin-right值的計算疑惑?

TAG:CSS | JavaScript |