閉パッケージのメリット、関数の即時実行、プライベートメンバー、閉パッケージで注意すべき問題

17358 ワード

     



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //      
        //         1、        
        //         2、          
        //         3、        

        // function aaa(){
        //     var a = 2;
        //     function bbb(){
        //         a++;
        //         console.log(a);
        //     }
        //     return bbb;
        // }

        // var ccc = aaa(); 
        // ccc();
        // ccc();
        // console.log(a);


        // var ccc = (function(){
        //     var a = 2;
        //     return function(){
        //         a++;
        //         console.log(a);
        //     };
        // })();

        // ccc();
        // ccc();
        // console.log(a);


        var ccc = (function(){
            var a = 2;
            return function(){
                a++;
                console.log(a);
            }
        })();

        ccc();
        ccc();
    </script>
</head>
<body>
    
</body>
</html>



      


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1、    
        // function show(){
        //     console.log("hello world");
        // }

        
        // var show = function(){
        //     console.log("hello world");
        // }

        //2、    
        // show()

        //       
        (function(){
            console.log("hello world");
        })();
    </script>
</head>
<body>
    
</body>
</html>



    


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
                   ,              
        */

        var a = (function(){
            var count = 100  //    

            function aaa() { //    
                count += 10
                console.log(count)
            }

            //              。
            function bbb(){  //    
                count *= 20
                console.log(count)
            }

            return {
                funA: aaa,
                funB: bbb
            }
        })()

        a.funA()
        a.funB()

        // console.log(count);
        console.log(aaa)
    </script>
</head>
<body>
    
</body>
</html>


          


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            【 】  ,       ,             ,          。

                (  )
        */

        window.onload = function(){
            var oDiv = document.getElementById("div1")

            oDiv.onclick = function(){
                alert(oDiv.id)
                console.log(oDiv)
            }

            // var id = oDiv.id;
            // oDiv.onclick = function(){
            //     console.log(id);
            // }
            // oDiv = null;

             //IE     window.onunload                  
             window.onunload = function(){
                oDiv.onclick = null;
                oDiv = null;
            }
        }
    </script>
</head>

<body>
    <div id = 'div1' title = 'hello' class = 'box'>div  </div>
</body>

</html>