Web前端工作中常見的div+css錯誤

序員其實也是一個需要認真仔細的工作，特別是從事web前端的朋友，在寫代碼的時候更應該認真仔細，一不小心就會出現問題。今天小編就為大家準備了這篇文章大家一起來看一看在web前端工作中如何檢查和處理常見的div+css錯誤。

1. 檢查HTML元素是否拼寫錯誤、是否忘記結束標記

即使是老手也經常會弄錯div的嵌套關系。可以用dreamweaver的驗證功能檢查一下有無錯誤。

2. 檢查CSS是否正確

檢查一下有無拼寫錯誤、是否忘記結尾的｝或者在｝后面存在其他符號等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是為CSS減肥的工具，但也能檢查出拼寫錯誤。

3. 確定錯誤發生的位置

假如錯誤影響了整體布局，則可以逐個刪除div塊，直到刪除某個div塊后顯示恢復正常，即可確定錯誤發生的位置。

4. 利用border屬性確定出錯元素的布局特性

使用float屬性布局一不小心就會出錯。這時為元素添加border屬性確定元素邊界，錯誤原因即水落石出。

5. float元素的父元素不能指定clear屬性

MacIE下假如對float的元素的父元素使用clear屬性，四周的float元素布局就會混亂。這是MacIE的聞名的bug，倘若不知道就會走彎路。

6. float元素務必指定width屬性

很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何，一定要為其指定width屬性。

另外指定元素時盡量使用em而不是px做單位。

7. float元素不能指定margin和padding等屬性

IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在 float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法為IE指定非凡的值。

8. float元素的寬度之和要小于100%

假如float元素的寬度之和正好是100%，某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小于99%。

9. 是否重設了默認的樣式?

某些屬性如margin、padding等，不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置為0、列表樣式設置為none等。

10. 是否忘記了寫DTD?

假如無論怎樣調整不同瀏覽器顯示結果還是不一樣，那么可以檢查一下頁面開頭是不是忘了寫下面這行DTD：

html4.01： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"/>
html5： <!DOCTYPE html>

以上就是關于Web前端工作中常見的div+css錯誤的檢查和處理方法的注意事項，大家也可以關注“武漢千鋒”微信公眾號，小千定時分享行業最新動態和學習資料！

JavaScript 引擎執行 JavaScript 代碼時，會發生各種錯誤：可能是語法錯誤，通常是程序員造成的編碼錯誤或錯別字；可能是拼寫錯誤或語言中缺少的功能(可能由于瀏覽器差異)；可能是由于來自服務器或用戶的錯誤輸出而導致的錯誤；也可能是由于許多其他不可預知的因素。那么js有沒有好的可以檢測錯誤的呢？

JS本身是動態語言，因此人們普遍認為它是一種最難于調試的編程語言。腳本出錯時，由于沒有上下文信息，讓人摸不著頭腦，ECMAScript 第 3 版致力于解決這個問題，專門引入了try-catch和throw等語句以及一些錯誤類型，意在讓開發人員能夠適當地處理錯誤，提升開發效率。

1. Error 實例對象

JavaScript 解析或運行時，一旦發生錯誤，引擎就會拋出一個錯誤對象。JavaScript 原生提供Error構造函數，所有拋出的錯誤都是這個構造函數的實例。

var err=new Error('出錯了');
err.message // "出錯了"

拋出Error實例對象以后，整個程序就中斷在發生錯誤的地方，不再往下執行。

Error具有下面一些主要屬性：

description: 錯誤描述 (僅IE可用).
fileName: 出錯的文件名 (僅Mozilla可用).
lineNumber: 出錯的行數 (僅Mozilla可用).
message: 錯誤信息 (在IE下同description)
name: 錯誤類型.
number: 錯誤代碼 (僅IE可用).
stack: 像Java中的Stack Trace一樣的錯誤堆棧信息 (僅Mozilla可用).

2. 原生錯誤類型

Error 實例對象是最一般的錯誤類型，在它的基礎上，JavaScript 還定義了其他 6 種錯誤對象。也就是說，存在Error 的 6 個派生對象。

2.1 SyntaxError 對象

SyntaxError 對象是解析代碼時發生的語法錯誤。

// 變量名錯誤  錯誤提示是“token 非法”
var 1a;
// Uncaught SyntaxError: Invalid or unexpected token

// 缺少括號  錯誤提示是“字符串不符合要求”
console.log 'hello');
// Uncaught SyntaxError: Unexpected string

2.2 ReferenceError 對象

ReferenceError 對象是引用一個不存在的變量時發生的錯誤。

// 使用一個不存在的變量
unknownVariable
// Uncaught ReferenceError: unknownVariable is not defined

另一種觸發場景是，將一個值分配給無法分配的對象。

// 等號左側不是變量
console.log()=1
// Uncaught ReferenceError: Invalid left-hand side in assignment

// this 對象不能手動賦值
this=1
// ReferenceError: Invalid left-hand side in assignment

2.3 RangeError 對象

RangeError 對象是一個值超出有效范圍時發生的錯誤。主要有幾種情況，一是數組長度為負數，二是 Number 對象的方法參數超出范圍，以及函數堆棧超過最大值。

// 數組長度不得為負數
new Array(-1)
// Uncaught RangeError: Invalid array length

2.4 TypeError 對象

TypeError 對象是變量或參數不是預期類型時發生的錯誤。比如，對字符串、布爾值、數值等原始類型的值使用 new 命令，就會拋出這種錯誤，因為 new 命令的參數應該是一個構造函數。

new 123
// Uncaught TypeError: number is not a func

var obj={};
obj.unknownMethod()
// Uncaught TypeError: obj.unknownMethod is not a function

2.5 URIError 對象

URIError 對象是 URI 相關函數的參數不正確時拋出的錯誤，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()這六個函數。

2.6 EvalError 對象

eval函數沒有被正確執行時，會拋出EvalError錯誤。該錯誤類型已經不再使用了，只是為了保證與以前代碼兼容，才繼續保留。

2.7 總結

以上這6種派生錯誤，連同原始的 Error 對象，都是構造函數。這些構造函數都接受一個參數，代表錯誤提示信息（message）。

var err1=new Error('出錯了！');
var err2=new RangeError('出錯了，變量超出有效范圍！');
var err3=new TypeError('出錯了，變量類型無效！');

err1.message // "出錯了！"
err2.message // "出錯了，變量超出有效范圍！"
err3.message // "出錯了，變量類型無效！"

3. throw 語句

throw 語句的作用是主動中斷程序執行，拋出一個錯誤。

var x=-1
if (x <=0) {
  throw new Error('x 必須為正數');
}
// Uncaught Error: x 必須為正數

上面代碼中，如果變量 x 小于等于 0，就手動拋出一個錯誤，告訴用戶 x 的值不正確，整個程序就會在這里中斷執行。可以看到，throw 拋出的錯誤就是它的參數，這里是一個 Error 實例。

throw 可以拋出任何類型的值。也就是說，它的參數可以是任何值。

// 拋出一個字符串
throw 'Error！';
// Uncaught Error！

// 拋出一個數值
throw 42;
// Uncaught 42

對于 JavaScript 引擎來說，遇到throw 語句，程序就中止了。引擎會接收到throw拋出的信息，可能是一個錯誤實例，也可能是其他類型的值。

4. try...catch 結構

一旦發生錯誤，程序就中止執行了。JavaScript 提供了 try...catch 結構，允許對錯誤進行處理，選擇是否往下執行。

如果你不確定某些代碼是否會報錯，就可以把它們放在 try...catch 代碼塊之中，便于進一步對錯誤進行處理。

try {
  throw "出錯了";
} catch (e) {
  console.log(111);
}
console.log(222);
// 111
// 222

上面代碼中，try 代碼塊拋出的錯誤，被catch代碼塊捕獲后，程序不會中斷，會按照正常流程繼續執行下去。

5. finally 代碼塊

try...catch 結構允許在最后添加一個finally代碼塊，表示不管是否出現錯誤，都必需在最后運行的語句。

function cleansUp() {
  try {
    throw new Error('出錯了……');
    console.log('此行不會執行');
  } finally {
    console.log('完成清理工作');
  }
}

cleansUp()
// 完成清理工作
// Uncaught Error: 出錯了……
//    at cleansUp (<anonymous>:3:11)
//    at <anonymous>:10:1

上面代碼中，由于沒有 catch 語句塊，一旦發生錯誤，代碼就會中斷執行。中斷執行之前，會先執行 finally 代碼塊，然后再向用戶提示報錯信息。

下面的例子說明，return 語句的執行是排在finally代碼之前，只是等finally代碼執行完畢后才返回。

var count=0;
function countUp() {
  try {
    return count;
  } finally {
    count++;
  }
}

countUp()
// 0
count
// 1
// return語句里面的count的值，是在finally代碼塊運行之前就獲取了。

下面的例子充分反映了 try...catch...finally 這三者之間的執行順序。

function f() {
  try {
    console.log(0);
    throw 'bug';
  } catch(e) {
    console.log(1);
    return true; // 這句原本會延遲到 finally 代碼塊結束再執行
    console.log(2); // 不會運行
  } finally {
    console.log(3);
    return false; // 這句會覆蓋掉前面那句 return
    console.log(4); // 不會運行
  }

  console.log(5); // 不會運行
}

var result=f();
// 0
// 1
// 3

result
// false

上面代碼中，catch 代碼塊結束執行之前，會先執行 finally 代碼塊。

finally代碼塊用法的典型場景：

openFile();

try {
  writeFile(Data);
} catch(e) {
  handleError(e);
} finally {
  closeFile();
}

上面代碼首先打開一個文件，然后在 try 代碼塊中寫入文件，如果沒有發生錯誤，則運行 finally 代碼塊關閉文件；一旦發生錯誤，則先使用 catch 代碼塊處理錯誤，再使用 finally 代碼塊關閉文件。

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

生活的麻煩是無窮無盡的

快樂之所以短暫是因為

它本就藏在解決這些麻煩的間隙里

你要學會像及時下班一樣及時快樂

- 2023.05.10 -

錯誤是編程過程的一部分。無論是新手還是有十分有經驗的程序員，編寫程序的過程難免會出現一些錯誤，作為新手我們應該站在巨人的肩膀上，學會如何避免遇到這樣的情況，以及如何在自己的項目中做的更好。

在 JavaScript 中，當代碼語句緊密耦合并產生錯誤時，繼續使用剩余的代碼語句是沒有意義的。相反，我們應該盡可能優雅地從錯誤中恢復過來。

JavaScript 解釋器在出現此類錯誤時檢查異常處理代碼，如果沒有異常處理程序，程序將返回導致錯誤的任何函數。對調用堆棧上的每個函數重復此操作，直到找到異常處理程序或到達頂層函數，從而導致程序以錯誤終止，導致程序的崩潰。

一般來說，有兩種處理方式：

1.拋出異常 ：如果在運行時發生的問題無法得到有意義的處理，最好拋出它

function openFile(fileName) {

if (!exists(fileName)) {

throw new Error('找不到文件 ' + fileName)

}

// ...

}

2.捕獲異常： 拋出的異常在運行時更有意義的地方被捕獲和處理

try {

openFile('../test.js')

} catch(e) {

// 優雅地處理拋出的期望

}

接下來，我們更詳細地說說這兩種異常處理方式的具體操作。

一、拋出異常

你可能會看到類似 ReferenceError: specs is not defined 這樣的情況。這表示通過 throw 語句引發的異常。

語法

throw ?value?

// 不要這樣做

if (somethingBadHappened) {

throw 'Something bad happened'

}

對可以作為異常拋出的數據類型沒有限制，但 JavaScript 具有特殊的內置異常類型。其中之一是 Error，正如您在前面的示例中所看到的。這些內置的異常類型為我們提供了比異常消息更多的細節。

Error

Error 類型用于表示一般異常。這種類型的異常最常用于實現用戶定義的異常。它有兩個內置屬性可供使用。

message：作為參數傳遞給 Error 構造函數的內容。例如，new Error('This is an error message')。您可以通過 message 屬性訪問消息。

const myError=new Error('Error!!!')

console.log(myError.message) // Error!!!

stack ：該屬性返回導致錯誤的文件的歷史記錄(調用堆棧)。堆棧頂部還包括 message，后面是實際堆棧，從最新/隔離的錯誤點開始，到最外部負責的文件。

Error: Error!!!

at <anonymous>:1:1

注意：new Error('...') 在拋出之前不會執行任何操作，即 throw new Error('error msg') ?將在 JavaScript 中創建一個 Error 實例，并停止腳本的執行，除非你對 Error 錯誤執行某些操作，例如捕獲它。

二、捕捉異常

現在我們知道了什么是異常以及如何拋出它們，讓我們討論一下如何通過捕獲它們來阻止它們破壞我們的程序。

try-catch-finally 是處理異常的最簡單方法。

try {

// 要運行的代碼

} catch (e) {

// 發生異常時要運行的代碼

}

[ // 可選

finally {

// 無論發生異常都始終執行的代碼

}

]

在 try 子句中，我們添加了可能產生異常的代碼。如果發生異常，則執行 catch 子句。

有時，無論代碼是否產生異常，都需要執行代碼，這時我們可以使用可選塊 finally。即使 try 或 catch 子句執行 return 語句，finally 塊也將執行。例如，以下函數返回 'Execute finally'，因為 finally 子句是最后執行的內容。

function foo() {

try {

return true

} finally {

console.log('Execute finally')

}

我們在無法事先檢查代碼正確性的地方使用 try-catch。

const user='{"name": "D.O", "age": 18}'

try {

// 代碼運行

JSON.parse(params)

// 在出現錯誤的情況下，其余的代碼將永遠無法運行

console.log(params)

} catch (err) {

// 在異常情況下運行的代碼

console.log(err.message) // params is not defined

}

如上所示，在執行代碼之前，不可能檢查 JSON.parse 以獲得 stringify 對象或字符串。

注意：你可以捕獲程序產生的異常和運行時異常，但無法捕獲 JavaScript 語法錯誤。

try-catch-finally 只能捕獲同步錯誤。如果我們嘗試將其用于異步代碼，那么在異步代碼完成其執行之前，try-catch-finally 可能已經執行了。那么我們如何處理異步代碼塊中的異常呢？下面給大家介紹三種方法：

三、如何處理異步代碼塊中的異常

回調函數

使用回調函數(不推薦)，我們通常會收到兩個如下所示的參數：

async function(code, (err, result)=> {

if (err) return console.error(err)

console.log(result)

})

我們可以看到有兩個參數：err 和 result。如果有錯誤，err 參數將等于該錯誤，我們可以拋出該錯誤來進行異常處理。

在 if (err) 塊中返回某些內容或將其他指令包裝在 else 塊中都很重要。否則，您可能會遇到另一個錯誤。例如，當您嘗試訪問 result.data 時，result 可能未定義。

Promises

使用 promises 的 then 或者 catch，我們可以通過將錯誤處理程序傳遞給 then 方法或使用 catch 子句來處理錯誤。

promise.then(onFulfilled, onRejected)

也可以使用 .catch(onRejected) 而不是 .then(null, onRejected) 添加錯誤處理程序，其工作方式相同。

讓我們看一個 .catch 拒絕 Promise 的例子。

Promise.resolve('1')

.then(res=> {

console.log(res) // 1

throw new Error('go wrong') // 拋出異常

})

.then(res=> {

console.log(res) // 不會被執行

})

.catch(err=> {

console.error(err) // 捕獲并處理異常 ——> Error: go wrong

})

使用 async/await 和 try-catch

使用 async/await 和 try-catch-finally，處理異常是輕而易舉的事。

async function func() {

try {

await nonExistentFunction()

} catch (err) {

console.error(err) // ReferenceError: nonExistentFunction is not defined

}

現在我們已經很好地理解了如何在同步和異步代碼塊中執行異常處理，最后，再來看看未捕獲的異常又該如何去處理呢？

四、如何處理未捕獲的異常

也是要分在瀏覽器中和在 Node.js 中兩種情況的，可以根據實際情況來處理這些異常。

在瀏覽器中

我們可以使用 window.onerror() 方法來處理未捕獲的異常。每當運行時發生錯誤時，該方法會在 window 對象上觸發 error 事件。

onerror() 的另一個實用做法是：當站點中的圖片或視頻等數據加載出錯時，可以用該方法觸發某些操作。例如，提供一張加載出錯時的圖片，或顯示一條消息。

在 Node.js 中

EventEmitter 模塊派生的 process 對象可以訂閱事件 uncaughtException。

process.on('uncaughtException', ()=> {})`

我們可以傳遞一個回調來處理異常。如果我們嘗試捕獲這個未捕獲的異常，進程將不會終止，因此我們必須手動完成。

uncaughtException 僅適用于同步代碼。對于異步代碼，還有另一個稱為 unhandledRejection 的事件。

process.on('unhandledRejection', ()=> {})

決不要嘗試為基本 Error 類型實現 “捕獲所有” 處理程序。這將混淆所發生的一切，并損害代碼的可維護性和可擴展性。

五、關鍵要點

throw 語句用于生成用戶定義的異常。在運行時，當 throw 遇到語句時，當前函數的執行將停止，控制權將傳遞給 catch 調用堆棧中的第一個子句。如果沒有 catch 子句，程序將終止。
JavaScript 有一些內置的異常類型，最值得注意的是 Error，它返回 Error 中的兩個重要屬性：stack 和 message。
try 子句將包含可能產生異常的代碼，catch 子句會在發生異常時執行。
對于異步代碼，最好使用 async/await 配合 try-catch 語句。
可以捕獲未處理的異常，這可以防止應用程序崩潰。

在實際JavaScript項目開發過程中當我們遇到異常代碼不要覺得麻煩，異常處理可以幫助您提高代碼的可維護性、可擴展性和可讀性。

今天的分享就到這里了，記得點贊和收藏！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

在線咨詢

上一篇：用php生成HTML文件的類
下一篇：手把手教你Vue+ECharts+高德地圖API實現

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web前端工作中常見的div+css錯誤

1. Error 實例對象

2. 原生錯誤類型

2.1 SyntaxError 對象

2.2 ReferenceError 對象

2.3 RangeError 對象

2.4 TypeError 對象

2.5 URIError 對象

2.6 EvalError 對象

2.7 總結

3. throw 語句

4. try...catch 結構

5. finally 代碼塊

一、拋出異常

二、捕捉異常

三、如何處理異步代碼塊中的異常

四、如何處理未捕獲的異常

五、關鍵要點

您的項目需求