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

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

  • 相关阅读:
    使用libmap
    仿真 vcs/ncverilog
    git——git不常见指令记录
    Mac更换鼠标指针样式_ANI、CUR文件解析
    油猴脚本——CSDN防复制破解
    解决Establishing SSL connection without server‘s identity verification is not recommended.
    IDEA激活 试用30天 自动激活
    IDEA Plugins:Free Mybatis plugin(Mapper跳转XML)安装及使用
    Springboot异常汇总
    springbootdemo
  • 原文地址:https://www.cnblogs.com/lihaozhou/p/3954529.html
Copyright © 2020-2023  润新知