JavaScript 自执行函数防止冲突全局作用域变量 - 在线客服源码实现弹窗效果JavaScript SDK...

news2024/12/26 0:28:24

当我在实现在线客服源码弹窗效果JavaScript SDK时,对外公开的SDK代码就是使用的自执行函数的形式。

使用自执行函数来实现 JavaScript SDK 有以下好处:

  • 封装代码:自执行函数可以将你的 JavaScript 代码封装起来,从而避免在全局作用域中定义变量,防止变量名称冲突。

  • 提供 API:自执行函数可以提供 API,方便调用者使用。例如,你可以在自执行函数中定义一些方法,然后将这些方法暴露给调用者使用。

  • 控制变量作用域:自执行函数可以控制变量的作用域,从而避免在全局作用域中定义变量。这样,你就可以在函数内部定义局部变量,避免对全局变量造成影响

自执行函数(IIFE)是指在定义完成后立即执行的函数。

自执行函数的语法形式如下:

(function() {
  // 函数体
})();

或者:

(function() {
  // 函数体
}());

自执行函数可以用来封装你的 JavaScript 代码,避免在全局作用域中定义变量,从而防止变量名称冲突。

例如,你可以使用自执行函数来封装你的 JavaScript 代码,并在函数中定义局部变量。

例如:

(function() {
  // 在这里定义局部变量
  const myLocalVariable = 'hello';
  // 使用局部变量
  console.log(myLocalVariable);
})();

这样,你就可以在自执行函数中定义局部变量,并避免在全局作用域中定义变量了。

自执行函数还可以传递参数,例如:

(function(param1, param2) {
  // 在这里使用函数参数
  console.log(param1, param2);
})('hello', 'world');

这样,你就可以在自执行函数中传递参数了。

如果传递的参数是window

如果在自执行函数中传递 window 对象,并将一个属性赋值给 window 对象,则该属性将成为全局变量。

例如,你可以使用如下代码来定义一个全局变量:

(function(global) {
  global.myGlobalVariable = 'hello';
})(window);

这样,你就可以在全局作用域中访问 myGlobalVariable 变量了。

自执行函数还有另外一种写法,即 !function

!function() {
  // 函数体
}();

这种写法与上述自执行函数的写法类似,但是在函数定义前使用了一个感叹号(!)。

这种写法的原理是,在 JavaScript 中,感叹号(!)是布尔取反运算符,可以将布尔值取反。例如:

console.log(!true); // 输出 false
console.log(!false); // 输出 true

因此,使用感叹号(!)来定义自执行函数,相当于将函数定义转换为布尔值,然后对其取反,最后执行取反后的函数。

唯一在线客服系统

https://gofly.v1kf.com

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

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

相关文章

文件字节输出流、文件拷贝、资源释放的2种方式

文件字节输出流:写字节数据到文件: API: 注意:close() 包含了 flush() ; 关闭后流就不可以继续使用了 写一个字节出去: 98表示一个字节 写一个字节数组: 注意:写数字和字母可以直接写出去,但…

【二分查找】有界数组中指定下标处的最大值

题目描述 给你三个正整数 n、index 和 maxSum 。你需要构造一个同时满足下述所有条件的数组 nums&#xff08;下标 从 0 开始 计数&#xff09;&#xff1a; nums.length nnums[i] 是 正整数 &#xff0c;其中 0 < i < nabs(nums[i] - nums[i1]) < 1 &#xff0c;其…

leetcode 2244. Minimum Rounds to Complete All Tasks(完成所有task至少要多少轮)

tasks数组里面的数字表示难度的等级&#xff0c;每一轮只能完成2 或者 3个同等级的task, 问至少需要多少轮能完成所有的task, 不能完成的返回-1. 思路&#xff1a; 先来看下什么情况下不能完成。 由于一轮只能完成2 或 3个&#xff0c;那如果该等级的task只有一个呢&#xff…

P1-- 信号--通讯原理

前言&#xff1a; 最近看了《无线系统设计与国际标准》后面的几个核心技术 OFDM,Modulation&#xff0c;格雷码&#xff0c;MIMO 等技术&#xff0c;其底层的数学思想主要包括傅里叶变换 &#xff0c;狄拉克函数&#xff0c;卷积&#xff0c;线性代数基础运算。 这边结合 北京…

Electron开发-从推门到进门

一、Electron 的介绍 Electron是利用web前端技术进行桌面应用开发的一套框架。是由 github 开发的开源框架&#xff0c;允许开发者使用 Web 技术构建跨平台的桌面应用&#xff0c;它的基本结构&#xff1a; Electron Chromium Node.js Native API Chromium&#xff1a;为 …

大数据挖掘-伤寒论和金匮要略(COVID-19用药启示录)

来自Toby老师&#xff0c;大数据挖掘-伤寒论和金匮要略 大家好&#xff0c;我是Toby老师&#xff0c;三年来新冠病毒肆虐全球&#xff0c;带来一些列症状&#xff0c;例如发热&#xff0c;恶寒&#xff0c;咳嗽&#xff0c;咽喉痛&#xff0c;腹泻&#xff0c;心脑血管疾病等等…

最低成本尝试做游戏的方式

本文首发于微信公众号&#xff1a;小蚂蚁教你做游戏。欢迎关注领取更多学习做游戏的原创教程资料&#xff0c;每天学点儿游戏开发知识。嗨&#xff01;大家好&#xff0c;我是小蚂蚁。如果说有 100 个人想过去做游戏的话&#xff0c;那么最终大概只有不到 20 个人真的去尝试了&…

【TypeScript】TS类型断言-类型的声明和转换(五)

&#x1f431;个人主页&#xff1a;不叫猫先生 &#x1f64b;‍♂️作者简介&#xff1a;前端领域新星创作者、华为云享专家、阿里云专家博主&#xff0c;专注于前端各领域技术&#xff0c;共同学习共同进步&#xff0c;一起加油呀&#xff01; &#x1f4ab;系列专栏&#xff…

echartjs 实现 cross (十星辅助线)跟随吸附高亮点

前言 项目是金融项目&#xff0c;就像支付宝基金的走势图一样。但图表库使用的是 echart 而不是 antv 的 f2&#xff0c;要问为什么不直接用 f2 &#xff1f;问就是因为项目历史包袱。 背景 了解过 echart 的都知道&#xff0c;官方提供了十星辅助线&#xff0c;只要设置 ax…

服务端渲染和客户端渲染

介绍 服务端渲染 servlet开发 浏览器请求servlet&#xff0c;servlet在服务端生成html 响应给浏览器&#xff0c;浏览器展示html的内容&#xff0c;这个过程就是服务端渲染。 输入url——>请求到tomcat——Servlet / jsp来解析解析用户请求并处理——>服务端渲染生成ht…

收藏网页版小游戏:蜘蛛纸牌、扫雷、水果忍者、打地鼠、吃豆人

学习之余当然是摸鱼了&#xff0c;这里分享几个不用下载直接在线玩耍的游戏。有蜘蛛纸牌网页版在线玩、在线扫雷小游戏、在线玩的水果忍者、吃豆人、打地鼠、3D模仿。 下面我将一个个列出来。欢迎体验收藏&#xff01; 蜘蛛纸牌&#xff1a;这是一款刺激好玩的棋牌小游戏。大家…

【C语言航路】第九站:数据的存储

目录 一、数据类型介绍 1.基本的内置数据类型 2.类型的基本归类 二、整型在内存中的存储 1.原码反码补码 2.大端字节序与小端字节序 3.一些经典的题目 三、浮点型在内存中的存储 总结 一、数据类型介绍 1.基本的内置数据类型 这部分我们在一开始的时候已经说过了&…

中职组网络安全2022年安徽省赛信息隐藏与探索

首先这一套题目我们先看一下环境: 以上来给到了一个主页的网站,做这样的题目我们第一个想到的就是源代码,于是我们查找源代码看看里边有什么东西: 在contact.php中发现了flag1,但是这一看就是一个base64代码,我们将其进行解密:

华脉智联可视化指挥调度系统

华脉智联可视化指挥调度系统&#xff0c;多端一体化综合智能指挥调度平台&#xff0c;可以实现对各级人员、设备、系统统一指挥&#xff0c;应急调度&#xff0c;为行业应用提供可视化智能指挥调度系统解决方案。 1、可视化指挥调度系统介绍 可视化指挥调度系统基于现有的4G通信…

处理WM_KILLFOCUS消息时需要注意的地方

之前我在一篇文章中曾经提过&#xff0c;不应该利用 WM_KILLFOCUS 消息中对表单的字段进行有效性校验。 今天的文章&#xff0c;我将介绍另外一个反面例子&#xff0c;来表现当使用 WM_KILLFOCUS 消息处理焦点相关的问题时所带来的混乱。 假设&#xff0c;有一个编辑框控件使用…

编写 MBR 主引导记录

文章目录前言mbs.S代码实验操作前言 本博客记录《操作系统真象还原》第二章最后一节的实验操作~ 实验需要安装Bochs软件&#xff0c;具体可食用Bochs下载安装博客。 实验环境&#xff1a;ubuntu18.04VMware 实验内容&#xff1a;在屏幕上打印字符串“1 MBR”&#xff0c;背…

C进阶_C语言_指针进阶_C语言指针进阶

除了自己的无知&#xff0c;我什么都不懂。 ——苏格拉底 *此博客为进阶指针详解&#xff0c;需要有一定的初阶指针基础。 我们知道&#xff0c;指针就是个变量&#xff0c;用来存放地址&#xff0c;地址唯一标识一块内存空间。 指针的大小是固定的4/8个字节。在32位平台上是…

003-Ensp-实验-配置DHCP

实验要求 1. 根据网络结构开DHCP服务&#xff0c;使PC1 / PC2 自动获取IP地址并可以互Ping 网络结构 实验步骤 1. 配置AR2路由器g0/0/0接口IP&#xff0c;开启DHCP <Huawei>system-view [Huawei]dhcp enable [Huawei]interface g0/0/0 [Huawei-GigabitEthernet0/0/0]…

公司变更名称很麻烦吗?来来来,心周小编教你小技巧

我们都知道&#xff0c;公司如果拥有一个好的名字&#xff0c;对公司的推广会带来很大的便利&#xff0c;让客户更容易记住公司&#xff0c;记住公司的产品及相关性能&#xff0c;比如奥迪汽车公司&#xff0c;大家能一下子想到奥迪车&#xff0c;想到奥迪车的设计&#xff0c;…

UG/NX二开Siemens官方实例解析 4.3 EX_Curve_CreateSpline(创建样条曲线)

前言本系列文章主要讲解NXOpen UF API&#xff08;简称ufun函数&#xff09;的使用&#xff0c;之前看教学视频大都建议用ufun进行开发&#xff0c;这里西门子官方还专门给了一套系列文章来讲&#xff0c;说明官方也是特别推崇ufun。本人从事二开也有一段时间了&#xff0c;我的…