JavaScript 中怎么判断前端各种运行环境

server/2024/10/20 1:13:34/

在 JavaScript 中,可以通过多种方式来判断前端应用的运行环境,比如浏览器环境、Node.js 环境、React Native 环境等。以下是一些常见的方法:

目录

1. 判断是否在浏览器环境中

2. 判断是否在 Node.js 环境中

3. 判断是否在 React Native 环境中

4. 判断是否在 Electron 环境中

5. 判断是否在微信小程序环境中

6. 判断是否在 Vue.js 环境中

7. 判断是否在 Angular 环境中

8. 判断是否在 React 环境中

9. 开发环境与生产环境检测 

 10. 判断是否是移动端

11. 判断是否是 iPad

12. 判断是否是 iPhone 

13. 判断是否是微信 

14. 判断是否是 QQ

 15. 判断是否是 iOS 设备

16. 判断是否是 Android 设备 


1. 判断是否在浏览器环境中

使用 typeof window 

javascript">//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

javascript">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   

javascript">//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

javascript">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

javascript">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

javascript">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 对象

javascript">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 对象

javascript">if (typeof ng !== 'undefined') {console.log('Running in an Angular environment');
} else {console.log('Not running in an Angular environment');
}

8. 判断是否在 React 环境中

使用 React 对象

javascript">if (typeof React !== 'undefined') {console.log('Running in a React environment');
} else {console.log('Not running in a React environment');
}

9. 开发环境与生产环境检测 

javascript">                      //环境变量的命名实际情况而定
let isDev = process.env.VUE_APP_MODE == 'dev';
if (isDev) {// 开发环境相关的代码
} else {// 生产环境相关的代码
}

 10. 判断是否是移动端

javascript">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

javascript">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 

javascript">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. 判断是否是微信 

javascript">function isInWeChat() {return /MicroMessenger/i.test(navigator.userAgent);
}if (isInWeChat()) {console.log('Running in WeChat');
} else {console.log('Not running in WeChat');
}

14. 判断是否是 QQ

javascript">function isInQQ() {return /QQ/i.test(navigator.userAgent);
}if (isInQQ()) {console.log('Running in QQ');
} else {console.log('Not running in QQ');
}

 15. 判断是否是 iOS 设备

javascript">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 设备 

javascript">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');
}

通过这些方法,你可以根据不同的环境变量和全局对象来判断前端应用的运行环境。如有不足或错误请指出


http://www.ppmy.cn/server/133200.html

相关文章

Nature 正刊丨从植物吸收羰基硫推断陆地光合作用

01摘要 陆地光合作用或总初级生产力(GPP)是生物圈中最大的碳通量,但其全球规模和时空动态仍不确定1。历史上认为全球年平均GPP约为120 PgC yr-1(参考文献2,3,4,5,6),比根据氧-18(18O&#xff09…

Require:业界优秀的HTTP管理方案。

方案异步JDK额外依赖特点HttpURLConnection 【优点】Java内置,简单易用。对于简单的HTTP请求和响应处理非常合适。 【缺点】功能相对较少,不支持现代特性(如异步请求、连接池等)。API相对繁琐,处理复杂请求时代码冗长。…

K8s的储存

一 configmap 1.1 configmap的功能 configMap用于保存配置数据,以键值对形式存储。 configMap 资源提供了向 Pod 注入配置数据的方法。 镜像和配置文件解耦,以便实现镜像的可移植性和可复用性。 etcd限制了文件大小不能超过1M 1.2 configmap的使用场…

SLAM评估工具evo学习

参考链接 官方github:https://github.com/MichaelGrupp/evo 一、 指令分析 1.1 tum数据集,evo_ape指令 evo_ape {kitti,tum,euroc,bag} -h evo_ape tum -h(1) 终端输入: evo_ape tum -h (2) 终端打印: usage: evo_ape tum …

pytorch训练和使用resnet

pytorch训练和使用resnet 使用 CIFAR-10数据集 训练 resnet resnet-train.py import torch import torchvision import torchvision.transforms as transforms import torch.nn as nn import torch.optim as optim# 在CIFAR-10数据集中 # 训练集:包含50000张图像…

滚雪球学Redis[3.3讲]:Redis数据持久化深入探讨:从 AOF 到混合持久化的演进

全文目录: 前言混合持久化1. RDB 与 AOF 之间的权衡2. 混合持久化的工作原理工作机制详解 3. 配置与实践实例演示 4. 实际应用中的案例分析5. 深入探讨混合持久化的优势与局限6. 扩展思考:如何选择 Redis 的持久化策略? 总结附:案…

字节跳动实习生投毒自家大模型细节曝光 影响到底有多大?

10月19日,字节跳动大模型训练遭实习生攻击一事引发广泛关注。据多位知情人士透露,字节跳动某技术团队在今年6月遭遇了一起内部技术袭击事件,一名实习生因对团队资源分配不满,使用攻击代码破坏了团队的模型训练任务。 据悉&#xf…

驱动开发系列21 - 编译内核模块的Makefile解释

一:内核模块Makefile #这一行定义了要编译的内核模块目标文件。obj-m表示目标模块对象文件(.o文件), #并指定了两个模块源文件:helloworld-params.c 和 helloworld.c。最终会生成这 #这两个.c文件的.o对象文件。 obj-m := helloworld-params.o helloworld.o#这行定义了内核…