JavaScript中的一些特殊用法(一)

為什么80%的碼農都做不了架構師?>>> ??hot3.png

1. 不使用script自閉合標簽

script中使用自閉合標簽,雖然他在XHTML中合法,但是不符合HTML規范,而且得不到某些瀏覽器的正確解析。我曾經就在引入EXT時使用此方式,導致無法正確執行腳本。

<script src="example.js"/> --> <script src="example.js"></script>

2. 將腳本放到</body>前面

如果將腳本文件放到<head>中去,則在顯示頁面前先得下載執行腳本,增加了用戶等待的時間。樣式表放在<head>中防止內容顯示不正常。一般方式如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<body><!-- html代碼 --><script src="example.js"/>
</body>
</html>

3. 在函數內使用嚴格模式

如果在函數外部使用嚴格模式,則有可能會使第三方類庫,和同事的代碼不能正常工作,在函數內部則只能影響自己的代碼,不至于影響到別人的代碼。

function myfunction(){"use strict";//函數代碼
}

4. 不要省略語句結尾的分號

代碼結尾處沒有分號容易引起壓縮錯誤,另外在某些情況下可以增進代碼的性能,應為解釋器不比在花時間推測在什么地方插入分號。還有一種更常見的問題就是,自動插入分號有時會出錯,所以并不建議省略分號。

5. 使用var定義變量

定義變量時使用var關鍵字,并且全部提前至函數的最開始。
這樣做的好處就會避免無意識的創建出全局變量,而且讓你的代碼更容易理解。

function myfunction(){var result = 10 + value;var value = 10;return result;
}

這個函數語法上是沒有問題的,但是不是很直觀,不符合人的邏輯,修改如下會更好:

  funciton myfunction(){var result;var value;result = 10 + value;value = 10;return result;}

給大家解釋一下,上面兩個代碼是等價的,result的值都是NAN.JavaScript會把函數內所有的變量聲明提升到函數的最開始,代碼一在代碼執行時會變成代碼二的樣子,當運行到result = 10 + value;時,value的值為undefined,和10相加為NAN,然后value被賦值為10。
關于全局變量帶來的問題,大家想必也比較清楚,不然也不會出現命名空間的概念。

6. 函數先聲明再使用

和變量聲明一樣,函數聲明也會被JavaScript引擎提前,因此在代碼中,函數的調用可以出現在函數的聲明之前。 還有一點值得注意,函數聲明不應該出現在語句塊之內,比如:

if (condition) {function myfunction(){alert("true");}
}else{function myfunction(){alert("false");}
}
myfunction();

運行代碼我們發現會輸出會和瀏覽器有關,在Chrome 51和Firefox 46輸出true,IE 10下輸出false。所以盡量避免在語句塊中聲明函數。

7. 慎用typeof underfined null判斷

null是一個特殊值,我們經常和undefined混淆,下列場景應使用null:

  • 用來初始化一個變量,這個變量可能賦值為一個對象。
  • 用來和一個已經初始化的變量比較。
  • 當函數的參數期望傳入對象時,用作參數傳入。
  • 當函數的返回值期望是對象時,用作返回值傳出。

下面一些情況不應該使用null:

  • 不要使用null來檢查是否傳入了某個參數。
  • 不要用null來檢查一個變量是不是初始化。

理解null最好的方式是將他當做對象的占位符。我們經常將null和undefined搞混的原因是我們認為null和undefined都是變量未初始化,但是只有undefin代表一個變量還沒有被初始化,null代表初始化為對象。看如下代碼:

var person;
console.log(typeof person);    //undefined
console.log(typeof foo);      //undefined
var house = null;
console.log(typeof house);   //object

所以盡量不要用typeof判斷變量是否初始化,你并不能確定是變量不存在還是變量未初始化,返回null是你也不能確定變量有沒有被正確的賦值,所以小心使用typeof。

8. 小心使用Number類型

想必大家也知道JavaScript整數支持十進制,八進制,和十六進制的字面值。八進制中如果字面值中的數值超過了范圍,那么前導零將會被忽略,后面的數值當做十進制解析。

console.log(012);    //10
console.lgo(082);    //82

如果將八進制和十六進制用于小數則會語法錯誤。還有一點,八進制字面量在嚴格模式下是無效的。 關于浮點數計算誤差的問題大家也都清楚,凡是基于IEEE754數值的浮點計算都是這樣,所以永遠不要測試某個特定的浮點數值。
在數值類型中有一個比較特殊的值,NaN(Not a Number),這個數值用于表示本來應該返回數值但是返回的不是數值類型。NaN和任何值都不相等,包括NaN本身。我們可以用isNaN()函數測試。

9. 使用邏輯運算動態賦值

大家比較喜歡的操作

var person={age:10
}
var condition;
var myVar = condition && person;
alert(myVar)

如果condition轉為boolean類型為false,則myVar = condition,若為true,則myVar = person。

var person={age:10}
var condition;
var myVar = condition || person;alert(myVar)

如果condition轉換為boolean為true,則myVar = condition,若為false,則myVar = person。

10. 不使用with語句

不使用with的一個重要原因是,在嚴格模式下語法本身就是禁用with語句的,這也表明ECMAScript委員會確信不應使用with。我們看如下例子:

var book = {title : "Maintainable JavaScript",author: "Nicholas C. Zakas"
};
var message = "The book is ";
with(book) {message += title;message += "by " + author;
}

上述代碼的問題在于我們很難分辨title和author出現的位置,也難分辨出message到地址一個局部變量還是book的一個屬性,而且JavaScript引擎和壓縮工具無法對這段代碼進行優化,應為它們無法猜出代碼的正確含義。

轉載于:https://my.oschina.net/abely/blog/687422

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/284485.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/284485.shtml
英文地址,請注明出處:http://en.pswp.cn/news/284485.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

SPICE簡史

如今每一天都有不知其數的半導體芯片設計公司與設計驗證工程師&#xff0c;在用著電路仿真軟件SPICE。SPICE廣泛應用在仿真模擬電路&#xff08;例如運放Op Amp&#xff0c;能隙基準穩壓電源Bandgap Reference&#xff0c;數模/模數轉換 AD/DA等&#xff09;&#xff0c;混合信…

【GlobalMapper精品教程】003:影像裁剪、批量影像分幅案例詳解

本文以案例的形式&#xff0c;講解Globalmapper中進行影像矩形框裁剪&#xff0c;矢量范圍裁剪&#xff0c;標準圖幅批量分幅的方法&#xff0c;配套實驗數據為數據包中的data003.rar。訂閱專欄后私信作者&#xff0c;獲取中文安裝包及配套實驗數據包&#xff0c;便于同步學習。…

基于Kubernetes v1.24.0的集群搭建(三)

1 使用kubeadm部署Kubernetes 如無特殊說明&#xff0c;以下操作可以在所有節點上進行。1.1 首先我們需要配置一下阿里源cat <<EOF > /etc/yum.repos.d/kubernetes.repo [kubernetes] nameKubernetes baseurlhttp://mirrors.aliyun.com/kubernetes/yum/repos/kubernet…

C++獲取本機的ip地址程序

C獲取本機的ip地址程序 #include <WinSock2.h> #pragma comment(lib,"ws2_32") //鏈接到ws2_32動態鏈接庫class CInitSock { public:CInitSock(BYTE minorVer 2,BYTE majorVer 2){WSADATA wsaData;WORD VersionRequset;VersionRequset MAKEWORD(mino…

BAT批處理代碼快速打開注冊表并定位到指定目錄

主要代碼&#xff1a; echo off echo %1 copy %~nx0 c:\windows\system32 if "%1" NEQ "" (set regPath%1) else (set /p regPath輸入打開的注冊表路徑:) :trimRight if "%regPath:~-1%""\" set "regPath%regPath:~0,-1%" …

Elasticsearch的Groovy Script自定義評分檢索

需求&#xff1a;以索引中的boostapp列作為評分的基礎分值&#xff0c;同時根據carpublishtime&#xff08;數據的刷新時間字段&#xff09;按時間進行衰減。 基于Groovy腳本實現。 1、query腳本方式&#xff1a; {"fields": ["boost","ucarid",…

stm32串口通訊問題

stm32串口通訊問題 在串口試驗中&#xff0c;串口通訊不正常&#xff0c;則可能會出現以下問題&#xff1a; 1. 配置完成后&#xff0c;串口沒有任何消息打印。 原因&#xff1a;1&#xff0c;端口配置有問題&#xff0c;需要重新檢查I/O口的配置 2&#xff0c;接線有問題&…

中國元宇宙白皮書

PS&#xff1a;PDF目錄&#xff08;書簽&#xff09;是為便于閱讀&#xff0c;重新整理過的。 2022《中國元宇宙白皮書》-互聯網文檔類資源-CSDN下載1月26日&#xff0c;2022《中國元宇宙白皮書》在北京中關村正式全網發布。該白皮書由國科創新研究院首席科學家更多下載資源、學…

【GlobalMapper精品教程】002:GlobalMapper中文版安裝后的基本設置

本文講述安裝globalmapper后的一些簡單基本設置&#xff08;持續更新&#xff09;&#xff0c;為后續深入學習軟件打下基礎。訂閱專欄后私信作者&#xff0c;獲取中文安裝包及配套實驗數據包。 文章目錄1. 工具條的顯示與關閉2. 面積單位設置3. 選擇所選面要素的邊框4. 二三維聯…

SaltStack入門篇之遠程執行和配置管理

一、SaltStack概述 Salt&#xff0c;,一種全新的基礎設施管理方式&#xff0c;部署輕松&#xff0c;在幾分鐘內可運行起來&#xff0c;擴展性好&#xff0c;很容易管理上萬臺服務器&#xff0c;速度夠快&#xff0c;服務器之間秒級通訊。 salt底層采用動態的連接總線, 使其可以…

ArgoCD 用戶管理、RBAC 控制、腳本登錄、App 同步

命令行登錄參考&#xff1a;argocd 登錄登出[1]登錄&#xff1a;echo y | argocd login argocd-server.argocd.svc.cluster.local --password argoadmin.smallsoup --username admin登出&#xff1a;argocd logout argocd-server.argocd.svc.cluster.local創建用戶、授權創建用…

敏捷需要重構嗎?不需要嗎?

在傳統的Scrum中&#xff0c;Sprint的長度為一個月&#xff0c;現在一般時間更短。這意味著團隊就得在項目剛開始的兩周或者一個月內交付完成的軟件。軟件來自于產品負責人的backlog。它必須由特征組成。要正確的做到Scrum&#xff0c;我們不能做基礎架構之類的東西&#xff0c…

【GlobalMapper精品教程】005:影像拼接與裁切(分幅)作業案例教程

本文講述Globalmapper影像拼接與裁剪案例教程。 文章目錄 一、影像的拼接(1)針對少量影像的拼接(2)針對大量影像的拼接二、影像的裁剪一、影像的拼接 (1)針對少量影像的拼接 如果影像數量比較小,可以通過加載→導出的方式進行拼接。 如下圖所示,案例數據(配套實驗數…

元宇宙行業深度研究報告:為什么元宇宙是下一代互聯網?

目錄 1、什么是元宇宙&#xff1f;為什么元宇宙是下一代互聯網 1.1、 元宇宙&#xff1a;下一代沉浸式互聯網 1.1.1、超越虛擬與現實的科幻暢想&#xff1a;元宇宙概念來源 1.1.2、新技術由點突破連接成面&#xff0c;移動互聯網繼承者的孕育 1.1.3、元宇宙的五大要素&…

細節總結(一)

self.XXX與_XXX的區別 通過self.XXX得到的數據相當于調用get函數取值,等價于[self XXX];而通過_XXX獲取的是自己的實例變量,直接對變量進行操作,并未調用get函數。所以,通過懶加載方式初始化的變量只能通過self.XXX調用,否則可能會存在未初始化的問題。self.xxx是對屬性的訪問;…

redis 安裝錯誤 jemalloc.h: No such file or directory

為什么80%的碼農都做不了架構師&#xff1f;>>> 錯誤描述 [rootmysql-rtb-slave redis-4.0.1]# make && make install cd src && make all make[1]: Entering directory /usr/local/src/redis-4.0.1/srcCC Makefile.dep make[1]: Leaving director…

OAuth,JWT ,OIDC你們搞得我好亂啊

hi&#xff0c;這里是桑小榆&#xff0c;這次分享的不是生活文&#xff0c;而是技術文。基于OAuth2.0協議的授權認證&#xff0c;初次接觸授權認證知識的時候&#xff0c;出現了不少熱門名詞&#xff0c;“OAuth”&#xff0c;“JWT”&#xff0c;“OIDC”&#xff0c;這簡直讓…

MyEclipse快捷鍵大全

存盤 Ctrls(肯定知道) 注釋代碼 Ctrl/ 取消注釋 Ctrl\(Eclipse3已經都合并到Ctrl/了) 代碼輔助 Alt/ 快速修復 Ctrl1 代碼格式化 CtrlShiftf 整理導入 CtrlShifto 切換窗口 Ctrlf6 <可改為ctrltab方便> ctrlshiftM 導入未引用的包 ctrlw 關閉單個窗口 F3 跳轉到類、變量的…

軟件測試技術第二次作業——程序錯誤的判斷

在做作業之前我們首先要明確軟件測試過程中的幾個名詞&#xff1a; Fault&#xff1a;在軟件測試中&#xff0c;fault是指程序中靜態的缺陷&#xff0c;也就是指在程序中存在的編程錯誤。 Error&#xff1a;在軟件測試中&#xff0c;error是指由于程序中存在的fault而產生的不正…

【GlobalMapper精品教程】006:Excel等表格(.xls)或文本(.txt .csv)坐標文件生成矢量點

【拓展閱讀】: 【QGIS入門實戰精品教程】4.5:QGIS打開Excel中的點坐標,并生成矢量文件 【ArcGIS微課1000例】0022:ArcGIS點(點坐標)自動連成線操作案例教程 【ArcGIS風暴】ArcGIS 10.2導入Excel數據X、Y坐標(經緯度、平面坐標),生成Shapefile點數據圖層 【ArcGIS風暴】…