javascript学习之: 前端模块化

1. 第一阶段javascript模块化是通过函数实现,即在一个文件中写几个函数,该文件就是刚开始的模块了

 function fn1() {
            //statement
        }

 function fn2() {
           //statement
        }

缺点:污染全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间没什么关系;

2.第二阶段 把所有的模块成员分装在一个对象中;

var myModule = {
            var1: 1,
            var2: 2,
            fn1: function () {
                },
            fn2: function () {
            }
        }

通过myModule.fn2()调用模块;优点:避免变量污染,模块成员之间有一定关系;

缺点:外部可以随意修改模块内部成员 例如 myModule.var1=11;这样就产生安全问题。

3 第三阶段 立即执行函数;即IIFE;

 var myModule = (function(){
            var var1=1;
            var var2=2;
            function fn1 () {
            };
            function fn2() {
            };

            return {
                fn1: fn1,
                fn2:fn2
            }
        })()

优点:这样模块外部无法修改我们没有暴露出来的变量和函数;这基本就是目前前端模块化的基础;目前通行的javascript模块化规范有两种:AMD与CommonJs

总结: AMD模块化编程

posted @ 2017-03-14 20:38  starsir  阅读(170)  评论(0编辑  收藏  举报