电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

來自1000多個項目的10大JavaScript錯誤淺析

瀏覽:70日期:2023-11-11 10:21:12

作為對社區開發者的回饋,我們從我們的數據庫里選出了10大來自數千個項目的JavaScript錯誤。我們將會給出產生這些錯誤的根源,以及如何避免再發生這些錯誤。如果能夠避免這些錯誤,就可以成為更好的開發者。

數據才是王道,我們通過收集和分析大量數據才選出了這10大JavaScript錯誤。我們收集每一個項目中出現的錯誤,并統計每一個錯誤發生的次數。我們根據錯誤代碼的指紋(fingerprint)對它們進行分組,也就是說,如果第二個錯誤與第一個是重復的,就把它們歸入同一個組。這樣就可以為用戶提供更好的視圖,而不是像查看繁瑣的日志文件那樣。

我們只關注影響面最大的那些錯誤。為此,我們統計了錯誤在各個公司的項目中發生的次數,而不是錯誤發生的總次數,因為如果是這樣的話,讀者就可能看到大量與他們不相干的統計信息。

以下是排名靠前的10大JavaScript錯誤:

來自1000多個項目的10大JavaScript錯誤淺析

出于可讀性方面的考慮,每個錯誤的描述經過精簡。

1.Uncaught TypeError: Cannot read property

如果你是一名JavaScript開發者,對這個錯誤可能已經熟視無睹。在Chrome里讀取未定義對象的屬性或調用未定義對象的方法時就會發生這個錯誤,在Chrome開發者控制臺可以很容易地重現這個錯誤。

來自1000多個項目的10大JavaScript錯誤淺析

發生這個錯誤的原因有很多,其中最為常見的是,在渲染UI組件時沒有正確初始化狀態。我們通過一個真實的例子來看看這個錯誤是怎么發生的。我們選擇React作為示例,不過在其他框架(Angular、Vue等)中也是一樣的。

class Quiz extends Component { componentWillMount() { axios.get(’/thedata’).then(res => { this.setState({items: res.data}); }); } render() { return ( <ul> {this.state.items.map(item => <li key={item.id}>{item.name}</li> )} </ul> ); }}

這里要注意兩件事:

組件的狀態(如this.state)在一開始就是undefined。 如果是通過異步的方式來加載數據,那么在數據加載進來之前,至少要渲染一次組件——不管是在構造器、componentWillMout()還是componentDidMout()中加載數據。Quiz在進行第一次渲染時,this.state.items是undefined,那么ItemList就會得到undefined的數據項,這樣就會在控制臺看到這個錯誤——“Uncaught TypeError:Cannot read property ‘map’ of undefined”。

要解決這個問題其實很簡單,在構造器里使用適當的默認值進行初始化。

class Quiz extends Component { // 增加這個: constructor(props) { super(props); // 使用空數組給state賦值 this.state = { items: [] }; } componentWillMount() { axios.get(’/thedata’).then(res => { this.setState({items: res.data}); }); } render() { return ( <ul> {this.state.items.map(item => <li key={item.id}>{item.name}</li> )} </ul> ); }} 2. TypeError: ’undefined’ is not an object

在Safari里讀取未定義對象的屬性或調用未定義對象的方法時就會發生這個錯誤,在Safari開發者控制臺可以很容易地重現這個錯誤。這個錯誤與發生在Chrome里的是差不多的,只是Safari為它提供了不同的錯誤信息。

來自1000多個項目的10大JavaScript錯誤淺析

3. TypeError: null is not an object

在Safari里讀取空(null)對象的屬性或調用空對象的方法時就會發生這個錯誤,在Safari開發者控制臺可以很容易地重現這個錯誤。

來自1000多個項目的10大JavaScript錯誤淺析

有意思的是,在JavaScript里,null和undefined其實是不一樣的,所以我們會看到兩個不同的錯誤消息。undefined表示未賦值的變量,而null表示變量值為空。可以使用嚴格等于號來證明它們不是同一個東西。

來自1000多個項目的10大JavaScript錯誤淺析

在實際應用當中,在JavaScript里調用一個未加載的DOM元素就會出現這個錯誤。如果對象為空,DOM API就會返回null。

DOM元素需要在創建之后才能被訪問。JavaScript代碼是按照從上到下的順序進行解析的,所以,如果在DOM元素之前有一個標簽包含了JavaScript代碼,瀏覽器在解析HTML時就會執行這些代碼。在加載JavaScript之前,如果DOM元素沒有被創建,就會出現這個錯誤。

在這個例子里,我們可以通過添加一個事件監聽器來解決這個問題,在頁面加載完畢時,事件監聽器會通知我們。在addEventListener被觸發之后,init()方法就可以大膽地訪問DOM元素了。

<script> function init() { var myButton = document.getElementById('myButton'); var myTextfield = document.getElementById('myTextfield'); myButton.onclick = function() { var userName = myTextfield.value; } } document.addEventListener(’readystatechange’, function() { if (document.readyState === 'complete') { init(); } });</script><form> <input type='text' placeholder='Type your name' /> <input type='button' value='Go' /></form> 4. (unknown): Script error

跨域的未捕捉JavaScript異常會變成Script error。例如,假設JavaScript托管在CDN上,那么未捕捉的錯誤(錯誤沒有在try-catch里被捕獲,一路直上到了window.onerror里)就會顯示成“Script error”,而不是顯示具體的錯誤消息。這是瀏覽器出于安全方面的考慮,防止跨域傳遞數據。

要想獲得具體的錯誤信息,可以這樣做:

1).使用Access-Control-Allow-Origin

將Access-Control-Allow-Origin設置成“*”,表示該資源可以被任何一個域訪問。如果有必要,可以把“*”替換成你的域名,例如Access-Control-Allow-Origin: www.example.com。不過,如果使用了CDN,那么要支持多個域名可能就會得不償失,因為CDN存在緩存問題。

下面是在各種環境如何設置該字段的示例:

Apache

在JavaScript文件所在的目錄創建一個叫作.htaccess的文件,并加入如下內容:

Header add Access-Control-Allow-Origin “*'

Nginx

在JavaScript對應的location配置代碼塊中加入add_header指令:

location ~ ^/assets/ { add_header Access-Control-Allow-Origin *;}

HAProxy

在JavaScript文件對應的backend配置塊中加入如下內容:

rspadd Access-Control-Allow-Origin: *

2). 在script標簽里設置crossorigin=“anonymous”

在每個設置了Access-Control-Allow-Origin字段的HTML頁面里,將它們的script標簽的crossorigin屬性設置為“anonymous”。在Firefox里,如果出現了crossorigin,但沒有設置Access-Control-Allow-Origin,JavaScript腳本就不會被執行。

5. TypeError: Object doesn’t support property

在IE里讀取未定義對象的屬性或調用未定義對象的方法時就會發生這個錯誤,在IE開發者控制臺可以很容易地重現這個錯誤。

來自1000多個項目的10大JavaScript錯誤淺析

這個錯誤與Chrome里的“TypeError: ‘undefined’ is not a function”是同一個東西。不同的瀏覽器為相同的錯誤提供的錯誤消息可能是不一樣的。

在IE里使用JavaScript的命名空間時,就很容易碰到這個錯誤。發生這個錯誤十有八九是因為IE無法將當前命名空間里的方法綁定到this關鍵字上。例如,假設有個命名空間Rollbar,它有一個方法叫isAwesome()。在Rollbar命名空間中,可以直接使用this關鍵字來調用這個方法:

this.isAwesome();

在Chrome、Firefox和Opera中這樣做都是沒有問題的,但在IE中就不行。所以,最安全的做法是指定全命名空間:

Rollbar.isAwesome(); 6. TypeError: ‘undefined’ is not a function

在Chrome里調用一個未定義的函數時就會發生這個錯誤,可以在Chrome開發者控制臺和Mozilla開發者控制臺重現這個錯誤。

來自1000多個項目的10大JavaScript錯誤淺析

近年來,JavaScript的編碼技術和設計模式變得日趨復雜,回調和閉包中的自引用情況越來越普遍,讓人搞不清楚代碼中的this/that表示的是什么意思。

比如下面這段代碼:

function testFunction() { this.clearLocalStorage(); this.timer = setTimeout(function() { this.clearBoard(); // 這里的”this'是指什么? }, 0);};

執行上面的代碼會出現這樣的錯誤:“Uncaught TypeError: undefined is not a function”。因為在調用setTimeout()方法時,實際上是在調用window.setTimeout()。傳給setTimeout()的匿名函數的上下文實際上是window,而window并不包含clearBoard()方法。

對于舊瀏覽器,以往的解決辦法是將this賦值給某個變量,然后在閉包里使用這個變量。例如:

function testFunction () { this.clearLocalStorage(); var self = this; // 將this賦值給self this.timer = setTimeout(function(){ self.clearBoard(); }, 0);};

在新瀏覽器中,可以使用bind()方法來傳遞引用:

function testFunction () { this.clearLocalStorage(); this.timer = setTimeout(this.reset.bind(this), 0); // 綁定到 ’this’};function testFunction(){ this.clearBoard(); // 以’this’作為上下文}; 7. Uncaught RangeError: Maximum call stack

在Chrome里,有幾種情況會發生這個錯誤,其中一個就是無限遞歸調用一個函數。這個錯誤可以在Chrome開發者控制臺重現。

來自1000多個項目的10大JavaScript錯誤淺析

當傳給函數的值超出可接受的范圍時也會出現這個錯誤。很多函數只接受指定范圍的數值,例如,Number.toExponential(digits)和Number.toFixed(digits)只接受0到20的數值,而Number.toPrecision(digits)只接受1到21的數值。

var a = new Array(4294967295); //OKvar b = new Array(-1); //range errorvar num = 2.555555;document.writeln(num.toExponential(4)); //OKdocument.writeln(num.toExponential(-2)); //range error!num = 2.9999;document.writeln(num.toFixed(2)); //OKdocument.writeln(num.toFixed(25)); //range error!num = 2.3456;document.writeln(num.toPrecision(1)); //OKdocument.writeln(num.toPrecision(22)); //range error! 8. TypeError: Cannot read property ‘length’

在Chrome里讀取undefined變量的length屬性時會發生這個錯誤,這個錯誤可以在Chrome開發者控制臺重現。

來自1000多個項目的10大JavaScript錯誤淺析

length是數組的屬性,但如果數組沒有初始化或者數組的變量名被另一個上下文隱藏起來的話,訪問length屬性就會發生這個錯誤。例如:

var testArray= ['Test'];function testFunction(testArray) { for (var i = 0; i < testArray.length; i++) { console.log(testArray[i]); }}testFunction();

函數的參數名會覆蓋全局的變量名。也就是說,全局的testArray被函數的參數名覆蓋了,所以在函數體里訪問到的是本地的testArray,但本地并沒有定義testArray,所以出現了這個錯誤。

有兩種方法可用于解決這個問題:

1). 將函數的參數名移除(這就表示函數里要訪問的變量已經在函數外面定義好了,所以函數不需要參數):

var testArray = ['Test'];/* 前提是要在函數外面定義好testArray */function testFunction(/* No params */) { for (var i = 0; i < testArray.length; i++) { console.log(testArray[i]); }}testFunction();

2). 在調用函數時將變量傳遞進去:

var testArray = ['Test'];function testFunction(testArray) { for (var i = 0; i < testArray.length; i++) { console.log(testArray[i]); }}testFunction(testArray); 9. Uncaught TypeError: Cannot set property

我們無法對undefined變量進行賦值或讀取操作,否則的話會拋出“Uncaught TypeError: cannot set property of undefined”異常。

例如,在Chrome中:

來自1000多個項目的10大JavaScript錯誤淺析

如果test對象不存在,就會拋出“Uncaught TypeError: cannot set property of undefined”異常。

10. ReferenceError: event is not defined

在訪問一個未定義的對象或超出當前作用域的對象時就會發生這個錯誤,這個錯誤可以在Chrome開發者控制臺重現。

來自1000多個項目的10大JavaScript錯誤淺析

如果在進行事件處理時遇到這個錯誤,請確保事件對象被作為參數傳入到函數當中。舊瀏覽器(IE)提供了全局的event變量,但并不是所有的瀏覽器都會這樣。盡管jQuery嘗試對這種行為進行規范化,但最好還是使用傳給函數的event對象:

function myFunction(event) { event = event.which || event.keyCode; if(event.keyCode===13){ alert(event.keyCode); }} 結論

我們希望這些內容能夠幫助大家在未來避免這些錯誤,解決大家的痛點。不過,即使有了這些最佳實踐,在生產環境中仍然會出現各種不可預期的錯誤。關鍵是要及時發現那些影響用戶體驗的錯誤,并使用適當的工具快速解決這些問題。

查看英文原文: Top 10 JavaScript errors from 1000+ projects (and how to avoid them)

感謝徐川對本文的審校。

來自:http://www.infoq.com/cn/articles/top-10-javascript-errors

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 温控器生产厂家-提供温度开关/热保护器定制与批发-惠州市华恺威电子科技有限公司 | 杭州顺源过滤机械有限公司官网-压滤机_板框压滤机_厢式隔膜压滤机厂家 | 400电话_400电话申请_888元包年_400电话办理服务中心_400VIP网 | 双能x射线骨密度检测仪_dxa骨密度仪_双能x线骨密度仪_品牌厂家【品源医疗】 | 100国际学校招生 - 专业国际学校择校升学规划| 拉力测试机|材料拉伸试验机|电子拉力机价格|万能试验机厂家|苏州皖仪实验仪器有限公司 | 铝合金重力铸造_铝合金翻砂铸造_铝铸件厂家-东莞市铝得旺五金制品有限公司 | 工控机-图像采集卡-PoE网卡-人工智能-工业主板-深圳朗锐智科 | 郑州水质检测中心_井水检测_河南废气检测_河南中环嘉创检测 | 河南不锈钢水箱_地埋水箱_镀锌板水箱_消防水箱厂家-河南联固供水设备有限公司 | 期货软件-专业期货分析软件下载-云智赢 | 水热合成反应釜-防爆高压消解罐-西安常仪仪器设备有限公司 | 铝合金风口-玻璃钢轴流风机-玻璃钢屋顶风机-德州东润空调设备有限公司 | 智能化的检漏仪_气密性测试仪_流量测试仪_流阻阻力测试仪_呼吸管快速检漏仪_连接器防水测试仪_车载镜头测试仪_奥图自动化科技 | 强效碱性清洗剂-实验室中性清洗剂-食品级高纯氮气发生器-上海润榕科学器材有限公司 | 安徽合肥格力空调专卖店_格力中央空调_格力空调总经销公司代理-皖格制冷设备 | 镀锌方管,无缝方管,伸缩套管,方矩管_山东重鑫致胜金属制品有限公司 | 智能电表|预付费ic卡水电表|nb智能无线远传载波电表-福建百悦信息科技有限公司 | 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 液压中心架,数控中心架,自定心中心架-烟台恒阳机电设计有限公司 行星搅拌机,双行星搅拌机,动力混合机,无锡米克斯行星搅拌机生产厂家 | 警用|治安|保安|不锈钢岗亭-售货亭价格-垃圾分类亭-移动厕所厂家-苏州灿宇建材 | 电机修理_二手电机专家-河北豫通机电设备有限公司(原石家庄冀华高压电机维修中心) | 阴离子_阳离子聚丙烯酰胺厂家_聚合氯化铝价格_水处理絮凝剂_巩义市江源净水材料有限公司 | 东莞动力锂电池保护板_BMS智能软件保护板_锂电池主动均衡保护板-东莞市倡芯电子科技有限公司 | 立式_复合式_壁挂式智能化电伴热洗眼器-上海达傲洗眼器生产厂家 理化生实验室设备,吊装实验室设备,顶装实验室设备,实验室成套设备厂家,校园功能室设备,智慧书法教室方案 - 东莞市惠森教学设备有限公司 | 我爱古诗词_古诗词名句赏析学习平台| 医学动画公司-制作3d医学动画视频-医疗医学演示动画制作-医学三维动画制作公司 | 水平垂直燃烧试验仪-灼热丝试验仪-漏电起痕试验仪-针焰试验仪-塑料材料燃烧检测设备-IP防水试验机 | 网站优化公司_北京网站优化_抖音短视频代运营_抖音关键词seo优化排名-通则达网络 | 滤芯,过滤器,滤油机,贺德克滤芯,精密滤芯_新乡市宇清流体净化技术有限公司 | 东莞海恒试验仪器设备有限公司 | MES系统-WMS系统-MES定制开发-制造执行MES解决方案-罗浮云计算 | 超声波成孔成槽质量检测仪-压浆机-桥梁预应力智能张拉设备-上海硕冠检测设备有限公司 | 冷却塔减速机器_冷却塔皮带箱维修厂家_凉水塔风机电机更换-广东康明冷却塔厂家 | 密集架|电动密集架|移动密集架|黑龙江档案密集架-大量现货厂家销售 | 不锈钢反应釜,不锈钢反应釜厂家-价格-威海鑫泰化工机械有限公司 不干胶标签-不干胶贴纸-不干胶标签定制-不干胶标签印刷厂-弗雷曼纸业(苏州)有限公司 | 依维柯自动挡房车,自行式国产改装房车,小型房车价格,中国十大房车品牌_南京拓锐斯特房车 - 南京拓锐斯特房车 | 低气压试验箱_高低温低气压试验箱_低气压实验箱 |林频试验设备品牌 | 电机保护器-电动机综合保护器-上海硕吉电器有限公司 | 新中天检测有限公司青岛分公司-山东|菏泽|济南|潍坊|泰安防雷检测验收 | 拖链电缆_柔性电缆_伺服电缆_坦克链电缆-深圳市顺电工业电缆有限公司 |