JavaScript-中级：7 模块化演变

由于js一开始设计时没当做大型语言来设计，但随着时代的发展，其作用越来越大，但也暴露了很多问题。

js缺陷：

没有命名空间
没有模块化的概念

示例代码：

<!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>模块化演变</title>
</head>
<body>
    <script>
        // js 缺陷实例1：
        function demo(){
            var a = b = c = 10; // a 享受了var关键字，作用域在函数体内部；b和c没有享受到var关键字，由于如果变量没有声明直接使用就相当于直接声明了全局变量，故b和c都是全局变量。
        }
        demo();
        console.log(b); // 10
        console.log(c); // 10
        console.log(a);  // ReferenceError: a is not defined

        // js 缺陷实例2：
        // a.js：
        var m = 0;
        console.log(m);
        // 如果另一文件b.js中有
        var m = 'sss';
        console.log(m); // 那么这个m到底是哪一个？？？？
        // 团队合作噩梦！：变量冲突！

        // 尝试解决：
        // 方式1：模拟命名空间：团队不同，变量的前缀不同。（一开始设计的时候，就让变量保持不同）
        // 方式2：给单个文件里面定义的局部变量都变成局部作用域里的变量。（采用自执行函数的方式）
        ;(function(){

        })();
        // 方式3：希望能把自己基类的很多工具封装成一个整体的框架 
        //（在没有第三方组件下，自己弄，不过后续发展的第三方组件越来越多，功能越来越好，加之后续的模块化标准，反正是越来越方便。不过思想是要了解的）
        // 如： button\ form\ animate 
        //eg：
        // obj.btn.js
        ;(function(w){
            if(!w.obj){ // 如果window的obj不存在，就创建一个对象。（好处，obj.js和obj.animate.js的调用顺序无关）
                w.obj = {}; 
            }
            // 为这个对象添加方法
            w.obj.Btn = {
                getVal: function(){
                    console.log("getVal");
                },
                setVal: function(){
                    console.log("setVal");
                }
            };
        })(window || {}); // 一个接口，此处为把外部 全局的window传进来
        
        // obj.animate.js
        // 动画组件
        ;(function(w){
            if(!w.obj){ // （判断obj框架是否存在）如果window的obj不存在，就创建一个对象。（好处，obj.js和obj.animate.js的加载顺序相互不影响）
                w.obj = {}; 
            }
            w.obj.animate = {};
        })(window || {}); // 外部传参接口
    </script>
</body>
</html>

0x001

发布了191 篇原创文章 · 获赞 1 · 访问量 4697

私信关注

JavaScript-中级：7 模块化演变

猜你喜欢