(2) Module （模块）模式 || (Revealing Module)揭示模式

在这里将模块模式和揭示模式一起说了，因为揭示模式是模块模式的改良。

该风格的模式，是建立在对象字面量上面的，最基本的对象字面量的形式是：

var Car = {};

基于对象字面量的模式的实现方式：

 var Car = {
        color: 'white',
        getCarPrice: function () {
        },
        getCarColor: function () {
            console.log(this.color);
        }
    };
    Car.getCarColor();

再做深入的理解，在该模式上实现private和public的方法和变量的方式，这种风格就偏向于揭示模式

var testModule = function(){
        var privateValue = 1;
        var publicValue = 2;
        var privateMethod = function(){};
        var publicMethod = function(){
            console.log(privateValue);
        };

        var service = {
            publicMethod:publicMethod,
            publicValue:publicValue
        };
        return service;
    };
    testModule().publicMethod();//1
    testModule().privateMethod();//undefined is not a function
    testModule().privateValue;//no error , just console nothing


继续修改一下

var testModule = (function(){
        var privateValue = 1;
        var publicValue = 2;
        var privateMethod = function(){};
        var publicMethod = function(){
            console.log(publicValue);
        };

        var service = {
            publicMethod:publicMethod,
            publicValue:publicValue
        };
        return service;
    })();
    testModule.publicMethod();//2
    testModule.publicValue = 3;
    testModule.publicMethod();//2 无法修改，

如果想要修改内部变量，只能通过提供外部方法去修改

var testModule = (function(){
        var privateValue = 1;
        var publicValue = 2;
        var privateMethod = function(){};
        var publicMethod = function(){
            console.log(publicValue);
        };
        var setPublicValue = function(value){
            publicValue = value;
        };

        var service = {
            publicMethod:publicMethod,
            publicValue:publicValue,
            setPublicValue:setPublicValue
        };
        return service;
    })();
    testModule.publicMethod();//2
    testModule.setPublicValue(4);
    testModule.publicMethod();//4

 举个购物车的栗子，方便理解，外部访问不到内部变量，但是会提供接口去操作内部的变量

var CartItem = (function(){
        var cartItem = [];
        var addCartItem = function(value){
            cartItem.push(value);
        };
        var deleteCartItem = function(){};
        var getCartItem = function(){
            return cartItem;
        };
        var getCartItemByName = function(){
            //...
        };
        //...
        return {
            addCartItem:addCartItem,
            deleteCartItem:deleteCartItem,
            getCartItem:getCartItem,
            getCartItemByName:getCartItemByName
        };
    })();


该风格的模式还可导入全局变量。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="js/jquery-2.1.1.js"></script>
</head>
<body>
<div id="test"></div>
</body>
<script>

    var CartItem = (function($){
        var cartItem = [];
        var addCartItem = function(value){
            cartItem.push(value);
        };
        var deleteCartItem = function(){};
        var getCartItem = function(){
            return cartItem;
        };
        var getCartItemByName = function(){
            //...
            $('#test').html('hello world');
        };
        //...
        return {
            addCartItem:addCartItem,
            deleteCartItem:deleteCartItem,
            getCartItem:getCartItem,
            getCartItemByName:getCartItemByName
        };
    })(jQuery);

    CartItem.getCartItemByName();


</script>
</html>

 在模块模式的改良上出现了揭示模式。这类风格的模式的缺点的内部的方法不能被修改

posted @ 2014-09-03 20:48  菠萝君  阅读(263)  评论(0)  编辑  收藏  举报