【学习】Javascript设计模式——Module模式

最新推荐文章于 2023-10-09 23:00:02 发布

Jafeney

最新推荐文章于 2023-10-09 23:00:02 发布

阅读量740

点赞数 1

分类专栏：设计模式 js web前端文章标签：设计模式 javascript 函数

本文链接：https://blog.csdn.net/u011413061/article/details/50256737

版权

web前端同时被 3 个专栏收录

84 篇文章 1 订阅

订阅专栏

39 篇文章 0 订阅

订阅专栏

设计模式

10 篇文章 0 订阅

订阅专栏

写在前面

Module模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。而在Javascript中，Module模式用于进一步模拟类的概念，通过这种方式，能够使一个单独的对象拥有公有/私有的方法和变量，从而屏蔽来自全局作用域的特殊部分。产生的结果是：函数名与在页面上其他脚本定义的函数冲突的可能性降低。

应当注意的一点是：在Javascript没有private访问修饰符因此算不得真正的私有，而是通过函数作用域来模拟私有这个概念。在Module模式内由于闭包的存在，声明的变量和方法只在该模式内部可用，但在返回对象上定义的变量和方法是可以对外访问的。

示例

var testModule=(function(){
    var counter=0;
    return{
        incrementCounter:function(){
            return ++counter;
        },
        resetCounter:function(){
            console.log("counter value prior to reset:"+counter);
            counter=0;
        }
    };
})();
//增加计数器
testModule.incrementCounter();
//加长计数器值并重置
testModule.resetCounter();

Module模式变化

引入混入

这种变化允许我们把全局变量（如jQUery、Underscore）作为参数传递给模块的匿名函数，并按照我们所希望的为它们取个本地别名。

var myModule=(function(jQ,_){
    function privateMethod1(){
        jQ(".container").html("test");
    }
    function privateMethod2(){
        console.log(_.min([10,5,100,2,1000]));
    }
    return{
        publicMethod:function(){
            privateMethod1();
        }
    };
//引入jQuery对象和underscore对象
})(jQuery,_);

引出

这种变化允许我们声明全局变量，而不需要实现它们，并可以同样地支持上一个实例中全局引入的概念。

var myModule=(function(){
    //模块对象
    var module={},
    privateVariable="Hello World";
    function privateMethod(){
        //....
    }

    module.publicProperty="Foobar";
    module.publicMethod=function(){
        console.log(privateVariable);
    }
    return module;
})();