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 模块

    模块 【示例】: 【解释】: 这个模式在 JavaScript 中被称为模块。最常见的实现模块模式的方法通常被称为...

  • JavaScript模块模式

    一、什么模块模式 在JavaScript中没有包(Package)的概念,而面对日益庞大的JavaScript代码...

  • javascript模块模式

    当一个javascript文件很大的时候,会出现一些问题:1.里面定义了大量的变量,你不得不把变量的名字写的越来越...

  • JavaScript模块模式

    转自:http://www.oschina.net/translate/javascript-module-pat...

  • javascript模块模式

    先来看一段代码 foo函数包含了两个变量和两个函数,这里没有明显的闭包。这两个内部函数的词法作用域就是函数foo的...

  • Es6 模块 export、export default 、im

    说到模块这里我们要说下javascript严格模式。 ES6的模块自动采用严格模式,不管你有没有在模块头部加上"u...

  • H5-2.25Javascript模块模式

    从javascript对象创建说起说起Module(模块)模式,可能一些刚刚接触javascript的同学还是觉得...

  • 初涉 JavaScript 模块模式

    什么是模块模式   在JavaScript中没有包(Package)的概念,而面对日益庞大的JavaScript代...

  • 阮一峰 关于JavaScript的模块化笔记

    JavaScript实现模块化的方法: 宽放大模式: var module = (function(mod){ ...

  • Javascript 设计模式 -- Module(模块)模式

    1 . 公有方法改变私有变量 :Module 模式使用闭包封装"私有" 状态和组织.它提供了一中包装混合公有/私有...

网友评论

    本文标题:javascript模块模式

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