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
Copyright © 2011-2022 走看看