整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
作者 | 張旭乾 責編 | 夢依丹
出品 | CSDN(id:csdnnews)
前端和后端開發，哪一個更容易上手？我們時常會在各大技術論壇看到類似的提問。話說興趣是最好的老師，不實踐，你可能很難知道自己更喜歡哪一個？
從Java開發再到前端工程師，他在轉型路上遇到過哪些困難？本文作者張旭乾分享了他的轉型經歷，以及他在學習前端開發過程中，遇到的問題和總結出來的一些經驗，希望對你有所啟發。
在 2008 年的時候，我進入大專學習 Java 開發，HTML 和 CSS 只是專業的附屬品。那時，主要還是前后端一體化開發，HTML 和 CSS 只是為了結合 Java 里的 Servlet 生成頁面。JavaScript 則完全沒有講。
2010 年快畢業的時候，我參加了五個月的 Java EE 培訓，在這期間了解了 HTML、CSS，以及一部分簡單的 JavaScript DOM 操作和 jQuery，能夠編寫一些帶交互的頁面和 Ajax 異步請求。
在這期間，我沒有太重視 HTML/CSS/JS 基礎。因為本身剛入門，并不知道哪些重要，哪些不重要。在做項目的時候，頁面部分要自己在網上搜索 HTML 標簽和 CSS 屬性的用法。對于 JS 部分，則只會 jQuery，高級的語法（例如閉包、原型鏈）完全沒有概念，只知道該怎么定義變量，處理事件，做一些基本的邏輯處理。
我的第一份工作是 Java 開發，當時公司用的技術很新潮，算是前后端分離的雛形。頁面部分完全使用了 ExtJS 庫，它提供了一組現成的 UI 組件，所有的數據都是通過 Ajax 來從后端獲取，后端則用 Java 的 Servlet 提供JSON 數據。
這份工作的主要難點是一開始不了解前后端分離的開發模式。由于是第一次嘗試完全在客戶端 JS 去請求數據，所以理解起來需要一點時間，當時閱讀了 ExtJS 相關的文檔，才大體的了解到這種開發模式。基本上是利用 Ajax 請求數據，然后通過它內置的 API 來填充 UI。后面隨著開發的功能變多，對這種模式也適應了。
努力學習還是有回報的，過了三個月試用期之后，因為工作比較出色，在拿到正式員工薪資的基礎上，又額外加薪了 10%。所以剛進入公司的時候不要怕上不了手，主流的技術遇到不會的地方要善于自行查找資料解決，對于公司內部的技術要勇于向前輩請教。
2010 年底從第一家公司離職，回到家里自己充電，學習了 PHP。因為當時建站非常流行，學了 PHP 既可以做個人站長，也可以通過自由職業，為客戶建站來賺取收入。因為部署網站的主機基本上都支持 PHP 和 ASP，而 PHP 更加流行，所以我就自學了 PHP，通過官方文檔，加上實戰并結合搜索引擎搜索問題來學習。學完了之后就在網上發了個廣告，提供個人建站服務，此時的我還是全棧開發。
2011 年底左右，廣告發完了我就忘了，沒把它太當回事。大年初六突然收到一個客戶的電話，需要做一個網站，這讓我興奮不已。我給這位客戶一共做了兩個網站：
一個是論壇，直接二次開發的，修改了一下樣式。
一個是質量保證查詢系統，從零使用 PHP + MySQL + jQuery + jQuery UI 進行開發。
真正有挑戰的是第 2 個項目，頁面部分幾乎遇到了前端開發中全部常見的難題：
JS 代碼管理
當時 UI 部分選擇了和 jQuery 配套的 jQuery UI。jQuery UI 封裝了一組常見的 UI 組件，例如拖拽、對話框、按鈕等組件，可以少寫一些邏輯代碼。盡管如此，編寫出來的 JavaScript 文件還是亂七八糟，因為頁面上有很多表格組件，需要在獲取數據后，手動去循環展示表格，并在刪除或修改的時候，還要修改 DOM 更新表格；另外還有其它邏輯，例如登錄、查詢等。
雖然代碼分散在了不同的 JS 里，但是有的頁面因為業務邏輯比較復雜，加上當時我也不太了解 JS 的復用方式和邏輯，導致了很多重復的代碼。我還有當時的源代碼，可以感受一下代碼的長度（兩張圖片為同一 JS 文件的不同部分，這里通過縮略圖展示）：
一個 JS 文件中的代碼
兼容性調整
彼時，瀏覽器主流的還是 IE，所以還是需要做一些兼容性調整。不過好在 jQuery 主打的就是兼容全部瀏覽器，所以 JS 方面沒有太大問題，剩下的就是 CSS。這個項目在 IE、Chrome、火狐下顯示的都不一致，后來查了一下，解決方法可以根據瀏覽器特定的語法，編寫只在特定瀏覽器能識別的 CSS 屬性，或者選擇器，也就是所謂的 CSS hacks。另外也可以使用瀏覽器特殊的 HTML 指令，加載不同的 CSS 文件，最終把頁面調成一致就可以了。
性能調優
因為項目頁面部分處理數據比較多，加上開發經驗有限，當時也只是在代碼效率上進行了優化，例如減少不必要的循環操作等。
與客戶溝通需求
這個是開發的軟技能了，學會如何拒絕不合理的需求。因為當時我是第一次面對客戶，也沒有自信，所以客戶說改什么，我立刻就開始給他改。這期間客戶最常見的話術就是：“這個功能很簡單，你做一下”，或者“這個問題很容易解決，花不了你幾分鐘”。當時我真覺得功能或者問題挺簡單的，但是實際操作起來，發現要比想象的難多了。做了幾次之后，知道無論多簡單的功能或問題，都會涉及很多的細節，所以后面客戶再提要求的時候，我就把這些細節先說清楚，給他一個大概的完工時間，再加上新增的功能需要額外收費，客戶就會自己斟酌要不要做了。
網頁設計水平
還有一個意外，讓我學了一部分設計知識。在給這個客戶做質量保證系統的時候，還要求附帶一個產品的官網，客戶給我發了產品資料之后，我參考網上同品類的網站，幫他設計了一版，但是客戶以不夠大氣為由，讓我重新設計，我又設計了一次，客戶還是覺得不夠好，反復幾次，似乎無法滿足他的需求，他就把官網這部分給別人做了。當時我也有點憋氣，于是買了本《寫給大家看的設計書》，專門學習了一些設計原則，努力提高自己的設計能力。后來等客戶的官網上線之后，發現設計的也一般，大概是審美不同吧。
在自由職業后半段時間學習了其它的框架，那個時候 Bootstrap 3、Foundation 之類的 HTML/CSS 框架開始爆火，因為十分喜歡學習新的技術，我就去看了看它們的介紹，看到 Bootstrap 3 內置了很多組件，并且不怎么需要寫 CSS，就學了一下 Bootstrap 3。Bootstrap 3 內部使用了 LESS 這個 CSS 預編譯工具來生成 CSS，如果要自定義它的樣式，還需要會 LESS。我就又看了一下 LESS 的文檔，發現它提供了很多實用的功能，例如變量、繼承、嵌套等，感覺很有意思也順便學了。
從這里你就可以知道：前端庫是互相依賴的。如果直接看前端需要哪些庫，那么零零散散的有一堆，但是當你真的開始下手學習一個框架的時候，你會發現好多框架可以從一條線里牽出來，構成一個完整的開發工具庫，這些自然就都掌握了。
前邊所有的經歷，奠定了我轉型前端所需要的技術基礎。而在從事自由職業期間，我發現我還是喜歡看做得見的項目，從 0 設計界面，直至實現出來，很有成就感，并且我也享受在設計過程中，靈感迸發的快樂，心底就有了想轉前端的火苗。不過第 2 份工作，從 2013 年到 2016 年，我仍然做的是 Java 開發。
真正讓我對前端產生興趣，是 2016 年去留學之后。在 2017 年第一個學期，有同學問我 React 的問題，我不太會，于是就上網幫同學查，查著查著，就發現前端已經獨立作為一個職業了，再接著從 React 文檔找問題的解決方案時，發現之前我用 jQuery 的問題在 React 中全部都解決了，可以不用手動維護數據和 UI 之間的同步了，這讓我感到很欣慰，發誓等這學期放暑假，就深入學習一下。
很快，暑假就到了，要兌現承諾開始學前端。當時室友學了高級 Web 編程，主要講的是 React，React 在那個時候還非常難用，應該還是 React 15，需要手動配置好多東西：Babel、Bower.js 之類的。看著室友遇到一個組件顯示不出來，經過一天的搜索解決方案，才發現是組件名大小寫不一致導致的，這個讓我有點對 React 好感度降低，不想學了。
后來我就研究了一下 Vue，發現普遍的說法是：功能和 React 類似，但是國內用 Vue 的多，國外用 React 的多。看了下 Vue 是華人尤雨溪開發的，很佩服，據說上手比較容易，于是就決定先看看 Vue?
在把 Vue 官方文檔基礎部分看完之后，結合 YouTube 的一些視頻所教授的開發方法，大概一周的時間，覺得可以上手了，就想了一下練習項目。當時了解到 Vue 適合開發單頁應用，看了一下單頁應用的特點，發現似乎就是網頁版 App 的概念? 于是，我就想著把當時我用的最多的網易云音樂模仿一下。花了一周多的時間，實現了首頁 UI、添加歌曲，播放、暫停、快進、快退等功能，期間學會了 CSS flex 布局。
使用 Vue 仿網易云音樂（左）的最終界面（右）
后來發現網頁版的功能局限性比較大，想著能不能做成桌面端的。當時室友在學校的課里學 Electron，一個跨平臺的桌面開發框架，只用編寫 HTML? CSS 和 JavaScript ，就可以生成在 Mac、Windows、Linux 操作系統都能運行的應用。于是我又把應用遷到了 Electron 上面。
從 Electron 這里也了解到了，Node.js 到底和瀏覽器 JS 運行時到底有什么不同：在 Node.js 的環境下，可以訪問更底層的操作系統級 API，例如訪問本地文件，這樣可以方便用戶自行添加音樂。
做這個項目的時候，也遇到了很多問題：
不知道什么時候需要定義成組件。剛剛接受這種組件化開發的方式之后，最大的難題就是怎么才知道該不該把一部分 UI 定義成組件。當時的思路就是，我先把所有的頁面代碼都寫在入口組件里，后面再根據頁面的布局，把這個組件拆分成各個部分，例如側邊欄、播放列表、播放控制器等，這樣的分法似乎很合乎邏輯，不過這也帶來了一個問題。
組件和數據雜糅到了一起。項目當時使用了 Vuex，應用的數據全部交給了它去管理，對于項目的功能邏輯，都是直接在相關的 UI 中實現的，并綁定了 vuex 的數據。例如播放進度條，它和歌曲的播放時間數據綁定了，后面要實現音量進度條的時候，發現這個組件無法復用。因此，我又把 UI 和數據分離了出來，這樣的組件，可以在各處復用，之后再實現對應的邏輯就好了。
CSS Flex 布局遇到坑。這個項目使用了當時開始流行的 CSS Flex 布局，本著學習的態度使用它，遇到了很多問題，例如父容器對 flex 縮放的影響，如何讓 flex 元素占滿容器，又或是如何讓 flex 不占滿容器等等，這些在看了 MDN 文檔的介紹，了解了 flex、align-items 和 justify-content 各個屬性值的作用和含義之后，就清楚了元素的縮放邏輯。
通過這個小項目的開發，對 VUE 算是入門了，還得出了結論：
學前端，或者任何編程知識，一定要結合實踐才能快速入門并掌握它們。
學完 Vue 之后暑假差不多也快結束了，最后一個學期都在努力學專業課，沒有再看前端相關的東西。2018 年回國之后，開始找工作。因為留學的主要方向是分布式和云計算，所以我還是想以 Java 開發為主。面試的時候遭到了很多不屑，大多是看我剛研究生畢業，而以前的開發經歷也沒什么出彩的地方，就都草草了事了。這些經歷讓我很受打擊，但是讓我清楚的知道了，縱使有一肚子墨水，但是拿不出實際的產品，或者滿足不了面試官的喜好，就不可能面試成功。
當然我不會否定自己，最后一次面試失敗之后，突然就想要不要改行做一下前端，畢竟留學的時候鉆研了不少，又在自由職業的時候做過一些產品，更是有濃厚的興趣，于是我立刻下了決心轉前端。
下定決心之后，我一刻也沒閑著，開始看前端的工作要求。在某招聘 App 上搜了一圈，發現 React 在大廠用的多、工資也高一點，我就又開始自學 React，花了一周看了看官方文檔，寫了一個特別小的、只有一個頁面的小例子，之后就開始投簡歷了。期間還看了看 React Router、Redux，以及 ES6 的新特性。
在閱讀 React 官方文檔的時候，發現有一節是《Thinking in React》，里邊詳細的介紹了 React 組件化開發的步驟，并且解釋了什么時候需要定義組件，文檔提供了一個表格 UI 作為示例，把它拆解成了表格整體、搜索框、表格內容、類別行和產品行組件，說明了為什么這么拆解，有沒有其它拆解的方法，以及拆解過程的方案折中，建議看一看。
圖片來源：https://reactjs.org/docs/thinking-in-react.html
覺得準備的差不多了之后，就開始投簡歷了，大約 1 個月的時間，收到 3 家面試，只通過了 1 家。沒過的那兩家同樣也是見我剛畢業，連前端開發經驗都沒有，就草草了事了。通過的這家，面試官是我工作時的技術總監和組長，在面試的時候沒有刻意刁難，只是問了些框架方面的基礎問題，還問了一下我平時是怎么解決問題的。后來，我在工作的時候，問他們為何決定讓我入職，他們告訴我，看中了我的學習能力。
所以面試如果沒經驗的話，就努力說明自己的學習能力，總會有面試官欣賞你的。我到現在還非常感謝兩位，讓我正式進入了前端開發的行列。
進了公司就開始了日常做項目，大大小小一共做了 3 個，這期間經歷了邏輯混亂期、嘗到甜頭期和精進技術期，積累了大量的開發經驗。
第 1 個項目，是改造一個傳統的項目，按技術總監的建議，使用 React + dva.js 框架。UI 方面，項目之前用的是 Bootstrap，我用了 React Bootstrap 把項目遷移了過來。
這個項目里遇到的問題是：代碼混亂。這個時期因為剛剛上手 React 開發，對于代碼的管理也沒有太大的概念，加上 dva.js 的項目結構也不同于普通的 React 項目，所以這個項目開發起來有點麻煩，再加上項目的邏輯比較多，導致組件的代碼很長很長，復用起來也很困難（俗稱面條式代碼），不過因為這個項目也不是完全對外公開的，并且使用頻率較低，所以就沒在優化。
第 2 個項目，是做一個公司內部用的運營管理后臺，時間大約是 2018 年底，當時 React alpha 測試版出了 hooks。看了一下官方文檔，感覺很神奇，能夠清晰地分離組件 UI 和邏輯，應該能給代碼管理提供不小的幫助。雖然是測試版，但這個項目是完全對內的后臺項目，所以果斷的用上了。
這個項目的后端比較特殊，一位大佬同事搭建了 GraphQL 服務，之前在留學的時候就已經聽同學提到過很多遍了，現在有機會體驗體驗了。在看 GraphQL 官方文檔學習、以及使用搜素引擎搜索的時候發現，使用 GraphQL 后可以不用 Redux，于是這個項目我只用了 React? React Router 和 Apollo-GraphQL 這幾個主要的庫。
這套技術加上 React hooks，讓我真正感受到了前端開發的樂趣。組件從類的形式轉換成了函數形式，代碼量減少了很多，公共的邏輯也能抽離成 Hooks，在各個組件使用，組件自身的邏輯也能抽離成 hooks，來讓功能和 UI 展示代碼分開，讓代碼更易讀。這樣，整體的開發效率提高了不少。
UI 方面則嘗試了 Ant Design，因為純后臺的，沒有設計稿，只有產品原型。
另外這個項目是基于 Create-React-App 腳手架創建，了解到腳手架提供的功能非常全面，像靜態資源（圖片、字體）管理、插件、打包構建等都包括了，省了很多手工配置。
第 3 個項目，是一個從 0 開始、面向客戶的應用，UI 是由設計師專門設計，有很多自定義的樣式。這是我積累最多前端開發經驗的項目，從技術選型，到組件規劃，再到代碼復用，對前端開發的架構有了全新的認識。
為了研究怎么在 React 項目中管理樣式最方便，我開始研究大型項目中的 CSS 樣式管理，了解到有普通 CSS 和 CSS-in-JS 兩種方案之后，再查資料發現 CSS-in-JS 方案更靈活，能夠在 CSS 里訪問 JS 變量，讓組件樣式可以隨著組件狀態的變化而變化。
決定用 CSS-in-JS 方案之后，我找到了 GitHub Star 數比較高的 styled-components 庫，它支持 CSS 嵌套、主題等功能，并且能夠訪問組件的屬性，而且它定義的樣式，本身也是一個 React 組件，可以直接在 JSX 中使用。
UI 庫繼續使用了 Ant Design，不過也就是利用一下它的組件功能邏輯，樣式幾乎全部都修改了。
項目后端這次沒有用 GraphQL，我又發現不用 GraphQL 也沒必要使用 Redux，所以就沒有再添加 Redux，結果也證明我的選擇是對的：項目本身沒太多全局狀態，舍棄 Redux 大概讓開發效率提升了 1 倍，之前像表單這樣的組件大概需要一天才能完成，現在只需要半天。不過項目里有個內嵌的聊天系統，需要用一點全局狀態，我就從網上查找了一些解決方案，發現使用 React Context + useReducer Hooks 的方式實現全局狀態管理就夠了。
這個項目使用的新框架都是一邊看官方文檔一邊學習的，有不好解決的問題，就結合搜索引擎和 GitHub Issues 解決。
對于項目的結構，這次使用了就近原則來組織代碼，每個組件放到單獨的文件夾中，組件相關的 styles、圖片、hooks 等都放在同一個文件夾，對于公用的部分，則放到項目頂級的 src 目錄下。API 和其它庫的配置項也都放到單獨的文件夾里，同樣遵循就近原則，這樣管理項目就方便多了。
這個項目的圖表也比較多，為了和 App 端保持一致，選擇了 Echarts。在使用 Echarts 的時候，雖然能夠實現大部分設計稿中的樣式，但是還是有小部分不能精準還原，在拿著實際效果跟設計師溝通之后，有些樣式就做了些調整，或直接舍棄了。
項目最后驗收的時候，還需要跟 UI 設計師核對樣式，這期間我和設計師找了單獨的工位，每天都是在溝通哪里的設計需要修改，哪里的設計不好實現，怎樣取一個大家都滿意的折中方案。這些在了解設計基礎原則之后，你也會明白設計師設計的意圖和用意，這樣用理解的心態來溝通，再輔以技術上的難度展示和時間需求，就能夠更好的避免不必要的 UI 改動和代碼重構。
先看一下前端工程師需要掌握哪些技能。
綜合大、中、小企業的前端工程師技能需求，實際上前端工程師的職能包含以下職業中的 1 種或多種：
網頁開發工程師
網頁設計師（UI）
用戶體驗工程師（UE）
最重要的職能是網頁開發，包括小程序、APP 等跨端應用界面的開發，雖然它們實現的技術不同，但本質上還是做頁面。
前端工程師必備的技能有：
使用 HTML + CSS，精準地還原設計稿，制作符合要求的頁面。
使用 JavaScript 給頁面添加交互，懂得 DOM 操作和 Ajax 請求。
掌握 React 或 Vue 等主流框架的一種或幾種，并了解隨著這些框架的工程化，所牽涉的一系列工具（不同工程需要不同的工具，這里列出常見的）， 例如：
Node.js 與 npm。
Webpack、SnowPack、Vite 等打包工具。
Create React App、Vue CLI、Vite 等腳手架。（Vite 既包含腳手架，也包含打包工具）
Gulp、Grunt 等自動化工具。
SASS/LESS 等 CSS 預編譯工具。
styled-components、emotion 等 CSS-In-JS 庫。
ESLint 語法檢查工具。
Jest、mocha 等測試庫。
兼容性調整，利用 CSS hacks，或 JS Polyfill，實現跨瀏覽器頁面表現一致。
性能優化，減少文件體積，減少請求次數，延遲加載圖片和腳本等。
SEO 搜索引擎優化，提高網站在搜索引擎的排名。
其他的一些框架或技能，如果工作要求，也需要掌握：
SSR 服務端渲染框架，例如 Next.js（React）、Remix.js （React）、Nuxt.js（Vue）。
SSG 靜態網站生成器，例如 Next.js、Gatsby、VuePress 等。
TypeScript。
GraphQL。
PS/Sketch/Figma，能根據需要進行切圖，或者自行設計頁面。
下面這些技能不是必須的，但是如果能掌握，可以提高工作效率、跟后端或設計師溝通的能力，以提升求職升職的競爭力：
網頁設計，了解設計基本原則。
用戶體驗設計，了解網頁的動效、輔助功能對用戶體驗的影響。輔助功能（可訪問性）在國外比較重視，目的是方便有閱讀障礙的人士，使用屏幕閱讀器進行網站瀏覽。如果你想去外企，這些技能是必須要掌握的。
Docker，了解如何把前端項目構建為 docker image，會編寫簡單的 docker file。
后端語言、框架、數據庫，任選一套，例如 Java + Spring + PostgreSQL，Express + Node.js + MongoDB 等，了解 RESTful API 開發過程。
乍一看要掌握的有很多，但很多庫都是隨著 React、Vue 等最重要的前端庫自然而然地引入進來的，大部分的用法都很簡單，并且我們還會在工作中持續學習，一開始只需要入門就行。下圖展示了 React 前端開發工程師，根據 React 框架所衍生的技術棧（示意）：
React 前端工程師技能圖譜（示意）
2019 年從公司再次離職，不想再打工了，借鑒在國外留學時所學到的經驗，轉型開始做視頻和線上教學，運營著“峰華前端工程師”賬號，同時也在 CSDN 發表博客。在這期間還撰寫了《JavaScript 基礎語法詳解》一書。
編寫書籍的時候，又是一次學習的過程，在查閱各種資料之后，對 JavaScript 有了更完全的認識。同時也明白了，人只有存在目標的情況下，才會有動力去完成看似不可能的事，避免渾渾噩噩度日。
如果你像我一樣，也算比較大齡的程序員，有年齡焦慮，可以適當的想想還要不要在公司里繼續工作下去，是不是該拿出勇氣來嘗試做自己真正想做的事，之后利用興趣養活自己。這不是一條容易的路，所以在決定之前一定要做好兩年之內沒有起色的打算，這些如果我能總結出一套經驗之后，再來分享。
這些大體就是我學習、掌握前端開發的過程，總結了下面這些重點：
學會獨立學習。前端的框架太多了，并且經常出現新奇特框架，必須要能自己獨立通過官方文檔和搜索引擎進行學習，因為前端框架多數比較小眾，不會有很多相關的教程。如果連文檔都沒有，就要學會讀源碼學習用法。
基礎打牢。前端庫雖然多，但萬變不離其宗，總是要回歸到 HTML、CSS 和 JavaScript 上面，所以基礎一定要打牢，尤其是在 ES6 以后出現的新特性，在前端用途非常廣泛。
實戰練習。學完前端庫之后，一定要找個小項目做，把學到的東西真正地掌握。Github 上有很多前端項目靈感的庫，可以搜索 “front-end project ideas" 找到 ，或者你也可以改造模仿市面上的網站、App 等。
不要把前端只局限在技術層面。向上往設計和產品擴一下，向下從后端和運維鉆一下，你會更能從整體角度觀望整個項目，從而在前端技術選型、開發過程以及和同事溝通的時候，懂得取舍和折衷。
線上文檔。對于 HTML、CSS 和 JavaScript 最權威的文檔就是 MDN。其它的像 React、Vue 等框架，就是官方文檔。如果遇到了問題，就去搜索引擎搜索，看其他人寫的解決方案。
書籍。對于體系化的教程，可以購買相關的書籍看，重點看專業、經典的書籍，這些網上有很多推薦。書籍可以幫助你快速入門并深入，不用在網上東找西找了。
視頻。現在視頻平臺正火爆，不要只用來消遣，上邊也會有很多編程相關的視頻，空余時間可以刷一刷，可能會獲得一些開發靈感、技巧，以及未來工作可能用到的新技能。
在線課程或培訓。在線課程或者培訓能幫你直接學到和就業相關的技能，積累項目實戰經驗，但是要注意鑒別課程和機構的質量。
向有經驗的人學習。如果你看到有高級工程師發布的博客、微博、視頻等內容，可以嘗試和他們建立聯系，拿出你學習的誠意，讓他們幫你指點迷津，或許能少走一些彎路。
END
成就一億技術人
年快樂，開工大吉。今天帶大家了解一個實用的CSS新特性：@scope規則。在Sass或Less這類CSS預編譯工具中嵌套語法較為常見，就像這樣，可以一定程度上簡化CSS代碼的書寫，讓層次結構更清晰。
@scope規則的作用與之類似，例如將剛才的Sass嵌套改為@scope規則書寫，就會是這樣，可以看到樣式按照正確的預期渲染了，這里的背景色成功渲染了。
@scope規則不會改變CSS選擇器的優先級，例如這里的@scope(nav)的優先級等同于nav，右邊的案例可以證明這一點。如果@scope(nav)不參與優先級計算，遵循后來居上的原則，上面這個鏈接的背景色應該是淺粉色，但事實沒有，說明@scope(nav)參與了優先級計算。
any-link是偽類選擇器，優先級大于任意的標簽選擇器，因此下面的鏈接的背景色是淺粉色。規范還提供了名為：scope的偽類，可以選擇規則自身的匹配，例如這里可以設置nav元素自身紅色邊框。
@scope規則還提供了排除語法，例如此例，通過to語法的設置讓p元素的子元素不參與nav匹配，因此p元素下的a元素就沒有背景色設置。
最后@scope規則還支持復雜選擇器，就像這樣的語法也是合法的。
以上就是本次分享的全部內容，如果你有任何疑問可以通過評論的方式進行反饋，我會一一解答，我們下個視頻再見。
么是JavaScript
JavaScript是一種基于對象和事件驅動的、并具有安全性能的腳本語言，已經被廣泛用于Web應用開發，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
JavaScript特點
是一種解釋性腳本語言（代碼不進行預編譯）。
主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。
可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。
跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。
JavaScript組成
JavaScript日常用途
1、嵌入動態文本于HTML頁面。
2、對瀏覽器事件做出響應。
3、讀寫HTML元素。
4、在數據被提交到服務器之前驗證數據。
5、檢測訪客的瀏覽器信息。
6、控制cookies，包括創建和修改等。
7、基于Node.js技術進行服務器端編程。
JavaScript的基本結構
<script type="text/javascript"> <!— JavaScript 語句; —> </script >
示例：
……
<title>初學JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("初學JavaScript");
document.write("<h1>Hello，JavaScript</h1>");
</script>
</body>
</html>
<script>…</script>可以包含在文檔中的任何地方，只要保證這些代碼在被使用前已讀取并加載到內存即可
JavaScript的執行原理
網頁中引用JavaScript的方式
1、使用<script>標簽
2、外部JS文件
<script src="export.js" type="text/javascript"></script>
3.直接在HTML標簽中
<input name="btn" type="button" value="彈出消息框"
onclick="javascript：alert('歡迎你');"/>
JavaScript核心語法：
1. 變量
①先聲明變量再賦值
var width; width = 5; var － 用于聲明變量的關鍵字 width － 變量名
②同時聲明和賦值變量
var catName= "皮皮"; var x, y, z = 10;
③不聲明直接賦值【一般不使用】
width=5;
變量可以不經聲明而直接使用，但這種方法很容易出錯，也很難查找排錯，不推薦使用。
2. 數據類型
①undefined：示例：var width;
變量width沒有初始值，將被賦予值undefined
②null：表示一個空值，與undefined值相等
③number：
var iNum=23; //整數
var iNum=23.0; //浮點數
④Boolean：true和false 但是JS會把他們解析成1；0
⑤String：一組被引號（單引號或雙引號）括起來的文本 var string1="This is a string";
3. typeof運算符
typeof檢測變量的返回值；typeof運算符返回值如下：
①undefined：變量被聲明后，但未被賦值.
②string：用單引號或雙引號來聲明的字符串。
③boolean：true或false。
④number：整數或浮點數。
⑤object：javascript中的對象、數組和null。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
