JavaScript自执行函数与伪命名空间封装详解

自执行函数基本概念

自执行函数是指那些在代码被解释执行时就会立即运行的函数，这与常规函数需要被显式调用才会执行不同。

其标准语法结构通常表现为：(function() { 函数体 })();

通常情况下，自执行函数内部会包含一个function() {}形式的匿名函数定义。

伪命名空间封装实现

以下代码演示了如何在window对象中创建一个名为mySpace的命名空间，并将自执行函数内部的方法封装在该命名空间下，从而方便外部调用这些功能。

 
(function() {
// 根据id获取DOM对象
function $(id) { return document.getElementById(id); }
// 内部辅助函数，外部无法直接访问
function _setStyle(id, styleName, styleValue) {
$(id).style[styleName] = styleValue;
} 
// 创建伪命名空间对象
window.mySpace = {};
// 将内部函数_setStyle挂载到mySpace命名空间下
// 外部调用时需通过window.mySpace.setStyle(id, styleName, styleValue)访问
window.mySpace.setStyle = _setStyle;
})(); 
// 以下是测试代码部分
window.onload = function() {
// 将id为test的元素文字颜色设置为红色
window.mySpace.setStyle("test", "color", "#f00");
} 

封装方式的优势与对比

那么，这种封装方式具体带来了哪些优势呢？

其核心好处在于保护了自执行函数内部的方法、变量和属性不被外部直接访问，从而提高了代码的安全性。

如果不采用这种封装方式，也可以通过以下方式实现类似功能。

 
window.mySpace = {};
window.mySpace.$ = function(id) { return document.getElementById(id); }
window.mySpace.setStyle = function(id, styleName, styleValue) {
window.mySpace.$("test").style[styleName] = styleValue;
} 
// 以下是测试代码部分
window.onload = function() {
window.mySpace.setStyle("test", "backgroundColor", "#f00");
window.mySpace.setStyle("test", "color", "#fff");
} 

上述代码与自执行函数实现的功能在结果上是相同的。

经过对比可以发现，第二种方法虽然更加直观且易于理解，但缺少了封装过程，导致代码逻辑完全暴露在外，安全性较低。