读汤姆大叔深入理解JavaScript系列（3）：全面解析Module模式

最新推荐文章于 2025-09-10 16:16:57 发布

转载最新推荐文章于 2025-09-10 16:16:57 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xxtkong/archive/2012/12/20/2826640.html

文章标签：

#javascript #ViewUI

本文详细解析JavaScript模块模式的基本特征，包括模块化、封装变量与函数、私有与公共方法的区别，并通过实例展示了如何使用匿名闭包、引用全局变量、声明全局变量等方式实现模块化编程。同时，提供了关于模块模式的代码示例，帮助开发者更好地理解和应用这一概念。

原文地址：http://www.cnblogs.com/TomXu/archive/2011/12/30/2288372.html

理解：Module模式的基本特征：

模块化，可重用
封装了变量和function，和全局的namaspace不接触，松耦合
只暴露可用public的方法，其它私有方法全部隐藏

基本用法（引用大叔）：

var Calculator = function (eq) {
//这里可以声明私有成员

var eqCtl = document.getElementById(eq);

return {
// 暴露公开的成员
        add: function (x, y) {
var val = x + y;
            eqCtl.innerHTML = val;
        }
    };
};

匿名闭包：
1:（function(){
　　//程序代码
}()）
2:(function(){

})()

引用全局变量：
（function(jquery){

}）（jquery）

声明全局变量：

var blogModule = (function () {
var my = {}, privateName = "博客园";

function privateAddTopic(data) {
// 这里是内部处理代码
    }

    my.Name = privateName;
    my.AddTopic = function (data) {
        privateAddTopic(data);
    };

return my;
} ());