4個(gè)值得收藏的Javascript技巧
前言
學(xué)習(xí)一門語言的一種非常有效的方法就是閱讀該編程語言開發(fā)的優(yōu)秀開源項(xiàng)目的源代碼。 Vuejs是最好的Javascript開源項(xiàng)目之一。
1.變量轉(zhuǎn)字符串
vue/src/shared/util.js
將值轉(zhuǎn)換為字符串是一個(gè)非常常見的需求，在Javascript中，有兩個(gè)函數(shù)將值轉(zhuǎn)換為字符串：
String()JSON.stringify()
這兩個(gè)功能具有不同的機(jī)制，請看下面代碼：
console.log(String(null)); // null
console.log(JSON.stringify(null)); // null
console.log(String(undefined)); // undefined 這里是字符串
console.log(JSON.stringify(undefined)); // undefined 這里是變量
console.log(String("abc")); // abc
console.log(JSON.stringify("abc")); // "abc"
console.log(String({ key: "value" })); // [object Object]
console.log(JSON.stringify({ key: "value" })); // {"key":"value"}
console.log(String([1, 2, 3])); // 1,2,3
console.log(JSON.stringify([1, 2, 3])); // [1,2,3]
const obj = {
title: "devpoint",
toString() {
return "obj";
},
};
console.log(String(obj)); // obj
console.log(JSON.stringify(obj)); // {"title":"devpoint"}從上面輸出結(jié)果來看，兩個(gè)方法將對象轉(zhuǎn)為字符串機(jī)制存在差異，如何選擇呢？
- 實(shí)際開發(fā)中我們需要將
null和undefined轉(zhuǎn)換為字符串時(shí)，經(jīng)常是希望它返回一個(gè)空字符串。 - 當(dāng)需要將一個(gè)數(shù)組和一個(gè)普通對象轉(zhuǎn)換為字符串時(shí)，經(jīng)常使用
JSON.stringify。 - 如果需要對象的
toString方法被重寫，則需要使用String()。 - 在其他情況下，使用
String()將變量轉(zhuǎn)換為字符串。
為了滿足以上條件，Vue源碼的實(shí)現(xiàn)如下：
function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
}
function toString(val) {
if (val === null || val === undefined) return "";
if (Array.isArray(val)) return JSON.stringify(val);
if (isPlainObject(val) && val.toString === Object.prototype.toString)
return JSON.stringify(val);
return String(val);
}
const obj = {
title: "devpoint",
toString() {
return "obj";
},
};
console.log(toString(obj)); // obj
console.log(toString([1, 2, 3])); // [1, 2, 3]
console.log(toString(undefined)); // ""
console.log(toString(null)); // ""2.普通對象
vue/src/shared/util.js
Object.prototype.toString允許將對象轉(zhuǎn)換為字符串。對于普通對象，當(dāng)調(diào)用此方法時(shí)，總是返回[object object]。
const runToString = (obj) => Object.prototype.toString.call(obj);
console.log(runToString({})); // [object Object]
console.log(runToString({ title: "devpoint" })); // [object Object]
console.log(runToString({ title: "devpoint", author: { name: "devpoint" } })); // [object Object]類似上面這種對象我們稱之為普通對象。
在Javascript中還有一些特殊的對象，如Array、String和RegExp，它們在Javascript引擎中具有特殊的設(shè)計(jì)。當(dāng)它們調(diào)用Object.prototype.toString方法時(shí)，會(huì)返回不同的結(jié)果。
const runToString = (obj) => Object.prototype.toString.call(obj);
console.log(runToString(["devpoint", 2021])); // [object Array]
console.log(runToString(new String("devpoint"))); // [object String]
console.log(runToString(/devpoint/)); // [object RegExp]為了區(qū)分特殊設(shè)計(jì)對象和普通對象，可以用下面的函數(shù)來實(shí)現(xiàn)。
function isPlainObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
}很多時(shí)候，我們希望一個(gè)函數(shù)只執(zhí)行一次。如果多次調(diào)用該函數(shù)，則只會(huì)執(zhí)行第一次。
3.once
vue/src/shared/util.js
很多時(shí)候，我們希望一個(gè)函數(shù)只執(zhí)行一次。如果多次調(diào)用該函數(shù)，則只會(huì)執(zhí)行第一次。
function once(fn) {
let called = false;
return function () {
if (!called) {
called = true;
fn.apply(this, arguments);
}
};
}
function launchRocket() {
console.log("我已經(jīng)執(zhí)行了");
}
const launchRocketOnce = once(launchRocket);
launchRocketOnce();
launchRocketOnce();
launchRocketOnce();4.瀏覽器嗅探
vue/src/core/util/env.js
我們知道Javascript可以在瀏覽器、nodejs等環(huán)境中運(yùn)行，那么如何檢查當(dāng)前的Javascript代碼是否在瀏覽器環(huán)境中運(yùn)行？
如果Javascript在瀏覽器環(huán)境中運(yùn)行，則會(huì)有一個(gè)全局對象：window。因此，可以通過以下方式判斷環(huán)境：
const inBrowser = typeof window !== "undefined";
在Chrome中執(zhí)行
在Node中執(zhí)行
如果腳本在瀏覽器環(huán)境中運(yùn)行，那么我們可以通過以下方式獲取瀏覽器的userAgent：
const UA = inBrowser && window.navigator.userAgent.toLowerCase();
在Chrome中執(zhí)行
不同的瀏覽器具有不同的userAgent。在Internet Explorer的userAgent中，始終包含單詞MSIE和Trident。在Chrome瀏覽器的userAgent中，始終包含Chrome一詞。
同樣，在Android操作系統(tǒng)瀏覽器中，userAgent始終包含單詞Android。在iOS中，總是有iPhone、iPad、iPod、iOS一詞。
因此，可以通過檢查userAgent來確定當(dāng)前的瀏覽器供應(yīng)商和操作系統(tǒng)。
export const UA = inBrowser && window.navigator.userAgent.toLowerCase();
export const isIE = UA && /msie|trident/.test(UA);
export const isIE9 = UA && UA.indexOf("msie 9.0") > 0;
export const isEdge = UA && UA.indexOf("edge/") > 0;
export const isAndroid = (UA && UA.indexOf("android") > 0) || weexPlatform === "android";
export const isIOS = (UA && /iphone|ipad|ipod|ios/.test(UA)) || weexPlatform === "ios";
export const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge;
export const isPhantomJS = UA && /phantomjs/.test(UA);
export const isFF = UA && UA.match(/firefox\/(\d+)/);附帶說明一下，Edge和Chrome均基于Chromium，因此兩種瀏覽器的userAgent都包含Chrome一詞。也就是說，當(dāng)瀏覽器的userAgent中包含Chrome一詞時(shí)，該瀏覽器不一定是Chrome。const isChrome = UA && /chrome\/\d+/.test(UA) && !isEdge
到此這篇關(guān)于4個(gè)值得收藏的Javascript技巧的文章就介紹到這了,更多相關(guān)Javascript技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
IE6、IE7中獲取Button元素的值的bug說明，大家在以后使用dom操作的朋友可以注意下。2011-08-08
bootstrap switch開關(guān)組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了bootstrap switch開關(guān)組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了javascript判斷firebug是否開啟的方法,結(jié)合實(shí)例形式分析了javascript基于console控制臺方法判斷firebug開啟狀態(tài)的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧總結(jié)
這篇文章主要介紹了js操作table元素實(shí)現(xiàn)表格行列新增、刪除技巧,以實(shí)例形式分析總結(jié)了JavaScript針對table表格進(jìn)行行列的增加與刪除相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11
js函數(shù)中有三個(gè)在特定場合很好用的函數(shù):reduce(),map(),filter()。而數(shù)組經(jīng)常用到的方法有push、join、indexOf、slice等等，但是有一個(gè)經(jīng)常被我們忽略的方法：reduce，這個(gè)方法簡直強(qiáng)大的不要不要的。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-12-12
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)百度搜索框，實(shí)時(shí)返回搜索建議項(xiàng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
在本篇文章里小編給大家分享了關(guān)于js取小數(shù)點(diǎn)后兩位四種方法和實(shí)例代碼，需要的朋友們學(xué)習(xí)下。2019-01-01
下面小編就為大家?guī)硪黄趯ο蠛喜⒐δ艿膶?shí)現(xiàn)示例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
js與vue如何實(shí)現(xiàn)自動(dòng)全屏顯示效果
這篇文章主要給大家介紹了關(guān)于js與vue如何實(shí)現(xiàn)自動(dòng)全屏顯示效果的相關(guān)資料,在vue項(xiàng)目中做一個(gè)可以控制頁面全屏展示的效果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了如何在TypeScript中使用函數(shù)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11