高级单例模式:(利用自执行函数,可以通过return暴露私有变量,方法或者是通过window.方式暴露私有变量和方法)

254 阅读1分钟

高级单例模式:

  • 利用一个自执行函数,将描述同一事物的属性和方法,
  • 以私有变量的形式保存在自执行函数里面,
  • 在外界获取不到,避免全局变量的污染,
  • 可以通过return暴露私有的变量,方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        // // var a = 1;
        // var obj = {
        //     fn: function(){
                
        //     },
        //     fn1: function(){
                
        //     }
        // }

        // 

        var obj = (function(){
            var a = 1;
            var name = "xy";

            function fn(){

            }

            return {
                
                name: name,
            }
        })()

        // console.log(a); // "a" is not defined

        高级单例模式: 利用一个自执行函数,将描述同一事物的属性和方法,
        以私有变量的形式保存在自执行函数里面,
        在外界获取不到,避免全局变量的污染
        可以通过return暴露私有的变量,方法

        
        //1. 可以通过return暴露私有变量,方法
        // var tab1 = (function(){
        //     var oTabs = document.getELementsByTagName("li");
        //     var oContents = document.getELementsByTagName("div");

        //     for(){
                
        //     }
        //     return {
        //         oTabs: oTabs
        //     }
        // })();

        // tab1.oTabs;

        //2. 可以通过window.暴露私有变量,方法
        //  ;(function(){
        //    var oTabs = document.getELementsByTagName("li");
        //    var oContents = document.getELementsByTagName("div");

        //    for(){
                
        //    }
        //    window.tab = {//window.暴露
        //        oTabs: oTabs
        //    }
        //})();

        tab.oTabs;
      
        // var obj = {
        //     a: {}
        // }

        // ;(function(){
        //     var oTabs = document.getELementsByTagName("li");
        //     var oContents = document.getELementsByTagName("div");

        //     for(){
                
        //     }
        // })();
    </script>
</body>
</html>