zoukankan html css js c++ java

(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>

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

查看全文

相关阅读:
Firefox浏览器怎么安装adobe flash player插件
 uploadify在火狐下上传不了的解决方案，java版（Spring+SpringMVC+MyBatis）详细解决方案...
thinkphp模版调用函数方法
 Thinkphp模板中函数的使用
 60.0.1（64位）windows版 uploadify使用有问题
 一起谈.NET技术，异步调用与多线程的区别狼人:
一起谈.NET技术，Silverlight中使用递归构造关系图狼人:
一起谈.NET技术，ASP.NET Routing对请求的处理方式狼人:
一起谈.NET技术，闲话“多线程” 狼人:
一起谈.NET技术，利用.NET Framework4.0的源代码调试你的应用程序狼人:

原文地址：https://www.cnblogs.com/lihaozhou/p/3954529.html