javascript托管,事件托管 js

前端錯誤Uncaught TypeError: Cannot read property 'length' of null錯誤怎么處理？

通過統計數據庫中的1000多個項目，我們發現在 JavaScript 中最常出現的錯誤有10個。下面會向大家介紹這些錯誤發生的原因以及如何防止。

網站建設公司,為您提供網站建設,網站制作,網頁設計及定制網站建設服務,專注于企業網站設計,高端網頁制作,對成都履帶攪拌車等多個行業擁有豐富的網站建設經驗的網站建設公司。專業網站設計,網站優化推廣哪家好,專業成都網站推廣優化,H5建站,響應式網站。

1. Uncaught TypeError: Cannot Read Property

這是 JavaScript 開發人員最常遇到的錯誤。當你讀取一個屬性或調用一個未定義對象的方法時，Chrome 中就會報出這樣的錯誤。

導致這個錯誤發生的原因有很多，常見的一種情況是在渲染 UI 組件時，不正確地初始化狀態。我們來看一個真實的應用程序中發生這種情況的例子。

以上代碼有兩個重要方面：

一是組件的狀態（例如 this.state），在開始生命周期之前是 undefined 狀態。

二是當通過異步的方式獲取數據時，無論是在構造函數中 componentWillMount 中，還是在構造函數中提取 componentDidMount，組件在數據加載之前至少會渲染一次。當檢測首次渲染時，會發現 this.state.items 是未定義的。此時就會出現一個錯誤 -“Uncaught TypeError: Cannot read property ‘map’ of undefined" in the consol”。

解決的方法很簡單：在構造函數中使用合理的默認值進行狀態初始化。

2. TypeError: ‘undefined’ Is Not an Object (evaluating...)

這是在 Safari 中讀取屬性或調用未定義對象上的方法時發生的錯誤，這與 Chrome 的上述錯誤基本相同，只是 Safari 使用不同的錯誤消息。

3. TypeError: Null Is Not an Object (evaluating...)

這是在 Safari 中讀取屬性或調用空對象上的方法時發生的錯誤。

在實際情況中，導致這種錯誤的原因之一是：在元素加載之前，就嘗試在 JavaScript 中使用 DOM 元素。這是因為 DOM API 對于空白的對象引用返回 null。

任何執行和處理 DOM 元素的 JS 代碼，都應該在創建 DOM 元素之后執行。JS 代碼按照 HTML 中的規定自上而下進行解釋。因此，如果在 DOM 元素之前存在標簽，則腳本標簽內的 JS 代碼就會在瀏覽器分析 HTML 頁面時執行。如果在加載腳本之前尚未創建 DOM 元素，就會出現這樣的錯誤。

在這個例子中，我們可以通過添加一個事件偵聽器來解決這個問題，事件偵聽器會在頁面準備就緒時通知我們。一旦 addEventListener 被觸發，該 init( ) 方法就可以使用 DOM 元素。

4. (unknown): Script Error

當未捕獲的 JavaScript 錯誤違背跨邊界原則時，就會發生腳本錯誤。例如，如果將 JavaScript 代碼托管在 CDN 上，則任何未被捕獲的錯誤（通過 window.onerror 處理程序發出的錯誤，而不是 try-catch 中捕獲到的錯誤）將僅報告為“腳本錯誤”。這是瀏覽器的一種安全措施，主要用于防止跨域傳遞數據的情況出現。

要獲取真實的錯誤消息，需要執行以下操作：

Access-Control-Allow-Origin

將

Access-Control-Allow-Origin 設置為 *， 表示可以從任何域正確訪問資源。* 如有必要，也可以用自己的域名進行替換，例如：

Access-Control-Allow-Origin: 。

以下是在各種環境中設置的一些示例：

在腳本標簽上設置crossorigin =“anonymous”

在你的 HTML 源代碼中，為每一個腳本設置

Access-Control-Allow-Origin，在設置 SCRIPT 標簽中，設置 crossorigin="anonymous"。在將 crossorigin 屬性添加到腳本標簽之前，請確保正在向腳本文件發送 header。在 Firefox 中，如果 crossorigin 屬性存在但 Access-Control-Allow-Origin 標題不存在，則腳本不會執行。

5. TypeError: Object Doesn’t Support Property

當調用未定義的方法時，IE 中會發生這樣的錯誤。

這相當于 Chrome 中的 “undefined’ is not a function” 錯誤。對于相同的邏輯錯誤，不同的瀏覽器可能會有不同的錯誤消息。

這是在 IE 的 Web 應用程序中使用 JavaScript 命名空間出現的一個常見問題。出現這種情況的絕大部分原因是IE無法將當前名稱空間內的方法綁定到this關鍵字。例如，如果你有 JS Rollbar 方法的命名空間 isAwesome。通常，如果位于 Rollbar 命名空間內，則可以使用以下語法調用該 isAwesome 方法：

6. TypeError: ‘undefined’ Is Not a Function

當調用未定義的函數時，Chrome 中就會發生這樣的錯誤。

執行上面的代碼會導致以下錯誤：“Uncaught TypeError: undefined is not a function。” 發生以上錯誤的原因是，當你調用 setTimeout( ) 時，實際上是在調用 window.setTimeout( )，傳遞給 setTimeout( ) 的匿名函數是在窗口對象的上下文中定義的，而該窗口對象沒有 clearBoard( ) 方法。

符合舊版瀏覽器的解決方案是以變量的方式簡單地將引用保存在 this 中，然后通過閉包繼承。

成為Web前端開發工程師的學習指南

今天小編要跟大家分享的文章是關于成為web前端開發工程師的學習指南。想要學習web前端開發技術的小伙伴們來和小編一起看一看吧，希望本篇文章能夠對大家有所幫助。

1、首先確定你的目標或道路

我們將討論很多技術，趨勢和工具，但我們不希望您不知所措，因此你需要首先決定要成為一名Web開發人員要做什么，因為這將幫助你選擇合適的工具。和學習技術。成為Web開發人員的原因有很多，下面列出了一些選擇因素：

·你想作為一名Web開發人員在一家公司工作，這是最普遍的原因。

·你想以自由開發人員的身份來開始自己的業務或代理。

·你可以成為其他公司的顧問。

·你可以創建自己的應用來賺錢。

·編碼是你的業余愛好。

從上述感興趣或目標的領域，你可以選擇適用于你的目標的正確工具和技術。如果你的目標是成為一名前端開發人員，則可以選擇前端開發的工具和技術。后端和全棧開發也是如此。

2、Web開發的基本工具和軟件

·

計算機和操作系統：如果沒有計算機和操作系統，則無法編寫代碼。要學習Web開發，你不需要任何高端計算機(如果你擁有的話，那么更好)。你可以使用任何類型的中型筆記本電腦或臺式機。對于操作系統，可以使用適合你的MacOS，Windows(最新版本)或Linux。

·文本編輯器/

IDE：毫無疑問，VSCode適用于大多數情況和大多數語言。它具有良好的性能，出色的擴展性，內置的終端功能以及大量功能。在2019年StackOverFlow調查中，VSCode也是開發人員的首選。你還可以選擇其他一些不錯的選擇，例如Sublime

Text或Atom。如果我們談論IDE，那么是Visual

Studio(#或C#)，Eclipse和Netbeans(Java)。是不錯的選擇。

·

Web瀏覽器：大多數開發人員的首選是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。Firefox也取得了長足的進步，其中的一些好東西不在chrome瀏覽器中。兩種瀏覽器都有出色的開發工具，可以對Web開發中的問題進行故障排除。

·終端：您將使用一些系統命令來使用CLI進行很多工作。您可以將默認或第三方終端用于您的Web開發項目。Bash，Zsh，Powershell，Git

Bash，iTerm，Hyper這些都是可以使用的選項。

·設計(可選)：并不是每個人都需要學習。在公司中，有專門的團隊來制作圖像，徽標或草圖，但是如果您是自由職業者，則可能必須學習Adobe

XD，Photoshop，Sketch或Figma。

3、從HTML和CSS開始

HTML和CSS是Web開發的基本構建塊。無論您的Web應用程序有多先進，或者使用什么框架和后端語言，都必須使用HTML和CSS構建前端應用程序。因此，這是在Web開發中要學習的第一件事。

·HTML5(語義元素，屬性，文檔類型等)

·CSS基礎知識顏色，字體，位置，盒子模型等。

·CSSGrid和Flexbox對齊內容或創建列。

·CSS自定義屬性

4、響應式布局

您的應用程序應該在所有類型的設備(例如智能手機，平板電腦，臺式機，iPad或任何其他屏幕尺寸的設備)上都可以查看和使用。因此，了解創建響應式設計或布局非常重要。讓我們來看一些重要的主題。

·了解如何設置視口

·媒體查詢不同的屏幕尺寸。

·流體寬度

·雷姆單位

·移動優先

5、自定義可重用CSS組件

與其依賴大型的CSS框架(如Bootstrap)，不如創建自己的模塊化，可重用的CSS組件以在項目中使用。如果您構建自己的定制設計，則無需導入完整的庫。您創建只需要特定UI的組件。的新趨勢最近還出現了有助于更有效地編寫CSS代碼的代碼。如果你已經了解CSS，那么您無需在學習Saas上花費很多精力。Saas是CSS預處理程序，可為標準CSS添加更多功能并使其更加高效。你可以使用變量，嵌套，條件語句來減少CSS的重復并提高其效率。你還可以為每個可重用組件創建單獨的Saas文件。Sass確實節省了很多時間，所以你絕對應該在2020年學習它。

6、CSS框架

學習CSS框架的普及程度不如去年，但對于不擅長設計的開發人員而言，仍然非常相關或有用。有許多流行的CSS框架可供使用，其中一些如下。

·Bootstrap是最流行的CSS框架。學習引導程序也有助于學習其他框架。

·Tailwind

CSS是其他正在流行的框架，與其他框架幾乎沒有什么不同。它是一組實用程序類，因此您可以創建自己的按鈕和其他看起來與其他按鈕確實不同的東西。它們也是高度可定制的。

·物化

·布爾瑪

7、前端必須語言：JavaScript

學習HTML和CSS之后，接下來需要學習的是Vanilla

Javascript。對開發人員來說，掌握javascript基本知識非常重要。您將在服務器端語言(例如PHP，Python或#)中使用大量javascript，并且如果您想與React，Angular，NodeJS，Vue或任何其他javascript框架或庫一起使用，則非常需要學習這種語言。以下是你應該在javascript中涵蓋的一些重要主題

·JavaScript基礎知識(變量，數據類型，函數，條件等)

·DOM(文檔對象模型)

·JSON(JavaScript對象表示法)

·提取API(請求/響應/Ajax)

·如果您想轉向React，Vue，Angular或其他框架，現代JS(ES6)概念對于學習非常重要。

8、一些重要工具

Web開發中將使用一些工具。這些工具將幫助你進行調試，提高生產率，管理代碼，與其他開發人員合作以及類似的東西。讓我們討論其中一些工具。

·

Git(版本控制)和Github是您肯定會在2020年學習的最受歡迎的工具。Git在與其他開發人員協作和管理代碼方面有很多幫助。您還可以選擇其他一些選項，例如GitLab，Bitbucket和其他一些選項。

·

了解如何使用瀏覽器開發工具。無論是chrome還是firefox，您都應該知道如何使用不同的選項卡，例如元素選項卡，javascript控制臺，用于請求和響應的網絡選項卡，應用程序選項卡以及其他用于不同目的的選項卡。

·大多數IDE或文本編輯器都具有添加擴展名或插件的功能，這對提高生產力和構建Web應用程序非常有幫助。例如，Visual

Studio代碼中的VSCode擴展可幫助下載擴展，例如實時服務器或實時saas編譯器以與React一起使用。

·Emmet是另一個很棒的工具，它允許您編寫非常快速的HTML和CSS，這有助于提高開發人員的生產力。

·

學習使用javascript軟件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或庫(例如React)，那么這些軟件包管理器將使用很多，但是對于其他語言(例如Python或Php)，您將使用不同的軟件包管理器。

·

如果要在前端安裝NPM軟件包，則必須使用Webpack或Parcel。如果要創建自己的模塊，或者要將一個javascript文件帶到另一個javascript文件，則默認情況下不能僅使用瀏覽器來執行此操作，因此需要Webpack或Parcel對其進行捆綁。

9、基本部署

此時，一旦你知道應該為前端開發學習什么工具或技術，就需要知道如何在Internet上部署前端網站。如果你正在為小型企業構建一些小型應用程序，登錄頁面或個人站點，則無需學習AWS或DevOps，僅因為它們具有光澤和新潮。你將使事情變得更加復雜而不是簡單。你需要在2020年學習一些部署工具和步驟。

·域注冊(Namecheap，Google等)

·托管托管(InMotion，Hostgator，Bluehost等)

·靜態主機(Netlify，Github頁面)

·SSL證書。

·FTP，SFTP(文件傳輸協議)非常適合小型應用程序。

·SSH(安全外殼)，用于高級應用程序。

·CLI和Git。

到目前為止，我們討論的任何工具，技術趨勢或步驟都是前端開發的一部分。您尚不知道該框架，但可以為個人和小型企業構建網站，也可以構建適合移動設備的布局。您還可以使用到目前為止討論的工具或技術來部署小型應用程序或項目。如果您想申請工作，那么學習一些前端框架(如React，Vue或Angular)將是很棒的。

10、前端框架和狀態管理

框架使您可以進行更高級的前端開發。框架為您提供了許多優勢，例如可重用的組件，更有條理的UI或頁面交互。這對于協作更好，也有助于編寫簡潔的代碼。另外，了解狀態管理。每個框架都有不同的方法。以下是2020年的一些流行框架和狀態管理器。

·React：React庫是最流行的Web開發學習方法，與其他框架和庫相比，它相當容易。React開發人員還有很多工作要做。您可以將Redux和

ContextAPI與Hooks一起使用以進行狀態管理。

·Vue：

Vue也越來越受歡迎，開發人員也更喜歡學習Vue。與React和Angular相比，Vue最容易學習。VueX是為視圖而構建的狀態管理器。

·Angular：此框架通常在大型組織中使用。它具有相當陡峭的學習曲線。用Angular學習

TypeScript也很好。它允許您使用可選的靜態類型并支持ES2015的功能。NGRX和Services是可以學習此框架的良好狀態管理器。

可選學習：

·

如果您具有這三個框架之一的知識，那么您還可以使用Svelte，它是一個JavaScript編譯器，可讓您生成純凈的原始JS代碼并幫助您輕松構建用戶界面。

·

了解服務器端渲染。NextJS(React)和NuxtJS(Vue)是允許您在服務器上運行React和Vue的框架。兩者都有很好的功能，例如更好的SEO，文件系統路由，自動代碼拆分，靜態導出，JS中的CSS和許多其他功能。

·靜態網站生成器：Gatsby(反應式)和Gridsome(Vue)

我們已經討論了所有大多數前端開發工具和技術。現在讓我們討論成為后端開發人員或全棧開發人員的語言和技術。

11、服務器端語言(選擇一種)

您應該至少了解一種服務器端語言。要在2020年選擇一種語言，下面提供了一些選項...

·NodeJS(不是語言，而是運行時環境)

·Python(非常適合初學者)

·Java(適合大型組織)

·Php(適合自由職業)

·Ruby(2020年少兩極)

·C#

·Go

注意：無論你喜歡學習哪種服務器端語言，都要確保你了解使用該語言的數據結構和算法。數據結構和算法將幫助您為用戶呈現數據，并將幫助您優化Web應用程序中的代碼。我們特別建議您專注于使用數組和字符串(最重要)。你將同時使用這兩種方法。

12、服務器端框架(選擇一項)

一旦學習了自己選擇的一種服務器端語言，就可以使用其中一種語言框架。您可以選擇以下給出的選項之一...

·Node.js_Express，Koa，Adonis，Feather.js，Nest.js

·Python：Django，Flask，

·Java：SpringMVC，Grails

·PHP：Laravel，Symfony，Codeignitor，Slim

·Ruby：Sinatra上的RubyonRails

·C#：ASP.NETMVC

·Go：Revel

13、數據庫(選擇一項)

大多數Web應用程序都需要一個存儲數據的地方。在某些情況下，某些技術或某些語言可以與某些數據庫配合使用。例如：在Mern堆棧中，M代表MongoDB，而在LAMP堆棧中M代表MySQL，但完全取決于您要為應用程序選擇哪個數據庫。我們將討論2020年一些流行的數據庫。

·關系數據庫：RDBMS仍然是最受歡迎的數據庫。最喜歡使用PostgreSQL，MySQL，MSSQL。

·NoSQL：MongoDB，RethinkDB，CouchDB

·云數據庫：Firebase，AzureCouldDB，AWS

·輕量級和緩存：Redis，SQLlite，NeDB

在學習數據庫時，您還將學習RDBMS，ORM(對象關系映射器)或ODM(對象數據映射器)的SQL(結構化查詢語言)。GraphQL

：(可選)您可以了解現在流行的GraphQL。這是API的查詢語言。它具有類似于JSON的簡單語法，并且相當容易實現。

14、CMS：內容管理

您絕對應該了解內容管理系統，尤其是如果您是自由職業者。CMS用于將內容添加到您的網站或應用程序。客戶能夠更新自己的內容非常好。

·

傳統CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enduro(Javascript)

·其他CMS：DEDECMS，帝國CMS，PHPcms，Prismic.io，Strati。

15、部署和DevOps

托管全棧應用程序或后端應用程序比僅前端應用程序要復雜一些，尤其是當您擁有數據庫時。確保您知道如何使用CLI進行部署。了解有關用于部署應用程序的以下內容。

在大多數公司中，有不同的團隊從事DevOps的工作。因此，擁有有關DevOps的知識完全是可選的。您可以了解到，如果您正在從事自己的項目。

·SSH(安全外殼)

·Web服務器環境：NGINX，Apache

·應用程序托管：Linode，Heroku，AWS，Azure，Now。

·虛擬化：Docker，Vagrant

·測試：單元，功能，集成等

·負載平衡，監視，安全性。

以上所有技術工具都足以使您成為前端，后端或全棧開發人員。根據最終目標選擇正確的工具和技術。

以上就是小編今天為大家分享的關于成為web前端開發工程師的學習指南的文章，希望本篇文章能夠對正在從事web前端工作的小伙伴們有所幫助，想要了解更多web前端相關知識記得關注北大青鳥web培訓官網，最后祝愿小伙伴們工作順利，成為一名優秀的web前端開發工程師。

英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻譯|web前端開發(ID：web_qdkf)

怎么理解JavaScript中的ArrayBuffer

JS里的Array，因為有很多功能，而且是不限制類型的，或者它還可能是稀疏的……總之這個Array是“托管”的，它內部有比較復雜的實現。

而如果你從XHR、File API、Canvas等等各種地方，讀取了一大串字節流，如果用JS里的Array去存，又浪費，又低效。

于是為了配合這些新的API增強JS的二進制處理能力，就有了ArrayBuffer。

ArrayBuffer簡單說是一片內存，但是你不能（也不方便）直接用它。這就好比你在C里面，malloc一片內存出來，你也會把它轉換成unsigned_int32或者int16這些你需要的實際類型的數組/指針來用。

這就是JS里的TypedArray的作用，那些Uint32Array也好，Int16Array也好，都是給ArrayBuffer提供了一個“View”，MDN上的原話叫做“Multiple views on the same data”，對它們進行下標讀寫，最終都會反應到它所建立在的ArrayBuffer之上。

除了TypedArray以外，也可以使用DataView來讀寫ArrayBuffer，這樣會麻煩一些，但也更靈活。DataView能更自由的選擇字節序，對于對齊的要求也更低。

名稱欄目：javascript托管,事件托管 js
文章出自：http://m.kartarina.com/article18/dseiodp.html

成都網站建設公司_創新互聯，為您提供外貿網站建設、定制網站、網站維護、做網站、靜態網站、品牌網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯