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

在 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 

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/56793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浏览器实时更新esp32-c3 Supermini http server 数据

一利用此程序的思路就可以用浏览器显示esp32 采集的各种传感器的数据,也可以去控制各种传感器。省去编写针对各系统的app. 图片 1.浏览器每隔1秒更新一次数据 2.现在更新的是开机数据,运用此程序,可以实时显示各种传感器的实时数据 3.es…

【计算机网络 - 基础问题】每日 3 题(四十七)

✍个人博客:https://blog.csdn.net/Newin2020?typeblog 📣专栏地址:http://t.csdnimg.cn/fYaBd 📚专栏简介:在这个专栏中,我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话,欢迎点赞…

Cesium 实战 - 自定义纹理材质 - 立体墙(旋转材质)

Cesium 实战 - 自定义纹理材质 - 立体墙(旋转材质) 核心代码完整代码在线示例Cesium 给实体对象(Entity)提供了很多实用的样式,基本满足普通项目需求; 但是作为 WebGL 引擎,肯定不够丰富,尤其是动态效果样式。 对于实体对象(Entity),可以通过自定义材质,实现各种…

YOLOv11来了 | 自定义目标检测

概述 YOLO11 在 2024 年 9 月 27 日的 YOLO Vision 2024 活动中宣布:https://www.youtube.com/watch?vrfI5vOo3-_A。 YOLO11 是 Ultralytics YOLO 系列的最新版本,结合了尖端的准确性、速度和效率,用于目标检测、分割、分类、定向边界框和…

esp32-c3 Supermini 驱动ds3121的问题

c3 驱动ds3121 ,始终有问题,但把程序用esp32上,一点问题都没有,难道c3 的i2c库是另外的库, 下图只读取秒显示的 错误数据,更换了scl频率,针脚,还是错,但换成esp32 输出是正确连续秒…

基于STM32单片机设计的矿山环境作业安全监测系统

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成【4】需求总结1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发1.5 模块的技术详情介绍【1】BC26-NBIOT模块【2】DHT11温湿度模块【3】PM2.5粉尘模块二…

开机引导项修改 BCDEdit

BCDEdit C:\Users\san>BCDEditWindows 启动管理器 -------------------- 标识符 {bootmgr} device partition\Device\HarddiskVolume1 path \EFI\Microsoft\Boot\bootmgfw.efi description Windows Boo…

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

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

鸿蒙开发 四十七 Promise async await

1、Promise是接口 鸿蒙sdk提供的ProPromise版本有点多,是泛型接口,用interface修饰,官网给出的解释是“Represents the completion of an asynchronous operation”,翻译大概意思是:异步操作的完成的处理,总…

全球知名度最高的华人改名大师颜廷利:世界公认的三大哲学家思想家

颜廷利教授,一位享誉全球的思想巨擘与现代国学泰斗,以其卓越的哲学地位和深远的影响力,成为当代思想界的璀璨明星。他的哲学思想深邃而广博,不仅涵盖了人的全面发展、自然社会的深度融合,更在教育理念上独树一帜&#…

2.2机器学习--逻辑回归(分类)

目录 1.算法介绍 2.算法原理 3. API 介绍 4.代码示例 本章节我们来学习线性分类问题,在有监督学习中,最主要的两种学习任务是 回归(regression) 和 分类(classification),而其中线性回归和线…

JR_T0213—2021 金融网络安全 Web应用服务安全测试通用规范.pdf

预览 内容太多,自己下载看吧 https://www.mhtsec.com/667/

CSP-J2023年复赛

P9748 [CSP-J 2023] 小苹果 Code #include<iostream> #include<cmath> using namespace std; int n , ans , sum; int main(){cin >> n;while(n){sum ;if(n % 3 1 && !ans) ans sum;n - ceil(n / 3.0);}cout << sum << " "…

精选20个爆火的Python实战项目(含源码),直接拿走不谢!

今天给大家介绍20个非常实用的Python项目&#xff0c;帮助大家更好的学习Python。 完整版Python项目源码&#xff0c;【点击这里】领取&#xff01; ① 猜字游戏 import random def guess_word_game(): words ["apple", "banana", "cherry&quo…

1. 安装框架

一、安装 Laravel 11 框架 按照官方文档直接下一步安装即可 1. 安装步骤 2. 执行数据库迁移 在.env文件中提前配置好数据库连接信息 php artisan migrate二、安装 Filament3.2 参考 中文文档 进行安装 1. 安装 拓展包 composer require filament/filament:"^3.2" -W…

双十一有啥不能错过的好物清单?真心为你带来2024最值好物分享!

双十一购物狂欢节即将到来&#xff0c;许多朋友们都在期待着这一天&#xff0c;希望能够在这个特别的日子里为自己添置一些日常用品。今天&#xff0c;我特意为大家精心挑选了五款在生活中都会用得到的好物&#xff0c;希望能够帮助大家在双十一期间做出明智的选择。 最值好物…

【java面经thinking】四

目录 悲观锁synchronized synchronized的用法 只能锁引用类型 对象的内存布局&#xff08;引用型&#xff09; JDK1.6之前的锁----重量级锁 1.6之后---偏向锁&#xff0c;轻量级锁(自适应自旋锁) 偏向锁 轻量级锁 区别 某些场景使用重量级锁的原因 synchronized是不公…

电脑基础知识:mfc110.dll丢失的解决方法

1.mfc110.dll 丢失常见原因 mfc110.dll 文件的丢失或损坏是Windows系统中常见的问题&#xff0c;它可能由多种原因引起&#xff0c;以下是一些主要的因素&#xff1a; 不完全的软件卸载 在卸载程序时&#xff0c;如果相关的 DLL 文件没有被正确移除&#xff0c;可能会导致文件…

386. 字典序排数

难度&#xff1a;中等 题目&#xff1a; 给你一个整数 n &#xff0c;按字典序返回范围 [1, n] 内所有整数。 你必须设计一个时间复杂度为 O(n) 且使用 O(1) 额外空间的算法。 示例 1&#xff1a; 输入&#xff1a;n 13 输出&#xff1a;[1,10,11,12,13,2,3,4,5,6,7,8,9]示…

华为ENSP用户权限深度解析:构建安全高效的网络管理

在华为ENSP&#xff08;Enterprise Network Simulation Platform&#xff09;用户界面中&#xff0c;用户权限级别是一个重要的概念&#xff0c;它用于限制不同用户访问设备的权限&#xff0c;从而增加设备管理的安全性。以下是对华为ENSP用户界面用户权限级别的详细解释&#…