整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文回顧和點(diǎn)評(píng) 2019 年前端領(lǐng)域發(fā)生的所有重大事件、新聞和趨勢(shì)，并展望 2020。
React 又一次成為年度最受歡迎的庫(kù)，并且仍處于增長(zhǎng)狀態(tài)；而 jQuery 拿到了令人意想不到的第二名；緊隨其后的是 Angular 和 Vue，它們都擁有熱情的開發(fā)人員組成的龐大用戶群。
這一年來(lái) Svelte 雖然吸引了很多關(guān)注，但它離廣泛普及還有很長(zhǎng)的路要走。
經(jīng)歷了相對(duì)平靜的一年后，WebAssembly 在 12 月初迎來(lái)重大新聞——W3C 聯(lián)盟正式將其推薦為一種 Web 語(yǔ)言。
https://www.w3.org/2019/12/pressrelease-wasm-rec.html.en
自 2017 年 WebAssembly 發(fā)布以來(lái)，它已經(jīng)收獲了廣泛的關(guān)注并得到快速推廣。在過(guò)去幾年中，我們看到它推出了 1.0 版本規(guī)范，而且?guī)缀跛兄髁鳛g覽器都開始支持 WebAssembly。
WebAssembly 在 2019 年的另一件大事是字節(jié)碼聯(lián)盟的成立，其宗旨是“通過(guò)合作實(shí)施標(biāo)準(zhǔn)和提議新標(biāo)準(zhǔn)，為 WebAssembly 在瀏覽器之外的世界開拓一片新天地”。
https://bytecodealliance.org/articles/announcing-the-bytecode-alliance
我們?nèi)栽诘却?WebAssembly 真正站穩(wěn)腳跟并全面普及！而隨著 WebAssembly 一次又一次的更新，應(yīng)該說(shuō)我們現(xiàn)在愈加接近這個(gè)目標(biāo)了。毫無(wú)疑問(wèn)，W3C 聲明是使 WebAssembly 獲得企業(yè)認(rèn)可的關(guān)鍵一步，并且我們需要繼續(xù)降低 WebAssembly 的門檻，使其更易于構(gòu)建產(chǎn)品。
2019 年是 TypeScript 之年。TypeScript 不僅成為了在 JS 代碼中添加數(shù)據(jù)類型的事實(shí)選擇，而且許多開發(fā)人員會(huì)經(jīng)常在個(gè)人項(xiàng)目和工作中，用它來(lái)代替普通的 JavaScript。
在 2019 年初發(fā)布的 StackOverflow 調(diào)查中，TypeScript 與 Python 并列最受歡迎語(yǔ)言次席，僅次于 Rust。在 2020 年初將發(fā)布的新調(diào)查中，如果我們看到 TypeScript 的排名再進(jìn)一步，應(yīng)該也不會(huì)有什么奇怪。
https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted
TypeScript 已經(jīng)席卷了整個(gè) Web 開發(fā)世界——前端和后端皆是如此。一些開發(fā)人員認(rèn)為 TS 只是跟風(fēng)炒作的產(chǎn)物，覺得它會(huì)步 CoffeeScript 后塵；但 TypeScript 已被證明可以解決 JS 開發(fā)人員面臨的一大核心問(wèn)題，而且它的使用率看來(lái)只增不減。
TypeScript 與所有主流文本編輯器的集成，為 Web 開發(fā)人員提供了更好的開發(fā)體驗(yàn)。JavaScript 開發(fā)人員將 TypeScript 視為一種工具，它可以減少錯(cuò)誤，還可以通過(guò)（提供自帶描述的）類型和對(duì)象接口更輕松地讀取代碼。
值得注意的是，TypeScript 在 2019 年的 NPM 下載量超越了 React，其流行程度可見一斑。此外，它的下載量也比 Flow 和 Reason 等競(jìng)爭(zhēng)對(duì)手高得多。
TypeScript 和 React 解決的是完全不同的問(wèn)題，因此這并不是一場(chǎng)較量，只是為了告訴大家 TypeScript 有多么受歡迎。
TypeScript v3.0 于 2018 年末發(fā)布，而在 2019 年它已發(fā)布到了 3.7 版，其中包括更新的 ECMAScript 功能，例如可選鏈和 nullish 運(yùn)算符，以及類型檢查功能的相關(guān)改進(jìn)等。
Vue 和 Angular 擁有熱情的用戶群體，Vue 在 GitHub 上拿到的星星甚至比 React 還多，但考慮個(gè)人和專業(yè)項(xiàng)目中的使用率時(shí)，React 仍繼續(xù)保持著領(lǐng)先地位。
在 2018 年末，React 團(tuán)隊(duì)引入了 hooks。2019 年，hooks 席卷了 React 世界，絕大多數(shù)開發(fā)人員都將其作為管理狀態(tài)和組件生命周期的首選方式。這一年下來(lái)，有關(guān) hooks 的文章數(shù)不勝數(shù)，使用模式也穩(wěn)定了下來(lái)，而最具分量的 React 包也構(gòu)建了自定義 hooks 來(lái)公開它們的庫(kù)功能。
Hooks 提供了一種方法，可以使用簡(jiǎn)單簡(jiǎn)潔的語(yǔ)法來(lái)管理函數(shù)式組件中的組件狀態(tài)和生命周期。另外，React 提供了構(gòu)建自定義 hooks 的能力，這使我們能夠創(chuàng)建可復(fù)用的代碼和共享邏輯，而無(wú)需創(chuàng)建高階組件或使用渲染 props。
在 React v16.8 中加入 hooks 這一重大改進(jìn)之后，React 之后版本的多數(shù)更改都相對(duì)較小。到了 2019 年末，版本更新到了 16.14。
hooks 的重大改進(jìn)發(fā)布之后，React 團(tuán)隊(duì)開始轉(zhuǎn)移重心，希望提供更多工具來(lái)改善開發(fā)體驗(yàn)。實(shí)際上，開發(fā)體驗(yàn)正是 React Conf 2019 的主題。ReactConf 的主講人，React 團(tuán)隊(duì)經(jīng)理 Tom Occhino 表示，開發(fā)體驗(yàn)植根于以下三件事：準(zhǔn)入門檻低、生產(chǎn)率高和擴(kuò)展能力強(qiáng)。我們來(lái)看看 React 團(tuán)隊(duì)為此發(fā)布了哪些內(nèi)容或有哪些計(jì)劃：
人們相信，良好的開發(fā)體驗(yàn)也將帶來(lái)良好的用戶體驗(yàn)。下面是 React Conf 2019 大會(huì)上 Yuzhi Zheng 的演講，談到了即將發(fā)布的 React 功能。
https://youtu.be/uXEEL9mrkAQ
Vue 可能還沒迎來(lái)自己采用率的巔峰，但不得不承認(rèn)它擁有最熱情的用戶群。人們說(shuō) Vue 汲取了 React 和 Angular 的長(zhǎng)處，同時(shí)更加簡(jiǎn)單易用。它的另一大賣點(diǎn)是更加開放，不像 React（Facebook）或 Angular（谷歌）那樣受到大公司的控制。
Vue 的最大新聞是即將發(fā)布的 3.0 版本，alpha 版本有望在第四季度末發(fā)布。在 2019 年，Vue 2.x 僅在年初獲得了少量更新，因?yàn)橹饕ぷ鞫挤旁诹?v3 版本的開發(fā)上。
雖說(shuō) Vue 在今年發(fā)布的版本不多，但發(fā)生的事情卻不算少。當(dāng) Evan You 發(fā)布 v3 的 RFC 時(shí)，新版的更改在社區(qū)中引發(fā)激烈爭(zhēng)論。
激怒 Vue 開發(fā)人員的關(guān)鍵問(wèn)題是對(duì)框架 API 的全面修訂。但在反對(duì)聲浪之后，據(jù)稱 API 更改將完全是附加的，并且對(duì) Vue 2 向后兼容。許多開發(fā)人員聲稱，如果新版的這些更改無(wú)法令人滿意的話，他們可能會(huì)考慮轉(zhuǎn)向 Svelte，因?yàn)樗麄儞?dān)心 Vue 會(huì)越來(lái)越像 React 了。不過(guò)盡管社區(qū)中仍有許多人對(duì)此表示關(guān)注，但現(xiàn)在大家還是在靜待新版的正式發(fā)布。
除了上述爭(zhēng)議之外， Vue 3 還將帶來(lái)許多重大改進(jìn)：
今年另一個(gè)值得關(guān)注的 Vue 更新是 CLI 的第 4 版，其更新主要集中在基礎(chǔ)工具上。
https://youtu.be/ANtSWq-zI0s
Angular 的固執(zhí)（opinionated）理念幫助它贏得了龐大用戶群。由于 Angular 是一個(gè)強(qiáng)固執(zhí)框架，因此它要求開發(fā)人員以 Angular 的方式行事，并且為開發(fā)人員提供了所有必要的工具。
這種理念消除了許多爭(zhēng)議，人們不用再操心該將哪些庫(kù)和依賴項(xiàng)帶入項(xiàng)目，相反構(gòu)建 React 應(yīng)用的團(tuán)隊(duì)就可能會(huì)出現(xiàn)這類問(wèn)題。Angular 還要求開發(fā)人員使用 TypeScript 編寫應(yīng)用程序。由于大多數(shù)選擇已經(jīng)確定好了，因此很多公司將其視為一個(gè)不錯(cuò)的選擇，因?yàn)樗归_發(fā)人員可以專注構(gòu)建產(chǎn)品，而不必花費(fèi)時(shí)間考慮該用哪個(gè)包。
在 2019 年，Angular 發(fā)布了第 8 版，并且還發(fā)布了一個(gè)新的渲染器 / 編譯管道，稱為 Ivy。Ivy 的最大好處是較小的打包尺寸，除此之外還提供了許多很棒的改進(jìn)。目前，Ivy 是 Angular 9 之前的可選功能。這篇文章詳細(xì)介紹了第 8 版中發(fā)布的功能，其中值得關(guān)注的更新有：
在 2019 年 12 月，Angular 團(tuán)隊(duì)開始準(zhǔn)備發(fā)布第 9 版，可能會(huì)在 2019 年底或 2020 年初正式發(fā)布。 Angular 9 的最大變化是 Ivy 成為了標(biāo)準(zhǔn)渲染器。觀看下面的 YouTube 視頻可了解有關(guān) Angular 9 的更多信息。
https://youtu.be/5wmWtgr7LQ0
Web 應(yīng)該對(duì)所有人開放，讓所有人使用。前端業(yè)界一直將這一目標(biāo)視為頭等大事。自 2015 年以來(lái)，JavaScript 和 Web 的發(fā)展如此之快，相關(guān)模式和框架也終于穩(wěn)定了下來(lái)。現(xiàn)在各種事物都更穩(wěn)定了，開發(fā)人員就可以將更多的精力放在那些幫助應(yīng)用本地化、改善應(yīng)用可訪問(wèn)性的工具上面了，從而讓所有人都能體驗(yàn)到更加美好的 Web 世界。我們應(yīng)該為我們所取得的進(jìn)展感到自豪，但是前面還有很長(zhǎng)的路要走。
可訪問(wèn)性：“讓盡可能多的人使用你的網(wǎng)站——我們傳統(tǒng)上認(rèn)為這是關(guān)于殘疾人的特性，但實(shí)際上它也涵蓋了其他群體，比如使用移動(dòng)設(shè)備的人群和那些網(wǎng)絡(luò)連接較緩慢的人群。”——MDN
國(guó)際化：“在設(shè)計(jì) / 開發(fā)你的內(nèi)容、應(yīng)用程序和規(guī)范等事物時(shí)，確保其適合，或者可以輕松適應(yīng)來(lái)自任何文化、地區(qū)或使用任何語(yǔ)言的用戶”——W3C
ECMAScript（JavaScript 所基于的規(guī)范）的年度更新周期還在繼續(xù)，ES2019 版本添加了許多新特性：
雖然 ES2019 帶來(lái)了一些重大更新，但即將面世的 ES2020 看來(lái)會(huì)有一些自 ES6/ES2015 以來(lái)最受期待的特性：
Flutter 的發(fā)布比 React Native 晚了兩年，但前者很快就站穩(wěn)了腳跟。Flutter 在 GitHub 中拿到的星幾乎快趕上 React Native 了，目前是 80.5k 對(duì) 83k；按這個(gè)趨勢(shì)，超過(guò) RN 指日可待。
考慮到 Flutter 并沒有像 React Native 那樣，擁有 React Web 開發(fā)人員那樣龐大的開發(fā)社區(qū)來(lái)幫助自身成長(zhǎng)，這樣的成績(jī)就更令人驚訝。Flutter 正在成為最佳的跨平臺(tái)移動(dòng)框架。
為了支持 JavaScript 生態(tài)系統(tǒng)并加速發(fā)展這種語(yǔ)言，Node.js 基金會(huì)和 JS 基金會(huì)合并成立了 OpenJS 基金會(huì)。新的基金會(huì)希望社區(qū)在一個(gè)中立的實(shí)體支持下協(xié)作和發(fā)展，這個(gè)實(shí)體現(xiàn)在托管 31 個(gè)開源項(xiàng)目，包括 Node、jQuery 和 Webpack。這一行動(dòng)被認(rèn)為對(duì)整個(gè) JS 社區(qū)都有正面影響，并得到了谷歌、IBM 和微軟等大型科技公司的支持。
Node 今年發(fā)布了第 12 版，也是一個(gè)長(zhǎng)期支持版本（LTS），支持周期截至 2023 年 4 月。Node12 提供了許多新特性、安全更新和性能改進(jìn)。一些值得關(guān)注的更新包括對(duì) import/export 語(yǔ)句的原生支持、私有類字段、與 V8 Engine 7.4 版的兼容性、對(duì) TLS 1.3 的支持以及新增的診斷工具等。
Svelte 設(shè)法在擁擠不堪的前端框架世界中找到自己的位置。但正如我們?cè)诒疚拈_頭所看到的那樣，它的努力還沒能轉(zhuǎn)化為大規(guī)模的現(xiàn)實(shí)使用率。對(duì) Svelte 來(lái)說(shuō)，最好的總結(jié)就是“簡(jiǎn)單而強(qiáng)大”。Svelte 網(wǎng)站上指出了三點(diǎn)優(yōu)勢(shì)：
Svelte 試圖將其大部分工作轉(zhuǎn)移到編譯步驟，而不是放到瀏覽器中的運(yùn)行時(shí)上。Svelte 具有基于組件的架構(gòu)，可編譯為純 HTML 和標(biāo)準(zhǔn) JavaScript，同時(shí)還承諾減少樣板代碼。它使用響應(yīng)式編程來(lái)直接更新 DOM，而不是使用虛擬 DOM。
Svelte 通過(guò)做減法的方式，為前端領(lǐng)域提供了一些新穎而令人興奮的東西。在 2020 年，觀察 Svelte 的成長(zhǎng)和發(fā)展將是一件很有趣的事情，希望我們能看到一些大規(guī)模應(yīng)用的案例，看看它是如何與 React、Vue 和 Angular 等大塊頭對(duì)手競(jìng)爭(zhēng)的。
https://youtu.be/AdNJ3fydeao
隨著諸如 Gatsby 之類的框架愈加流行，諸如 Netlify 之類的靜態(tài)網(wǎng)站托管快速增長(zhǎng)，以及無(wú)數(shù)無(wú)頭 CMS 公司的涌現(xiàn)，靜態(tài)網(wǎng)站證明了它們將成為 Web 不可或缺的一部分。
靜態(tài)站點(diǎn)將舊式 Web 與新的工具、庫(kù)和更新結(jié)合在一起，提供了無(wú)與倫比的體驗(yàn)。我們能使用像 React 這樣的現(xiàn)代庫(kù)來(lái)構(gòu)建我們的站點(diǎn)，然后在構(gòu)建時(shí)將它們編譯成靜態(tài) HTML 頁(yè)面。由于所有頁(yè)面現(xiàn)在都是預(yù)先構(gòu)建的，因此無(wú)需服務(wù)器時(shí)間就可以根據(jù)請(qǐng)求將它們與數(shù)據(jù)混合在一起——這些頁(yè)面可以立即提供服務(wù)，并可以利用在全球 CDN 中緩存的優(yōu)勢(shì)，使內(nèi)容盡可能接近你的用戶。
靜態(tài)站點(diǎn)使用的一種流行編程模式是 JAMStack （JavaScript、API 和 Markup）。這是一種靜態(tài) /SPA 混合方法，其中頁(yè)面是靜態(tài)提供的，但在客戶端上更像是 SPA，使用 API??和用戶交互來(lái)發(fā)展 UI 狀態(tài)。
靜態(tài)網(wǎng)站是獲得高速產(chǎn)品的一種方法，但是它們并不適合所有應(yīng)用——另一個(gè)上佳選擇是 PWA（漸進(jìn)式 Web 應(yīng)用）。 PWA 允許你在瀏覽器中緩存資源，以使頁(yè)面立即響應(yīng)并提供脫機(jī)支持。另外，它們?cè)试S后臺(tái) workers 提供原生功能，例如通知推送。
甚至有人聲稱 PWA 可以取代原生移動(dòng)應(yīng)用。無(wú)論結(jié)果如何，可以肯定的是 PWA 將在很長(zhǎng)一段時(shí)間里成為企業(yè)構(gòu)建產(chǎn)品的重要途徑。
多年來(lái)，前端開發(fā)人員一直在抱怨對(duì) JavaScript 的審美疲勞，但我們已經(jīng)逐漸看到，開源項(xiàng)目維護(hù)人員的不懈努力正在減輕這種審美疲勞。
以前，如果我們要構(gòu)建一個(gè) SPA，則必須使用 Bower 或 NPM 引入我們自己的依賴項(xiàng)，學(xué)會(huì)如何使用 Browserify 或 Webpack 來(lái)編譯它，從頭開始編寫 Express 服務(wù)器，并通過(guò)繁瑣的庫(kù)更新維護(hù)我們的應(yīng)用。
這種痛苦我們已經(jīng)承受了很多年，但現(xiàn)在我們已經(jīng)發(fā)展出了最活躍、最發(fā)達(dá)的軟件包生態(tài)系統(tǒng)。有一些工具可以幫助我們抽象出構(gòu)建應(yīng)用程序時(shí)令人痛苦的部分——Create React App、Vue CLI、Angular CLI、用于靜態(tài)站點(diǎn)的 Gatsby，用于 React Native 移動(dòng)應(yīng)用的 Expo、用于 SSR 應(yīng)用程序的 Next/Nuxt，用于創(chuàng)建我們服務(wù)器的生成器、無(wú)需為 GraphQL 編寫服務(wù)器的 Hasura，自動(dòng)生成 TypeScript 類型的 GraphQL Code Generator，越來(lái)越簡(jiǎn)化的 Webpack——不管我們有怎樣的需求，都有對(duì)應(yīng)的工具可以幫助我們從繁重的勞動(dòng)中解放出來(lái)。
也許現(xiàn)在我們有了工具鏈審美疲勞？
GraphQL 有望解決傳統(tǒng)的基于 REST 的應(yīng)用程序面臨的許多問(wèn)題。開發(fā)人員很快就愛上了 GraphQL，技術(shù)公司也終于開始使用它了。GitHub 幾年前用 GraphQL 編寫了它的最新 API，還有許多組織也在跟上步伐。
GraphQL 應(yīng)用是數(shù)據(jù)驅(qū)動(dòng)的，而不是端點(diǎn)驅(qū)動(dòng)的，從而允許客戶端聲明所需的確切數(shù)據(jù)，并從服務(wù)器接收相應(yīng)的 JSON 響應(yīng)。GraphQL API 提供了一個(gè)架構(gòu)，用于記錄所有數(shù)據(jù)及其類型，從而使開發(fā)人員可以全面了解 API。
由于 GraphQL API 提供了完全類型化的 schema，因此它也可以與使用 TypeScript 的應(yīng)用程序很好地集成在一起。使用諸如 GraphQL Code Generator 之類的工具時(shí)，它可以讀取我們客戶端代碼中的查詢，并將其與 schema 匹配，以提供會(huì)在整個(gè)應(yīng)用程序中流動(dòng)的 TypeScript 類型。
在過(guò)去的一年中，GraphQL 的下載量增長(zhǎng)了一倍以上，而 Apollo 則開始成為使用最廣泛的框架。
Web 開發(fā)的前進(jìn)方向似乎是要在 JavaScript 下統(tǒng)一一切，而 CSS-in-JS 的推廣就體現(xiàn)了這種趨勢(shì)；它是用 JavaScript 字符串創(chuàng)建樣式的方法。
這使我們可以通過(guò) import/export 來(lái)使用常規(guī) JavaScript 語(yǔ)法共享樣式和依賴項(xiàng)。由于 CSS-in-JS 組件可以將 props 插入其樣式字符串中，因此它還簡(jiǎn)化了動(dòng)態(tài)樣式。如前所述，F(xiàn)acebook 甚至可能將 CSS-in-JS 視為前端的未來(lái)，并將發(fā)布他們自己的庫(kù)。
以下是經(jīng)典 CSS 與 CSS-in-JS 的對(duì)比示例。要使用常規(guī) CSS 處理動(dòng)態(tài)樣式，你必須管理組件中的類名稱并根據(jù) state/props 來(lái)更新它。對(duì)于每個(gè)變體，你還需要一個(gè) CSS 類：
復(fù)制代碼
// Component JS fileconst MyComp=({ isActive })=> { const className=isActive ? 'active' : 'inactive'; return <div className={className}>HI</div>}// CSS file.active { color: green; }.inactive { color: red; }使用 CSS-in-JS，你不用再管理 CSS 類。你只需將 props 傳遞給樣式化的組件，它會(huì)使用聲明性語(yǔ)法處理動(dòng)態(tài)樣式。代碼更加簡(jiǎn)潔了，而且允許 CSS 管理基于 props 的動(dòng)態(tài)樣式后，我們對(duì)樣式和 React 的關(guān)注點(diǎn)分離也更為清晰了。現(xiàn)在，所有內(nèi)容看起來(lái)都像是常規(guī)的 React 和 JavaScript 代碼：
復(fù)制代碼
const Header=styled.div` color: ${({ isActive })=> isActive ? 'green' : 'red'};`;const MyComp=({ isActive }}=> ( <Header isActive={isActive}>HI</Header>)CSS-in-JS 的兩大庫(kù)分別是 styled-components 和 emotion，后者在 2019 年的下載量超越了前者。這兩個(gè)庫(kù)遙遙領(lǐng)先于其他 CSS-in-JS 選項(xiàng)，看起來(lái)它們將繼續(xù)快速增長(zhǎng)。
開發(fā)人員對(duì)自己的 IDE/ 文本編輯器充滿熱情，并且經(jīng)常會(huì)爭(zhēng)論誰(shuí)的選擇是最好的。但在前端領(lǐng)域，開發(fā)人員幾乎一致選擇 VS Code 作為他們的編輯器。VS Code 是一個(gè)開源編輯器，它提供許多插件來(lái)創(chuàng)造極為出色的開發(fā)體驗(yàn)。
下面是 2019 年 JS 現(xiàn)狀調(diào)查統(tǒng)計(jì)的文本編輯器使用率：
Webpack 已成為幾乎所有現(xiàn)代 JavaScript 工具鏈的核心組件，并且是最常用的構(gòu)建工具。Webpack 一直在提升其性能和可用性，從而改善開發(fā)體驗(yàn)。在第 5 版中，Webpack 著重于以下幾點(diǎn)：
Facebook 維護(hù)著流行的測(cè)試庫(kù) Jest 和 Flow，后者是 TypeScript 的競(jìng)爭(zhēng)對(duì)手。他們?cè)?2019 年初發(fā)表了大膽聲明，選擇將 Jest 從 Flow 遷移到 TypeScript。這進(jìn)一步表明 TypeScript 已成為類型化 JavaScript 的標(biāo)準(zhǔn)選擇，并且在 2020 年及以后的使用率會(huì)不斷增長(zhǎng)。
Chrome 繼續(xù)快速迭代，迅速向 Web 和開發(fā)工具中添加新功能。在 2019 年，我們看到 Chrome 發(fā)布了 7 個(gè)穩(wěn)定版本，還有 79 Beta 版，80 dev 版和 81 canary 版。查看下面的 Wiki 可以了解過(guò)去一年中 Chrome 的重要新增功能。
https://en.wikipedia.org/wiki/Google_Chrome_version_history?source=post_page1e7d07966d6c
Internet Explorer 及其后繼者 Edge 對(duì) Web 開發(fā)人員來(lái)說(shuō)就是個(gè)笑話，更糟的是使用它們的體驗(yàn)令人痛苦不堪。微軟的瀏覽器在 Web 特性實(shí)現(xiàn)方面一直落后于人，并且很難為其編寫跨瀏覽器兼容的代碼。作為開發(fā)人員的重大勝利，微軟已經(jīng)選擇轉(zhuǎn)向谷歌的開源 Chromium 引擎。到了 2019 年中，此更改已進(jìn)入 beta 階段。
Facebook 認(rèn)為 Android JavaScript 引擎的速度不夠快，因此他們打造了自己的引擎。Facebook 正在全力支持 React Native，此舉表明他們?cè)敢庾龀霰匾恼{(diào)整，以使其在所有平臺(tái)上都能發(fā)揮最大效能。
原文鏈接：
https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c
綱
1、什么是<a>標(biāo)簽
2、<a>標(biāo)簽的幾個(gè)重要屬性
3、a標(biāo)簽的運(yùn)行機(jī)制
4、a標(biāo)簽常用的協(xié)議
5、超鏈接標(biāo)簽的樣式問(wèn)題——a標(biāo)簽的偽類選擇器的書寫順序
1、什么是<a>標(biāo)簽
<a> 標(biāo)簽定義超鏈接，用于從一張頁(yè)面鏈接到另一張頁(yè)面。
<a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標(biāo)。
2、<a>標(biāo)簽的幾個(gè)重要屬性
2.1、href
規(guī)定鏈接指向的頁(yè)面的 URL。
2.2、target
規(guī)定在何處打開鏈接文檔。
a:自定義打開錨點(diǎn)
target的特殊值：有 4 個(gè)保留的目標(biāo)名稱用作特殊的文檔重定向操作：
2.3、name
規(guī)定錨的名稱。（Html5不支持）
2.4、downloadHTML5新增
HTML5新增，只有 Firefox 和 Chrome 支持 download 屬性。
download 屬性規(guī)定被下載的超鏈接目標(biāo)。
在 <a> 標(biāo)簽中必須設(shè)置 href 屬性。
該屬性也可以設(shè)置一個(gè)值來(lái)規(guī)定下載文件的名稱。所允許的值沒有限制，瀏覽器將自動(dòng)檢測(cè)正確的文件擴(kuò)展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
1
<a href="/images/myw3schoolimage.jpg" download="w3logo">
2.5、media
media 屬性規(guī)定目標(biāo) URL 是為什么類型的媒介/設(shè)備進(jìn)行優(yōu)化的。
該屬性用于規(guī)定目標(biāo) URL 是為特殊設(shè)備（比如 iPhone）、語(yǔ)音或打印媒介設(shè)計(jì)的。
該屬性可接受多個(gè)值。
只能在 href 屬性存在時(shí)使用。
3、a標(biāo)簽的運(yùn)行機(jī)制
4、a標(biāo)簽常用的協(xié)議
5、超鏈接標(biāo)簽的樣式問(wèn)題——a標(biāo)簽的偽類選擇器的書寫順序
5.1、a標(biāo)簽的多重狀態(tài)
對(duì)于<a>元素，我們可以用“多重人格”來(lái)形容它。對(duì)于該標(biāo)簽，它一共有五種狀態(tài)：:link, :visited, :hover, :focus, :active.
“:link”可以用于聲明未訪問(wèn)狀態(tài)鏈接的樣式；
“:visited”可以用于聲明已經(jīng)訪問(wèn)鏈接的樣式；
“:hover”可以用于聲明鼠標(biāo)懸停在鏈接上的樣式；
“:focus”可以用于聲明瀏覽器焦點(diǎn)懸停在鏈接上的樣式(通過(guò)鍵盤選擇鏈接)；
“:active”可以用于聲明瀏覽器點(diǎn)擊鏈接的樣式。
注意：冒號(hào)前后不要出現(xiàn)空格
一般a:hover和a:visited鏈接的狀態(tài)（顏色、下劃線等）應(yīng)該是相同的。
link、visited、active分別對(duì)應(yīng)body元素的link、vlink、alink這三個(gè)屬性。
四個(gè)“狀態(tài)”的先后過(guò)程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能設(shè)置有無(wú)下劃線（總是有的）。
5.2、鏈接（a標(biāo)簽狀態(tài)）定義的順序
沒有規(guī)矩不成方圓，雖然鏈接定義寫好了，但它也是有規(guī)則的，如果這四項(xiàng)的書寫順序稍有差錯(cuò)，鏈接的效果可能就沒有了，所以每次定義鏈接樣式時(shí)務(wù)必確認(rèn)定義的順序，link--visited--hover-active，也就是我們常說(shuō)到的LoVe HAte原則（大寫字母就是它們的首字母）。
老外總結(jié)了一個(gè)便于記憶的“愛恨原則”（LoVe/HAte），即四種偽類的首字母:LVHA。定義A鏈接樣式的正確的順序：a:link、a:visited、a:hover、a:active。若沒有按照這樣的順序的話，有的狀態(tài)的樣式會(huì)被放置在后面的樣式覆蓋而導(dǎo)致像沒有觸發(fā)一樣沒有效果，如：如果hover放在visited之后，則就算我放上去變色了，但是同時(shí)這個(gè)標(biāo)簽也具有visited狀態(tài)以及其的效果，會(huì)覆蓋了hover的效果。
為了符合瀏覽器解釋CSS遵循的"就近原則"。我們?cè)诙xCSS中，宜將最一般的條件放在最上面，并依次向下，最下面放最特殊的。
在W3C規(guī)范中，也規(guī)定了鏈接的聲明順序：
在 CSS 定義中，a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
ctiveReports
ActiveReports是一款在全球范圍內(nèi)應(yīng)用非常廣泛的報(bào)表控件，以提供.NET報(bào)表所需的全部報(bào)表設(shè)計(jì)功能領(lǐng)先于同類報(bào)表控件，包括對(duì)交互式報(bào)表的強(qiáng)大支持、豐富的數(shù)據(jù)可視化方式、與Visual Studio的完美集成、以及對(duì) HTML5 / WinForm / ASP.NET / ASP.NET MVC / Silverlight / WPF 和 Windows Azure 的多平臺(tái)支持等。 通過(guò)ActiveReports報(bào)表控件，您除了可以創(chuàng)建常用的子報(bào)表、交叉報(bào)表、分組報(bào)表、分欄報(bào)表、主從報(bào)表等商業(yè)報(bào)表外，還可以創(chuàng)建具備數(shù)據(jù)篩選、數(shù)據(jù)過(guò)濾、數(shù)據(jù)鉆取、報(bào)表互鏈等交互能力的數(shù)據(jù)分析報(bào)表，并把數(shù)據(jù)以可視化的方式呈現(xiàn)出來(lái)，快速為應(yīng)用程序添加強(qiáng)大的報(bào)表功能。
我們很高興地宣布 ActiveReports V13 正式發(fā)布！ 不同于以往，本次更新 ActiveReports 將為您帶來(lái)全新的報(bào)表設(shè)計(jì)體驗(yàn)：提供在線報(bào)表設(shè)計(jì)器、提供基于 JavaScript 的 JSViewer 報(bào)表查看器、提供全新的圖表以及富文本框增強(qiáng)功能。
ActiveReports 在線報(bào)表設(shè)計(jì)器
ActiveReports提供了多種用于報(bào)表設(shè)計(jì)的工具，如 VSDesigner、Visual Studio 加載項(xiàng)和獨(dú)立的桌面端設(shè)計(jì)器。與此同時(shí)，ActiveReports 報(bào)表設(shè)計(jì)器組件也可以嵌入到您的應(yīng)用系統(tǒng)中，方便您的最終用戶也可以進(jìn)行報(bào)表設(shè)計(jì)。
如今，在ActiveReports V13中，我們又推出了一款輕量級(jí)但功能強(qiáng)大的 Web 端在線報(bào)表設(shè)計(jì)器。只需幾行代碼，您就可以輕松地將其嵌入到您的網(wǎng)站和應(yīng)用程序中，從而使您的用戶能夠設(shè)計(jì)、創(chuàng)建和修改報(bào)表。
ActiveReports 在線報(bào)表設(shè)計(jì)器的出現(xiàn)，意味著您能夠在 ActiveReports 設(shè)計(jì)界面中打開現(xiàn)有報(bào)表，并可以在其中操作布局樣式、創(chuàng)建新報(bào)表，以及在富文本編輯器（WYSIWYG）中預(yù)覽它們。ActiveReports 在線報(bào)表設(shè)計(jì)器具有熟悉、直觀、設(shè)計(jì)感十足的 UI 界面，通過(guò)簡(jiǎn)單的操作，就可以實(shí)現(xiàn)：
與我們的桌面設(shè)計(jì)器一樣，ActiveReports 在線報(bào)表設(shè)計(jì)器可完全自定義：您可以對(duì)最終用戶使用設(shè)計(jì)器的功能選項(xiàng)進(jìn)行控制，如預(yù)覽、導(dǎo)出、圖表功能等。
JSViewer： ActiveReports 的 JavaScript 報(bào)表查看器
ActiveReports 擁有一個(gè)快速且強(qiáng)大的報(bào)表引擎，在 ActiveReports V13 中我們又創(chuàng)造了一個(gè)全新的報(bào)表查看器，以進(jìn)一步增強(qiáng) ActiveReports 產(chǎn)品的能力。JSViewer 由此誕生，它基于純 JavaScript 編寫，可以在任何現(xiàn)代瀏覽器上運(yùn)行，為用戶提供快速的報(bào)表渲染體驗(yàn)。
JSViewer 支持所有主流 Web 應(yīng)用程序框架，包括 Angular、Vue、ASP.NET Core、ASP.NET MVC 和 HTML。JSViewer 包含在 ActiveReports 中，為我們的企業(yè)級(jí)報(bào)表解決方案增加了更多應(yīng)用價(jià)值。
JSViewer 具備許多 ActiveReports 和 .NET 用戶熟悉的功能。通過(guò)使用類似 .NET 的語(yǔ)法來(lái)嵌入和自定義 JSViewer，從而最大限度地減少了用戶學(xué)習(xí)曲線。除此之外，JSViewer 還具有以下功能：
使用 ActiveReports 中的新圖表，增強(qiáng)報(bào)表數(shù)據(jù)交互和渲染性能
除了在線報(bào)表設(shè)計(jì)器和 JSViewer 之外，ActiveReports V13 中還對(duì)圖表進(jìn)行了改進(jìn)。這是 ActiveReports V13 中實(shí)現(xiàn)的又一個(gè)新功能和主要特性！這些圖表專門為 Web 上的 RDL 和 Page 報(bào)表創(chuàng)建，它們提供了更強(qiáng)的數(shù)據(jù)交互和渲染性能。
注：ActiveReports V13 兼容了此前版本的報(bào)表設(shè)計(jì)器和經(jīng)典圖表，您可以在最新版 ActiveReports 中繼續(xù)使用他們。
使用 FormattedText 控件在報(bào)表中嵌入更多 HTML
FormattedText 是 ActiveReports 中流行的控件之一，用于在報(bào)表中呈現(xiàn) HTML 文本。在 ActiveReports V13 中，我們?cè)鰪?qiáng)了 FormattedText 以支持更多 HTML 標(biāo)記和屬性。此外，用戶現(xiàn)在可以在設(shè)計(jì)時(shí)看到控件中的渲染文本，以確保在 WYSIWYG 顯示正確結(jié)果。
新的 HTML 標(biāo)記和屬性包括表格、文本對(duì)齊和樣式。
VSDesigner 加載項(xiàng)增強(qiáng)：使用 Visual Studio 主題
ActiveReports 是將報(bào)表設(shè)計(jì)器直接集成到 Visual Studio 中的少數(shù)幾家報(bào)表工具供應(yīng)商之一。我們通過(guò)將 Visual Studio 主題擴(kuò)展到 ActiveReports 設(shè)計(jì)器及其支持窗口，以擴(kuò)展這種集成的深度。這為報(bào)表設(shè)計(jì)人員提供了更好的 UI 樣式支持。
點(diǎn)擊“了解更多”下載產(chǎn)品最新試用版
↓↓↓
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
