javascript模块模式

作者: 我不叫奇奇 | 来源:发表于2017-02-25 22:13 被阅读44次

    当一个javascript文件很大的时候,会出现一些问题:
    1.里面定义了大量的变量,你不得不把变量的名字写的越来越长。
    2.系统读取全部javascript文件速度很变慢。

    而解决这两个问题最好的有一个很不错的方式就是引入模块模式。

    一、格式

    模块模式使用了匿名闭包的方式

    var model=(function(){
       ...//定义一些私有变量
         return {
             ....//以对象的方式返回,返回值可以有函数内部的东西
        }
    })();//可以传参数
    

    其中模块内可以定义一些私有变量,return出来的属性是共有属性。

    二、例子

    下面我以学生为例

    var student=(function(day){
         var myStudyDay=day;
         function study(){
             myStudyDay++;
         }
         return {
             mygrade:function(){
              return myStudyDay;
            },
             study:study
        }
    });
    var qq=student(50);
    console.log(qq.mygrade());//50
    qq.study();
    console.log(qq.mygrade());//51
    console.log(myStudyDay);//error:myStudyDay is not defind
    

    myStudyDay是student模块的私有属性,study是该模块的私有函数,防止了全局污染,在函数外部不能修改这两个的值。

    三、高级

    梦想决定高度,想要让你的模块更大试试这样

    var student=(function(day){
         var myStudyDay=day;
         function study(){
             myStudyDay++;
         };
         var grade=(function(){
          var grade=90;
          return{
            mygrade:function(){
              return grade
            }
          }
         })//模块里面套一个模块
         return {
             mygrade:function(){
              return myStudyDay;
            },
             study:study
        }
    });
    

    模块里面套模块,这样可以让你的模块可以变得特别大。

    使用模块模式不仅可以保护一些模块内的变量,同时还可以使我们的代码更具有意义性。

    相关文章

      网友评论

        本文标题:javascript模块模式

        本文链接:https://www.haomeiwen.com/subject/cppnwttx.html