整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          JavaScript 無處不在

          JavaScript 無處不在

          知道那個梗嗎?就是有人試圖在任何帶有屏幕和某種輸入界面的電子設備上運行 Doom 游戲那個?


          結果今天我們開始在 JavaScript 這邊也看到這種現象了。由于這種語言的通用性以及它背后社區的規模和活躍程度,JavaScript 的使用場景變得越來越多,遠遠超出了它一開始只用于瀏覽器的設計目標。


          那么我們就來看看我們最喜歡的編程語言到底能做多少事情,以至于我們可以開始展望一個完全由 JavaScript 塑造的未來了。

          開發人員在哪里都能見到它


          很難向非開發人員解釋為什么某件事情是用 JavaScript 來做的,因為他們很難理解背后的必然性。但我們開發人員是可以看到幕后的原因的,我們很了解自己最喜歡的產品背后使用的技術究竟有著怎樣的優勢。


          正如我們即將看到的那樣,JavaScript 可以成為我們技術生活和個人生活的一部分。因為如前所述,我們在幾年前就超越了瀏覽器的限制。這主要歸功于 Node.js,它讓我們都意識到自己可以在任何后端中運行 JS 了,而這一切都是從那時開始的。

          硬件上的 JavaScript


          這可能是讓 JS 融入我們日常生活的最大用例。


          像Johnny-Five這樣的庫允許你將 JS 代碼嵌入到幾乎任何類型的開源硬件中運行。雖然這里當然會有很多限制,你也不能隨便拿起什么芯片就用 JS 對其編程,但只要你愿意改一下你的電子設備并在你的產品中放一個 Arduino(舉個例子),你就可以創建任何運行在 JavaScript 上的硬件。


          不信我的話?甚至還有一個名為Espruino的項目,它提供了所有的硬件、手冊,甚至是開發環境,供你學習和使用 JS 來做各種事情。


          我覺得這只是一個開始,考慮到這種語言是如此簡單和靈活,它將推動可編程硬件的崛起,這種趨勢會一年比一年火熱。甚至有一個開源的 SmartWatch 可以用 JavaScript 來編程,名為Bangle.js。


          開放硬件,再加上開源軟件和快速發展的 3D 打印機等創建工具,為新一代黑客提供了絕佳的成長環境。他們能直接在家中構建自己的電子產品和電器,并使用以 JS 編寫的高級 API 對其進行編程。

          用于人工智能的 JavaScript


          雖然 Python 在進行一些嚴肅的 AI 編程工作(我指的是開發新的 ML 模型或進行一些繁重的數據處理)時仍然是更受歡迎的選擇,但 JS 也不甘落后。


          事實上,借助以下庫,你已經可以使用 JavaScript 編寫軟件,利用經過訓練的 ML 模型了:


          • TensorFlow.js允許你直接從瀏覽器或指定的運行時運行經過訓練的機器學習模型。
          • Brain.js,一個使用 GPU 執行神經網絡優化的庫,可以在瀏覽器和 Node.js 上運行。
          • ML5.js構建在 Tensorflow 之上,可進一步簡化直接從 JavaScript 訪問機器學習模型的過程。
          • Syntaptic.js,另一個用于直接在瀏覽器或其他兼容運行時(例如 Node.js)上創建神經網絡的庫。


          其他社區為 AI 領域提供的生態系統與 JavaScript 所提供的生態系統之間仍然存在一定差距,而且考慮到 JavaScript 每年都在被移植到更多平臺上,這種差距只會繼續擴大。借助 JS,AI 社區遲早會發現他們能將 AI 帶到世界的每一個角落。

          游戲開發中的 JavaScript


          雖然你還沒聽說過完全用 JavaScript 編寫的 3A 游戲,但這種語言正在慢慢走近這個行業。


          例如,雖然 Unity 確實放棄了對類 JS 語言的支持,但 JavaScript 本身就擁有制作游戲所需的一切特性,至少可以用來制作運行在瀏覽器上的游戲。


          不要誤會我的意思,這本身并不是一件壞事。瀏覽器圖形渲染能力比起早期已經有了很大發展,你可以直接在瀏覽器上獲得一些有趣的結果,并且也能充分利用計算機的 GPU 性能。


          誠然,距離 3A 游戲行業接受 JS 作為他們的標準之一還有很長的路要走,但這項技術已經有了自己的位置。瀏覽器 API 可以給你提供從處理輸入到硬件加速所需的一切支持,因此我們遲早會看到第一個獨立游戲工作室為節省成本而用 JS 打造的 3A 級游戲。


          其實我的目光放的更遠一些,如果在 2012 年的時候這個家伙就可以在當年的 XBOX 上運行完整的 JS 運行時,那么我們遲早會看到所有主要平臺上都會有 JS 運行時。一旦一家公司開發出來并獲得批準,許多公司就會效仿。


          如果你只對 Web 游戲開發感興趣,你可能需要查看用 JS 開發游戲時用到的 top 9 庫列表:2020年9個頂級JS游戲引擎和庫。

          Web3 時代和 JavaScript 在這個新世界中的影響力


          所有人都在談論這個話題,或者為它寫文章,抑或瀏覽這個話題的相關內容。我說的就是新一代 Web,基于分布式和區塊鏈技術:Web3。


          他們說這是 Web 的未來。它也完全依賴 JS,至少目前是這樣。


          雖然你不會很快使用 JavaScript 編寫智能以太坊合約,但你將使用Web3.js等庫與區塊鏈交互來創建自己的 dApp(你的分布式應用程序)。


          如果需要,你甚至可以使用 JavaScript 創建自己的區塊鏈。這仍然是一個全新的領域,很難準確預測它將如何演變,但我可以肯定的是,JS 將在這一演變中發揮重要作用。

          用于移動開發的 JavaScript


          考慮到我們多年來一直有能力使用 JS 為移動設備編寫混合應用程序,這個主題大家都應該很熟悉了。


          但是感謝 React Native 之類的項目,你還可以創建使用手機的原生 API 來渲染 UI 的應用程序。這種路徑在性能上絕對優于混合方法,并且由于它依舊兼容主流移動操作系統,你仍然可以獲得在所有平臺上使用單一語言的好處。


          Skype、Facebook、Uber、Discord 等應用程序已經在利用這種原生技術了,這很明顯地告訴了我們移動行業的未來會是什么樣子:由 JavaScript 打造。


          有人可能會說,在接下來的幾年內我們將不斷看到 JavaScript 的新用例出現在各種各樣的地方。這種觀點可能是正確的,因為這種語言自身的演變趨勢表明,它正在適應其不知疲倦的社區不斷創造出來的新需求,這個社區希望讓 JS 無處不在。


          我們接下來還會在哪里看到 JavaScript 呢?我的猜測是,一旦我們意識到它是多么強大的工具,以及將它嵌入到可穿戴等設備上是多么容易,我們就會在更多設備中看到它。一旦游戲工作室開始意識到這種語言的力量及其游戲制作能力,我們也將在游戲主機上見到它的身影。


          你呢?你認為 JavaScript 在不久的將來會出現在哪里?


          原文鏈接:https://blog.bitsrc.io/a-future-made-of-javascript-5ab417f34355

          . this 適合你嗎?

          我看到許多文章在介紹 JavaScript 的 this 時都會假設你學過某種面向對象的編程語言,比如 Java、C++ 或 Python 等。但這篇文章面向的讀者是那些不知道 this 是什么的人。我盡量不用任何術語來解釋 this 是什么,以及 this 的用法。

          也許你一直不敢解開 this 的秘密,因為它看起來挺奇怪也挺嚇人的。或許你只在 StackOverflow 說你需要用它的時候(比如在 React 里實現某個功能)才會使用。

          在深入介紹 this 之前,我們首先需要理解函數式編程和面向對象編程之間的區別。

          2. 函數式編程 vs 面向對象編程

          你可能不知道,JavaScript 同時擁有面向對象和函數式的結構,所以你可以自己選擇用哪種風格,或者兩者都用。

          我在很早以前使用 JavaScript 時就喜歡函數式編程,而且會像躲避瘟疫一樣避開面向對象編程,因為我不理解面向對象中的關鍵字,比如 this。我不知道為什么要用 this。似乎沒有它我也可以做好所有的工作。

          而且我是對的。

          在某種意義上 。也許你可以只專注于一種結構并且完全忽略另一種,但這樣你只能是一個 JavaScript 開發者。為了解釋函數式和面向對象之間的區別,下面我們通過一個數組來舉例說明,數組的內容是 Facebook 的好友列表。

          假設你要做一個 Web 應用,當用戶使用 Facebook 登錄你的 Web 應用時,需要顯示他們的 Facebook 的好友信息。你需要訪問 Facebook 并獲得用戶的好友數據。這些數據可能是 firstName、lastName、username、numFriends、friendData、birthday 和 lastTenPosts 等信息。

          const data=[
           {
           firstName: 'Bob',
           lastName: 'Ross',
           username: 'bob.ross', 
           numFriends: 125,
           birthday: '2/23/1985',
           lastTenPosts: ['What a nice day', 'I love Kanye West', ...],
           },
           ...
          ]
          

          假設上述數據是你通過 Facebook API 獲得的。現在需要將其轉換成方便你的項目使用的格式。我們假設你想顯示的好友信息如下:

          • 姓名,格式為`${firstName} ${lastName}`
          • 三篇隨機文章
          • 距離生日的天數


          3. 函數式方式

          函數式的方式就是將整個數組或者數組中的某個元素傳遞給某個函數,然后返回你需要的信息:

          const fullNames=getFullNames(data)
          // ['Ross, Bob', 'Smith, Joanna', ...]
          

          首先我們有 Facebook API 返回的原始數據。為了將其轉換成需要的格式,首先要將數據傳遞給一個函數,函數的輸出是(或者包含)經過修改的數據,這些數據可以在應用中向用戶展示。

          我們可以用類似的方法獲得隨機三篇文章,并且計算距離好友生日的天數。

          函數式的方式是:將原始數據傳遞給一個函數或者多個函數,獲得對你的項目有用的數據格式。

          4. 面向對象的方式

          對于編程初學者和 JavaScript 初學者,面向對象的概念可能有點難以理解。其思想是,我們要將每個好友變成一個對象,這個對象能夠生成你一切開發者需要的東西。

          你可以創建一個對象,這個對象對應于某個好友,它有 fullName 屬性,還有兩個函數 getThreeRandomPosts 和 getDaysUntilBirthday。

          function initializeFriend(data) {
           return {
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from data.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use data.birthday to get the num days until birthday
           }
           };
          }
          const objectFriends=data.map(initializeFriend)
          objectFriends[0].getThreeRandomPosts() 
          // Gets three of Bob Ross's posts
          

          面向對象的方式就是為數據創建對象,每個對象都有自己的狀態,并且包含必要的信息,能夠生成需要的數據。

          5. 這跟 this 有什么關系?

          你也許從來沒想過要寫上面的 initializeFriend 代碼,而且你也許認為,這種代碼可能會很有用。但你也注意到,這并不是真正的面向對象。

          其原因就是,上面例子中的 getThreeRandomPosts 或 getdaysUntilBirtyday 能夠正常工作的原因其實是閉包。因為使用了閉包,它們在 initializeFriend 返回之后依然能訪問 data。關于閉包的更多信息可以看看這篇文章:作用域和閉包(https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md)。

          還有一個方法該怎么處理?我們假設這個方法叫做 greeting。注意方法(與 JavaScript 的對象有關的方法)其實只是一個屬性,只不過屬性值是函數而已。我們想在 greeting 中實現以下功能:

          function initializeFriend(data) {
           return {
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from data.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use data.birthday to get the num days until birthday
           },
           greeting: function() {
           return `Hello, this is ${fullName}'s data!`
           }
           };
          }
          

          這樣能正常工作嗎?

          不能!

          我們新建的對象能夠訪問 initializeFriend 中的一切變量,但不能訪問這個對象本身的屬性或方法。當然你會問,

          難道不能在 greeting 中直接用 data.firstName 和 data.lastName 嗎?

          當然可以。但要是想在 greeting 中加入距離好友生日的天數怎么辦?我們最好還是有辦法在 greeting 中調用 getDaysUntilBirthday。

          這時輪到 this 出場了!



          6. 終于——this 是什么

          this 在不同的環境中可以指代不同的東西。默認的全局環境中 this 指代的是全局對象(在瀏覽器中 this 是 window 對象),這沒什么太大的用途。而在 this 的規則中具有實用性的是這一條:

          如果在對象的方法中使用 this,而該方法在該對象的上下文中調用,那么 this 指代該對象本身。

          你會說“在該對象的上下文中調用”……是啥意思?

          別著急,我們一會兒就說。

          所以,如果我們想從 greeting 中調用 getDaysUntilBirtyday 我們只需要寫 this.getDaysUntilBirthday,因為此時的 this 就是對象本身。

          附注:不要在全局作用域的普通函數或另一個函數的作用域中使用 this!this 是個面向對象的東西,它只在對象的上下文(或類的上下文)中有意義。

          我們利用 this 來重寫 initializeFriend:

          function initializeFriend(data) {
           return {
           lastTenPosts: data.lastTenPosts,
           birthday: data.birthday, 
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from this.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use this.birthday to get the num days until birthday
           },
           greeting: function() {
           const numDays=this.getDaysUntilBirthday() 
           return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
           }
           };
          }
          

          現在,在 initializeFriend 執行結束后,該對象需要的一切都位于對象本身的作用域之內了。我們的方法不需要再依賴于閉包,它們只會用到對象本身包含的信息。

          好吧,這是 this 的用法之一,但你說過 this 在不同的上下文中有不同的含義。那是什么意思?為什么不一定會指向對象自己?

          有時候,你需要將 this 指向某個特定的東西。一種情況就是事件處理函數。比如我們希望在用戶點擊好友時打開好友的 Facebook 首頁。我們會給對象添加下面的 onClick 方法:

          function initializeFriend(data) {
           return {
           lastTenPosts: data.lastTenPosts,
           birthday: data.birthday,
           username: data.username, 
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from this.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use this.birthday to get the num days until birthday
           },
           greeting: function() {
           const numDays=this.getDaysUntilBirthday() 
           return `Hello, this is ${this.fullName}'s data! It is ${numDays} until ${this.fullName}'s birthday!`
           },
           onFriendClick: function() {
           window.open(`https://facebook.com/${this.username}`)
           }
           };
          }
          

          注意我們在對象中添加了 username 屬性,這樣 onFriendClick 就能訪問它,從而在新窗口中打開該好友的 Facebook 首頁。現在只需要編寫 HTML:

          <button id="Bob_Ross">
           <!-- A bunch of info associated with Bob Ross -->
          </button> 
          

          還有 JavaScript:

          const bobRossObj=initializeFriend(data[0])
          const bobRossDOMEl=document.getElementById('Bob_Ross')
          bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)
          

          在上述代碼中,我們給 Bob Ross 創建了一個對象。然后我們拿到了 Bob Ross 對應的 DOM 元素。然后執行 onFriendClick 方法來打開 Bob 的 Facebook 主頁。似乎沒問題,對吧?

          有問題!

          哪里出錯了?

          注意我們調用 onclick 處理程序的代碼是 bobRossObj.onFriendClick。看到問題了嗎?要是寫成這樣的話能看出來嗎?

          bobRossDOMEl.addEventListener("onclick", function() {
           window.open(`https://facebook.com/${this.username}`)
          })
          

          現在看到問題了嗎?如果把事件處理程序寫成 bobRossObj.onFriendClick,實際上是把 bobRossObj.onFriendClick 上保存的函數拿出來,然后作為參數傳遞。它不再“依附”在 bobRossObj 上,也就是說,this 不再指向 bobRossObj。它實際指向全局對象,也就是說 this.username 不存在。似乎我們沒什么辦法了。

          輪到綁定上場了!



          7. 明確綁定 this

          我們需要明確地將 this 綁定到 bobRossObj 上。我們可以通過 bind 實現:

          const bobRossObj=initializeFriend(data[0])
          const bobRossDOMEl=document.getElementById('Bob_Ross')
          bobRossObj.onFriendClick=bobRossObj.onFriendClick.bind(bobRossObj)
          bobRossDOMEl.addEventListener("onclick", bobRossObj.onFriendClick)
          

          之前,this 是按照默認的規則設置的。但使用 bind 之后,我們明確地將 bobRossObj.onFriendClick 中的 this 的值設置為 bobRossObj 對象本身。

          到此為止,我們看到了為什么要使用 this,以及為什么要明確地綁定 this。最后我們來介紹一下,this 實際上是箭頭函數。

          8. 箭頭函數

          你也許注意到了箭頭函數最近很流行。人們喜歡箭頭函數,因為很簡潔、很優雅。而且你還知道箭頭函數和普通函數有點區別,盡管不太清楚具體區別是什么。

          簡而言之,兩者的區別在于:

          在定義箭頭函數時,不管 this 指向誰,箭頭函數內部的 this 永遠指向同一個東西。

          嗯……這貌似沒什么用……似乎跟普通函數的行為一樣啊?

          我們通過 initializeFriend 舉例說明。假設我們想添加一個名為 greeting 的函數:

          function initializeFriend(data) {
           return {
           lastTenPosts: data.lastTenPosts,
           birthday: data.birthday,
           username: data.username, 
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from this.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use this.birthday to get the num days until birthday
           },
           greeting: function() {
           function getLastPost() {
           return this.lastTenPosts[0]
           }
           const lastPost=getLastPost() 
           return `Hello, this is ${this.fullName}'s data!
           ${this.fullName}'s last post was ${lastPost}.`
           },
           onFriendClick: function() {
           window.open(`https://facebook.com/${this.username}`)
           }
           };
          }
          

          這樣能運行嗎?如果不能,怎樣修改才能運行?

          答案是不能。因為 getLastPost 沒有在對象的上下文中調用,因此getLastPost 中的 this 按照默認規則指向了全局對象。

          你說沒有“在對象的上下文中調用”……難道它不是從 initializeFriend 返回的內部調用的嗎?如果這還不叫“在對象的上下文中調用”,那我就不知道什么才算了。

          我知道“在對象的上下文中調用”這個術語很模糊。也許,判斷函數是否“在對象的上下文中調用”的好方法就是檢查一遍函數的調用過程,看看是否有個對象“依附”到了函數上。

          我們來檢查下執行 bobRossObj.onFriendClick() 時的情況。“給我對象 bobRossObj,找到其中的 onFriendClick 然后調用該屬性對應的函數”。

          我們同樣檢查下執行 getLastPost() 時的情況。“給我名為 getLastPost 的函數然后執行。”看到了嗎?我們根本沒有提到對象。

          好了,這里有個難題來測試你的理解程度。假設有個函數名為 functionCaller,它的功能就是調用一個函數:

          functionCaller(fn) {
           fn()
          }
          

          如果調用 functionCaller(bobRossObj.onFriendClick) 會怎樣?你會認為 onFriendClick 是“在對象的上下文中調用”的嗎?this.username有定義嗎?

          我們來檢查一遍:“給我 bobRosObj 對象然后查找其屬性 onFriendClick。取出其中的值(這個值碰巧是個函數),然后將它傳遞給 functionCaller,取名為 fn。然后,執行名為 fn 的函數。”注意該函數在調用之前已經從 bobRossObj 對象上“脫離”了,因此并不是“在對象的上下文中調用”的,所以 this.username 沒有定義。

          這時可以用箭頭函數解決這個問題:

          function initializeFriend(data) {
           return {
           lastTenPosts: data.lastTenPosts,
           birthday: data.birthday,
           username: data.username, 
           fullName: `${data.firstName} ${data.lastName}`,
           getThreeRandomPosts: function() {
           // get three random posts from this.lastTenPosts
           },
           getDaysUntilBirthday: function() {
           // use this.birthday to get the num days until birthday
           },
           greeting: function() {
           const getLastPost=()=> {
           return this.lastTenPosts[0]
           }
           const lastPost=getLastPost() 
           return `Hello, this is ${this.fullName}'s data!
           ${this.fullName}'s last post was ${lastPost}.`
           },
           onFriendClick: function() {
           window.open(`https://facebook.com/${this.username}`)
           }
           };
          }
          

          上述代碼的規則是:

          在定義箭頭函數時,不管 this 指向誰,箭頭函數內部的 this 永遠指向同一個東西。

          箭頭函數是在 greeting 中定義的。我們知道,在 greeting 內部的 this 指向對象本身。因此,箭頭函數內部的 this 也指向對象本身,這正是我們需要的結果。

          9. 結論

          this 有時很不好理解,但它對于開發 JavaScript 應用非常有用。本文當然沒能介紹 this 的所有方面。一些沒有涉及到的話題包括:

          • call 和 apply;
          • 使用 new 時 this 會怎樣;
          • 在 ES6 的 class 中 this 會怎樣。

          我建議你首先問問自己在這些情況下的 this,然后在瀏覽器中執行代碼來檢驗你的結果。

          原文地址:https://mp.weixin.qq.com/s/L9eac6rzkSE_JqxXyg3FQw

          020 年的技術熱潮之下,我們該如何迎刃而上,需要具備哪些技術棧?如果你是一名前端開發者,不妨通過本文了解頂級的 JavaScript 框架以及未來趨勢預探,來升級自己的技能吧!

          作者 | Eric Elliott

          譯者 | 蘇本如,責編 | 屠敏

          頭圖 | CSDN 下載自視覺中國

          出品 | CSDN(ID:CSDNnews)

          以下為譯文:

          如果你想找到一份很棒的JavaScript工作,或者趕上2020年的重要技術,以及今后十年的重要技術,那么這篇文章就是為你準備的。本文的重點不是告訴你哪些技術堆棧和框架是“最佳”,最受大家喜愛或者最受歡迎的技術,而是告訴你哪些技術堆棧和框架能夠為你提供在2020年及以后獲得一份出色工作的最佳機會。

          我們將研究以下不同來源的數據:

          • 谷歌搜索的趨勢:https://trends.google.com/trends/

          • State of JS調查報告:https://2019.stateofjs.com/

          • Stack Overflow調查報告:https://insights.stackoverflow.com/survey/2019

          • Npm下載量:https://npm-stat.com/charts.html?package=react&package=vue&package=%40angular%2Fcore&package=svelte&package=jquery&from=2015-12-30&to=2019-12-30

          • Indeed.com上發布的空缺職位總數:https://www.indeed.com/

          這些指標都不是完美的,但就本文的目的而言,npm下載次數和Indeed.com職位發布數量應該給予最大的權重,當我們綜合考慮這些指標時,它們可以清晰、一致地描繪JavaScript技術的前景和趨勢。根據這些指標選擇一個學習框架是一個好主意嗎?那首先要取決于你的目標是什么。

          因為我們有一個明確的目標:求職者學習的投資回報率。這就使得這項任務比告訴你什么對每個人都是最好的要容易得多。雖然沒有一種方法是萬能的,但客觀地定義什么可以最大程度地實現特定的具體目標是很容易的。讓我們來看看一些數據。

          首先,學習JavaScript

          在你過多地擔心技術堆棧之前,請先學習JavaScript以及如何使用它來編寫軟件。如果你無法解釋什么是函數組合、對象組合和模塊,請從這里開始。所有的軟件開發都是某種組合:我們把一個大的、復雜的問題分解成一些小的問題,然后使用軟件構建塊(如函數、對象、模塊等等)來解決它們。我們將這些解決方案組合起來形成我們的應用程序。從2020年開始,請充分理解JavaScript和軟件組合。

          React在2019年占據主導地位,2020年可能繼續

          我喜歡npm下載量這個指標,因為它很好地表明了框架的活躍使用情況(*)。行業常用框架統計給于npm下載量的權重非常之高,原因是因為用戶需要在其本地機器上運行npm install。

          此處jQuery被排除在外,原因是許多jQuery項目都是不使用npm的舊項目,因此無論如何它都會被嚴重低估。Svelte被包括進來,是為了提供一些有關其在市場上的相對地位的見解,并解釋其在其他圖表中的缺失。目前還沒有足夠的數據讓Svelte在圖表中顯示有意義的內容。例如,在Google搜索趨勢中,它還不是一個可用的主題。

          空缺職位總數

          下面這張圖表顯示了各特定框架的當前空缺職位總數統計(*):

          2019年12月各UI框架空缺職位統計(數據來源:indeed.com)

          與去年相比,React擴大了領先優勢,而Angular和jQuery都輸給了Vue。下面是一個餅圖,顯示了每個框架的相對就業市場份額:

          頂級框架的就業市場份額

          JavaScript開發人員的平均工資在2019年再次增長,從每年的11.1萬美元增加到每年的11.4萬美元(這里是數據來源)。

          (*)統計方法:職位搜索是在indeed.com網站進行的。為了排除誤報,我將搜索與關鍵字“software”配對,以增強其相關性,然后乘以~1.5(大致相當于使用“software”和不使用“software”的編程職位列表之間的差異)。所有搜索結果頁(SERPs)都按日期排序并抽查其相關性。得到的數字并非100%準確,但對于本文中使用的相對近似值來說,它們已經足夠好了。

          谷歌搜索趨勢

          數據來源:https://trends.google.com/trends/explore?date=2017-01-01%202019-12-01&q=%2Fm%2F012l1vxv,%2Fg%2F11c6w0ddw9,%2Fg%2F11c0vmgx5d,%2Fm%2F0268gyp

          正如你所料,搜索興趣(*)反映了就業市場份額,但存在一些有趣的差異。我們可以清楚地看到,從2017年到現在,人們對jQuery的興趣在減弱,并且Vue.js搜索興趣正在強勁增長。以下是各框架在谷歌搜索統計中所占的份額:

          上圖與職位空缺的統計結果一致:React擁有強大的領先優勢,吸引了36%的前端框架搜索量,其次是Angular(約占27%)和jQuery(約占25%)。對Vue.js的搜索興趣遠遠大于它在就業市場的份額,但該數據與排名中的就業市場數據基本一致。看來我們已經成功地證實了這一點。

          (*)統計方法:對于所有搜索,數據都是按主題收集的,而不是按搜索詞收集,以便從無關的關鍵字匹配中剔除誤報。

          未來值得關注的框架

          現在更多的職位需要具有React框架技能,而不是其他受歡迎但使用不那么廣泛的框架,如Svelte或Vue,這兩個框架都有很高的滿意度,但行業采用率相對要小得多。

          學習Svelte或Vue框架可能會很酷。但是如果你的目標是找到一份工作,那么如果先學習React,你會有更好的機會。

          話雖如此,在《2019年JavaScript狀態調查報告》中,Svelte和Vue的用戶滿意度得分都非常高。在過去,React框架的高用戶滿意度得分預示了它相對于Angular框架的快速增長。Angular框架在當時也占據了主導地位,但其用戶滿意度得分卻相對較低。

          在2019年,React框架的用戶滿意度排名最高,達到89%。緊跟其后的包括Svelte(88%)和Vue.js(87%,低于上一年的91%)。Svelte或Vue不太可能會搶走足夠的React用戶,但是許多仍在使用Angular和jQuery的用戶,他們可能會轉而使用Svelte或Vue,從而在2020年推動這兩個框架的進一步強勁增長。

          可以肯定的是,掌握React框架將會增加你的機會,幫助你在2020年找到并守住一份很棒的工作。

          TypeScript vs JavaScript

          毫無疑問,在過去幾年中,TypeScript的發展非常迅速,根據JavaScript現狀調查報告(State of JS Survey),89%的TypeScript用戶會再次使用它,66%的調查對象要么使用TypeScript,要么對使用TypeScript感興趣(比最低年份的71%略有下降)。

          但是,盡管人們的興趣確實很強,并且使用率似乎正在迅速增長,但在就業市場上,擁有TypeScript方面的經驗還不是很搶手。只有大約7%的JavaScript空缺職位的職位描述中提到TypeScript(數據來源)。這個數字對TypeScript的職位需求可能有些低估,因為招聘經理們希望JavaScript開發人員能夠輕松地使用TypeScript,因此他們有可能不會在工作崗位描述中提及TypeScript。

          我堅持認為TypeScript語言的投資回報率可能較低甚至為負。它可能會損害而不是提高你的生產率,并且,如果你已經在使用諸如TDD,代碼審查和設計審查等優秀的缺陷預防工具,那么使用TypeScript編寫代碼不太可能帶來明顯的降低缺陷的好處。

          話雖如此,TypeScript有很多值得熱愛的地方,你當然不應該害怕它,或者拒絕一份工作,僅僅因為它們使用的是TypeScript而不是JavaScript。另外TypeScript是JavaScript的超集,因此從JavaScript轉到TypeScript并不像學習完全不同的語言那樣具有挑戰性。

          你可能不需要學習TypeScript語言就可以在2020年的就業市場競爭中脫穎而出,但是TypeScript引擎非常有用,即使對于標準JavaScript也是如此。

          我每天都使用TypeScript引擎為使用VS Code編寫的標準JavaScript提供智能感知(Intellisense)。甚至可以使用JSDoc(TypeScript引擎能夠理解和解釋JSDoc,就像解釋類型注釋一樣)或外部d.ts文件來增強這種智能感知,并且VS Code將自動獲取你使用的模塊的TypeScript定義。

          多年來我一直使用并享受TernJS和Atom的組合帶來的類似的好處,但是這種組合缺少TypeScript引擎 + VS Code的維護和社區支持。

          如果您尚未嘗試使用Visual Studio(VS) Code,你可能要從那里開始。順便說一句,根據JS現狀調查的受訪者的反饋,VS Code占據了JavaScript IDE市場的主導地位,市場份額為57%,其次是WebStorm,市場份額為14%。

          數據管理

          Redux在狀態管理器的競賽中仍然處于領先地位,但是GraphQL和Apollo在滿意度和興趣上都有所提高。預計GraphQL在2020年將持續增長。

          也就是說,即使你在使用GraphQL,我仍然認為有充分的理由來學習Redux狀態管理,而且我認為每個人都會從學習Redux中受益,即使他們不使用這個框架。

          GraphQL是近年來流行的一種查詢語言。它具有簡單的語法,但是因為它是跨整個堆棧使用的,并且學習它需要學習如何將它連接到數據存儲層,因此集成起來可能令人生畏,但值得付出努力。

          GraphQL不會在短期內完全取代JSON REST API,但是它在2019年的增長很快,我預計其強勁增長將持續到2020年。

          后臺框架

          Express是占主導地位的Node框架,它的滿意度非常高,到2020年也不會有強勁的挑戰者,但是隨著無服務器(serverless)的興起,我希望隨著新的十年的到來,Express的統治地位將逐漸下降。

          Next.js是一個全棧React框架,最初是在Express之上構建的,但此后從Express切換到無服務器和靜態優化,它像發瘋似地快速增長起來。

          當我們將EricElliottJS.com從Express切換到無服務器的Next.js時,我們的主機托管費用減少了90%,并且頁面加載速度變得更快。所以我無論多么強烈推薦它都不過分。現在,對于所有的應用程序,我們都使用了Next.js和Zeit托管。

          測試

          Jest和Cypress分別在單元測試和功能測試中最受歡迎,但是我非常喜歡RITEWay和TestCafe。RITEWay是一個測試框架,它始終回答每個單元測試必須回答的5個問題。

          TestCafe和Cypress一樣,是一個功能測試工具。有了它,你就不再需要和Selenium抗爭,它具有更好的跨瀏覽器支持和出色的測試記錄器/集成開發環境(IDE)。我強烈建議QA團隊嘗試TestCafe。

          功能性工具

          Lodash,Ramda,Immer,Redux和RxJS是我經常使用的功能性工具。

          Ramda在2019年取得了長足發展,并提供了Lodash所不具備的一些特性,包括lense和transducer。RxJS通過其管道化運算符提供了transducer樣式功能。

          Immer使得在JavaScript對象上操作因無需對其進行轉換而變得更加容易。Redux是一個狀態管理工具。

          2020年的科技預覽

          在未來十年,有幾項新興技術將對人類生活產生巨大影響。以下是這些技術的最新概況:

          人工智能

          人工智能可能是有史以來最具變革性的技術。許多學者和自以為是的億萬富翁們都將人工智能描述成一個神奇的烏托邦,或者說是人類的末日。

          正如我們所知,它當然可能是人類的終結,但也可能是人類和機器之間完美合作的開始。我們才剛剛開始對人工智能可能會變成什么樣有了粗淺的一瞥。其中有些很嚇人(比如deep fakes換臉術),有些則非常有用(比如Adobe Premiere為視頻編輯新推出的自動重構(auto-reframe)功能)。到目前為止,事實是人工智能既令人難以置信的可怕,又非常有用。人工智能將繼續產生一些令人恐懼的東西,但是通過人工智能改善人類生活的潛力也是巨大的。潘多拉的盒子已經打開,再也無法關閉了,所以我希望你能好好利用它來解決重要問題,改善我們的生活。

          2019年人工智能領域有許多重要突破。近年來,研究團隊一直在各種視頻游戲中爭奪超人的表現,但某些類別的游戲仍然對人工智能構成挑戰,包括《星際爭霸II》之類的長期戰略游戲。DeepMind的AlphaStar程序(一種人工智能)已經在官方的Battle.net服務器上使用與人類玩家相同的資源,達到了頂級玩家的水平。《星際爭霸》是一款復雜的游戲,涉及長期的戰略思維,一度被認為超出了人工智能的能力。戰略思維是走向通用人工智能的重要里程碑。

          如果這些游戲看起來像是愚蠢地使用了資源,那么不妨考慮一下,像DeepMind這樣的項目在文本到語音方面也取得了令人難以置信的進步,這可以讓人工智能代理和私人助理發出更自然的聲音,而且更重要的是,可以把聲音還給失去它們的人類。

          人工智能還被用于診斷癌癥、預測蛋白質折疊(可用于了解疾病和發現新藥)、恢復殘疾人的肢體控制、生成逼真的照片等(資料來源:https://www.stateof.ai/)。

          無人駕駛汽車在變革性的人工智能技術中應該有自己的一席之地。這個生態系統中的主要參與者包括Cruise、優步、Waymo、Nuro、Aurora、福特等。現在它還處于初期,過分樂觀已經給這個行業帶來了真正的問題,但毫無疑問,我們將在21世紀20年代看到超越人類的自動駕駛能力。在2015年的時候,我對無人駕駛做出了如下預測:

          “到2045年,一個人駕駛的小車看起來就像一匹馬拉著的輕便馬車。”

          5年后,我想我可能低估了無人駕駛汽車的上市速度。2018年,Waymo汽車的行駛里程超過100萬英里,美國24個城市的公共道路上都有無人駕駛汽車在行駛。今天,我預計到2025年,來自多家制造商的多種車型將實現5級完全自動駕駛。請關注特斯拉、通用、福特和寶馬。

          在過去的十年中,人工智能研究論文的發表量增長了10倍,現在人工智能正把實用、有幫助的工具交到主流用戶手中,預計這一趨勢將持續到新的十年。

          我們已經開始看到人工智能做了很多幾年前大多數人都不敢相信的事情。期待人工智能在下一個十年創造出更加驚人的奇跡。

          區塊鏈和加密貨幣

          2019年是區塊鏈和加密貨幣領域具有里程碑意義的一年。區塊鏈技術開始進入主流。我預計2020年會有更多的增長和主流采用。

          DeFi(去中心化金融)爆炸式增長,實現了用戶友好,無許可,無銀行借貸。目前DeFi合同的總金額已經有6.5億美元(包括4.5億美元的無銀行貸款),而2019年只是這項技術可用的第一年。隨著越來越多的人投資于加密貨幣,我預測未來會有更多的加密貨幣支持的DeFi貸款。

          人們可以在不犧牲其加密投資機會成本的情況下獲得流動性,或使用DeFi貸款以杠桿效應投資加密貨幣(增加其投資的風險/回報)。

          加密貨幣和區塊鏈技術正在突破主流。比特幣和以太坊的每日活躍地址在2018年1月達到峰值,隨后一年由于市場低迷而興趣減弱(每上漲10倍,加密貨幣的價格就會大幅回落,然后在下一個周期比之前的峰值再高出10倍)。

          比特幣和以太坊區塊鏈上的每日活動地址統計(數據來源:https://coinmetrics.io/charts/#assets=btc,eth_log=false_roll=90_left=AdrActCnt_zoom=1279411200000,1577836800000)

          • Square的Cash App擁有超過1000萬次的安卓版下載量。用戶可以在一個擁有出色用戶體驗的簡單應用程序中購買、出售、發送和接收比特幣。

          • Coinbase的安卓版下載量超過1000萬次。

          • Brave推出了內置以太坊錢包,每月活躍用戶(MAU)的數量從10月的870萬增加到11月底的1040萬。

          • 借助Sliver.tv和DLive,2000萬視頻游戲迷正在使用Theta網絡進行分散流媒體播放。

          2019年我最喜歡的變化是Fortmatic的引入。無論你是否正在構建加密應用程序,你都可以使用Fortmatic來替代你的用戶身份驗證并提高安全性、你還可以擺脫供應商鎖定,并添加諸如端到端加密、簽名事務等功能。

          如果你打算在2020年構建一個新的應用程序,考慮使用Fortmatic,而不是重復使用你自己的用戶名/密碼認證(2020年應該沒有人再這么做),或者將身份認證授權給谷歌、Facebook等。

          我寫過一篇文章,討論如何利用加密技術來改善應用程序的身份驗證和安全性。我很期待看到主流應用在2020年采用像Fortmatic這樣的技術。

          以太坊在2019年輕松贏得了智能合約平臺競賽。我預計它將在2020年繼續占據主導地位。

          擴展現實(XR)

          從2015年開始,我每年都會寫一篇關于對AR(增強現實)的期許的文章,從小我就一直夢想著它的實現。未來,擴展現實(XR)將取代手機。這只是時間問題。但是還需要多久是個懸而未決的問題。但現在看來這種轉變可能在未來十年內出現。甚至可能在未來5年內開始。

          由于虛擬現實(VR)和增強現實(AR)之間的界限已經模糊,因此業界現在將整個領域稱為擴展現實(XR)。自推出以來,ARKit和ARCore(蘋果和谷歌的增強現實SDK)增長量驚人。從2017年到2019年5月,每月活躍用戶從4,700萬增長到了1.5億。

          WebAR在2019年站穩了腳跟,并且有可能在2020年繼續增長。如果你好奇的話,可以查看AR.js、React 360或Viro React。

          硬件方面也有了長足進步。HoloLens 1在2016年首次發布開發者版本時,售價約為5,000美元。在那以后發生了什么?

          HoloLens 2仍然只售3,500美元,而且還沒有為消費者做好準備。剪輯、防抖動和漂移、視場等方面仍然存在問題,你不會想整天穿著這些東西。不過,由于99美元/月的定價,獲得一個開發者版本變成了一個可能性,即使你不得不在等待名單等上一段時間。

          無人機

          大約200萬架無人機已經在美國售出,它們已經改變了建筑、地理調查、測繪、電影、航空攝影、農業、環境科學和娛樂業。很有可能,商用無人機的交付最終將于2020年在美國實現。。

          FPV無人機比賽是我最喜歡的觀賞性體育運動,無人機比賽聯盟的直播流比賽也是。如果你想了解它是什么樣的,他們也有一個精心設計的模擬器。

          所有這些新的無人機活動都需要很多軟件,包括圖像處理、無人機地圖軟件、交付飛行計劃、遙測記錄和處理、分析、工業應用集成等。

          無人機和人工智能也有很多重疊之處。自動飛行的無人機需要圖像處理、避免碰撞等。

          結論

          21世紀10年代給我們帶來了許多變革性的技術,它們當中的許多我們已經視為理所當然,但是產生了巨大影響:

          • Instagram

          • Spotify

          • 優步

          • 虛擬助理

          • 無線耳塞

          • 主流虛擬現實

          • 增強現實(如在突破命中游戲“神奇寶貝”中所用)

          • 價格合理的特斯拉

          • 共享經濟(汽車、踏板車、自行車)

          • 主流平板電腦

          • 主流生物識別技術(觸摸識別、面部識別)

          • 眾籌

          我迫不及待想看到你在新的十年里的發展。

          讓我們變魔術吧!

          原文:https://medium.com/javascript-scene/top-javascript-frameworks-and-topics-to-learn-in-2020-and-the-new-decade-ced6e9d812f9

          本文為 CSDN 翻譯,轉載請注明來源出處。


          主站蜘蛛池模板: 蜜臀AV在线播放一区二区三区| 无码人妻精品一区二区三区久久| 亚洲一区二区三区播放在线| 日亚毛片免费乱码不卡一区| 蜜桃视频一区二区| 无码国产精品一区二区高潮| 国产精品综合一区二区| 日韩精品一区二区午夜成人版| 国产精品毛片a∨一区二区三区| 国产精品免费综合一区视频| 精品国产一区二区三区AV性色| 亚洲色无码一区二区三区| 69福利视频一区二区| 欧洲精品一区二区三区| 99精品高清视频一区二区| 少妇激情av一区二区| 无码精品一区二区三区| 一区二区高清在线| 久久精品免费一区二区三区| 国产精品电影一区| 国产精品一区三区| 色偷偷久久一区二区三区| 日韩免费视频一区| 精品国产亚洲一区二区三区| 2021国产精品视频一区| 国产精品一区二区香蕉| 无码人妻一区二区三区免费看| 久久久无码一区二区三区| 国产一区二区在线观看麻豆 | 亚洲欧美成人一区二区三区| 日本精品一区二区在线播放| 国产福利电影一区二区三区,日韩伦理电影在线福 | 精品国产区一区二区三区在线观看| 日本高清无卡码一区二区久久| 国产乱码精品一区二区三区中文 | 国产无人区一区二区三区 | 日韩精品无码一区二区中文字幕| 久久久国产精品无码一区二区三区 | 精品国产一区二区三区不卡| 国产精品乱码一区二区三区| 亚洲一区AV无码少妇电影|