(2) Module(모듈) 모드 |||(Revealing Module) 게시 모드

13107 단어 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>

모듈 모드의 개량에 게시 모드가 나타났다.이런 스타일의 모델의 결점 내부의 방법은 수정할 수 없다

좋은 웹페이지 즐겨찾기