JavaScript 中怎么判断前端各种运行环境
在 JavaScript 中，可以通过多种方式来判断前端应用的运行环境，比如浏览器环境、Node.js 环境、React Native 环境等。以下是一些常见的方法：
目录
1. 判断是否在浏览器环境中
使用 typeof window
//window对象在浏览器中作为全局对象存在的特点，在Node.js环境中不存在的。
if (typeof window !== 'undefined') {
console.log('Running in a browser environment');
} else {
console.log('Not running in a browser environment');
}使用 navigator.userAgent
if (typeof navigator !== 'undefined' && navigator.userAgent) {
console.log('Running in a browser environment');
} else {
console.log('Not running in a browser environment');
}2. 判断是否在 Node.js 环境中
使用 typeof module 和 typeof require
//Node.js环境有一个全局对象global，这在浏览器中是不存在的
if (typeof module !== 'undefined' && module.exports && typeof require === 'function') {
console.log('Running in a Node.js environment');
} else {
console.log('Not running in a Node.js environment');
}3. 判断是否在 React Native 环境中
使用 typeof global
if (typeof global !== 'undefined' && global.__fbBatchedBridge) {
console.log('Running in a React Native environment');
} else {
console.log('Not running in a React Native environment');
}4. 判断是否在 Electron 环境中
使用 process.versions.electron
if (typeof process !== 'undefined' && process.versions && process.versions.electron) {
console.log('Running in an Electron environment');
} else {
console.log('Not running in an Electron environment');
}5. 判断是否在微信小程序环境中
使用 typeof wx
if (typeof wx !== 'undefined' && wx.getSystemInfo) {
console.log('Running in a WeChat Mini Program environment');
} else {
console.log('Not running in a WeChat Mini Program environment');
}6. 判断是否在 Vue.js 环境中
使用 Vue 对象
if (typeof Vue !== 'undefined') {
console.log('Running in a Vue.js environment');
} else {
console.log('Not running in a Vue.js environment');
}7. 判断是否在 Angular 环境中
使用 ng 对象
if (typeof ng !== 'undefined') {
console.log('Running in an Angular environment');
} else {
console.log('Not running in an Angular environment');
}8. 判断是否在 React 环境中
使用 React 对象
if (typeof React !== 'undefined') {
console.log('Running in a React environment');
} else {
console.log('Not running in a React environment');
}9. 开发环境与生产环境检测
//环境变量的命名实际情况而定
let isDev = process.env.VUE_APP_MODE == 'dev';
if (isDev) {
// 开发环境相关的代码
} else {
// 生产环境相关的代码
}
10. 判断是否是移动端
function isMobile() {
return /Mobi|Android/i.test(navigator.userAgent);
}
if (isMobile()) {
console.log('Running on a mobile device');
} else {
console.log('Not running on a mobile device');
}11. 判断是否是 iPad
function isiPad() {
return /iPad/i.test(navigator.userAgent);
}
if (isiPad()) {
console.log('Running on an iPad');
} else {
console.log('Not running on an iPad');
}12. 判断是否是 iPhone
function isiPhone() {
return /iPhone/i.test(navigator.userAgent) && !isiPad();
}
if (isiPhone()) {
console.log('Running on an iPhone');
} else {
console.log('Not running on an iPhone');
}13. 判断是否是微信
function isInWeChat() {
return /MicroMessenger/i.test(navigator.userAgent);
}
if (isInWeChat()) {
console.log('Running in WeChat');
} else {
console.log('Not running in WeChat');
}14. 判断是否是 QQ
function isInQQ() {
return /QQ/i.test(navigator.userAgent);
}
if (isInQQ()) {
console.log('Running in QQ');
} else {
console.log('Not running in QQ');
}15. 判断是否是 iOS 设备
function isiOS() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
if (isiOS()) {
console.log('Running on an iOS device');
} else {
console.log('Not running on an iOS device');
}16. 判断是否是 Android 设备
function isAndroid() {
return /Android/i.test(navigator.userAgent);
}
if (isAndroid()) {
console.log('Running on an Android device');
} else {
console.log('Not running on an Android device');
}通过这些方法，你可以根据不同的环境变量和全局对象来判断前端应用的运行环境。如有不足或错误请指出
原文地址：https://blog.csdn.net/qq505751223/article/details/143055240
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！