JS模块化的原始写法,对象写法,闭包,放大,宽放大,模块规范

原始写法


<!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 src="./tool.js"></script>
    <script>
        /*
            我们可以吧一些常用的函数
            放在一个tool.js文件里
            然后在需要函数的时候,将tool.js引入

            【注】通过上述的方式,我们可以完成简易的模块化。

            问题:所有的函数都是全局函数,必然会造成全局变量污染。
        */

        show()
        console.log(add(10, 20))
    </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>

        /*
            解决:全局变量污染的问题。
            问题:
                对象写法所有属性和函数,都不是私有,
                外部都可以访问的到。
        */

        //A同学
        var moduleA = {
            _count: 10,
            funcA: function(){
                this._count += 100
                console.log(this._count)
            },
            funcB: function(){
                this._count *= 20
                console.log(this._count)
            }
        }

        //B同学
        var moduleB = {
            _count: 100,
            funcA: function(){
                this._count -= 10
                console.log(this._count)
            },
            funcB: function(){
                this._count *= 6
                console.log(this._count)
            }
        }

        //上述重名的变量和函数,都属于不同的对象。
        moduleA._count = 1000
        moduleA.funcA()
        moduleA.funcB()

        moduleB.funcA()
        moduleB.funcB()
    </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、全局变量污染
                2、所有的内容都私有化

            问题:
                如果想要对原有的代码进行二次修改,是非常困难。
        */
        /*
            A同学
        */

        var moduleA = (function(){
            var _count = 10; //私有变量

            function showA(){ //私有函数
                _count += 20
                console.log(_count)
            }

            function showB(){
                _count *= 10
                console.log(_count)
            }

            return {
                aaa: showA,
                bbb: showB
            }
        })()

        /*
            B同学
        */

        var moduleB = (function(){
            var _count = 100; //私有变量

            function showA(){ //私有函数
                _count -= 30
                console.log(_count)
            }

            function showB(){
                _count *= 100
                console.log(_count)
            }

            return {
                aaa: showA,
                bbb: showB
            }
        })()

        moduleA.aaa()
        moduleA.bbb()

        moduleB.aaa()
        moduleB.bbb()
    </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 moduleA = (function(mod){
            function showC(){
                console.log("我是新增的函数showC")
            }
            mod.ccc = showC
            return mod
        })(moduleA || {})

        var moduleA = (function(mod){
            var _count = 10  //私有变量

            function showA(){
                _count += 20  //私有函数
                console.log(_count)
            }

            function showB(){
                _count *= 10
                console.log(_count)
            }

            mod.aaa = showA
            mod.bbb = showB

            return mod
        })(moduleA || {})


        
        moduleA.aaa()
        moduleA.bbb()
        moduleA.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>

        /*
            手机、电脑  充电/数据传输  接口统一 type-C
            鼠标、键盘  接口统一  USB接口
        */

        /*
            官方的一些模块化规范:
            1、CommonJS规范
            2、AMD规范  (今天要学习的)
                我们引入一个第三方框架,require.js。
                按照require.js的官方文档抄代码就OK。

            3、ECMA6的class语法规范



            jquery  jquery.cookie遵从AMD规范
        */
    </script>
</head>
<body>
    
</body>
</html>

你可能感兴趣的:(前端,javascript)