JavaScript 自执行函数防止冲突全局作用域变量 - 在线客服源码实现弹窗效果JavaScript SDK
2023-06-13 09:16:30 时间
当我在实现在线客服源码弹窗效果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
因此,使用感叹号(!)来定义自执行函数,相当于将函数定义转换为布尔值,然后对其取反,最后执行取反后的函数。
相关文章
- 纯JavaScript二维码在线生成网页源码「建议收藏」
- 理解javascript异步编程中promise可以很简单
- SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- 使用js加载器动态加载外部Javascript文件详解编程语言
- JavaScript学习总结(十七)——Javascript原型链的原理详解编程语言
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- Javascript常用运算符(Operators)-javascript基础教程
- Javascript优化技巧(文件瘦身篇)
- 无废话JavaScript教程(全集)
- javascript打印页面代码
- 保证JavaScript和Asp、Php等后端程序间传值编码统一
- javascript模拟Marquee文字向左均匀滚动代码
- javascript添加和移除函数的通用方法
- JavaScript设计模式富有表现力的Javascript(一)
- JavaScript去掉数组中的重复元素
- Javascript异步加载详解(浏览器在javascript的加载方式)
- javascript学习笔记(十九)节点的操作实现代码
- JavaScript高级程序设计阅读笔记(十六)javascript检测浏览器和操作系统-detect.js
- Javascript获取窗口(容器)的大小及位置参数列举及简要说明
- JavaScript中“过于”犀利地for/in循环使用示例
- javascript中验证大写字母、数字和中文
- javascript生成json数据简单示例分享
- JavaScript通过正则表达式实现表单验证电话号码
- Javascript基础教程之JavaScript语法