自执行匿名函数和模块模式

技术文档网 2021-04-25

通常的函数定义及调用:


 /*

     这种定义方式经过了3个步骤
     1.定义(匿名)函数
     2.把函数赋值给一个变量
     3.执行函数

     这样做显得冗长和不灵活,并且有一个更不好的地方在于:每次都要起一个函数名(变量名)

  */

 var myFunc = function(){

      console.log('do something');

 }

 myFunc();

相当于:


/*
  自执行的匿名函数(IIFE)
  这种写法可以减少冗余,减少名字不匹配的机率

*/

(function(){

   console.log('do something...')

})()

自执行的匿名函数的好处除了简短、灵活外,还有3个非常重要的好处

  1. 不会向全局名字空间添加任何变量,即我不会影响别人
  2. 内部定义的变量会覆盖全局同名变量,即别人也不会影响到我
  3. 当某些函数只需要使用1次时,可以使用IIFE

例如:



 var global_var = "global_var";

 (function(){

    var global_var = "IIFE local var"; // 我只使用自己定义的变量,别人不会影响到我

    var local_var = "local var";

 })()

 console.log(local_var); // 在别的地方别人也不会访问到我定义的变量,我不会影响别人

模块模式(modele pattern)

我们可以把应用封装到IIFE中,使应用免受第三方库(和我们自己)的影响,这是很不错的。但是应用往往很庞大,不能定义在一个文件中, 如果有办法将文件分成一个个的模块,每个模块都有他们自己的私有变量,这当然是很好的。好吧,模块模式入场!


 // 定义一个A模块

 var ModuleA = (function(){

    var name = "李彦峰";// 模块A内的变量
    var age = 25;
    var foo = function(){
        return this.name + ' ' + this.age;
    }
    return {
      name:name,
      age:age,
      foo:foo
    }

 })();

 // 如果使用A模块呢?

 console.log( ModuleA.name );// 李彦峰
 console.log( ModuleA.age ); // 26
 console.log( Module.foo() ); // 李彦峰 26

可以看到,本来要往全局添加3个成员,即_name_、__age__、__foo__,现在只需添加1个即可,在较复杂系统中,减少全局变量很重要

相关文章

  1. webpack相关知识

    能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-

  2. Javascript基础和ES6

    HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in

  3. JavaScript编码规则

    JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对

  4. JavaScript获取和设置CSS属性

    获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属

  5. javascript作用域、上下文、this和闭包详解

    词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用

随机推荐

  1. webpack相关知识

    能够处理JS文件的互相依赖关系 能够处理JS的兼容问题 安装 全局安装 npm install webpack -g 项目安装 npm install webpack --save-

  2. Javascript基础和ES6

    HTML的基础事件 onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出 document.getElementById('id') JS中选择HTML的ID元素<in

  3. JavaScript编码规则

    JavaScript编码规则 目的:改善协作编码、代码质量。 var 声明变量必须用var。 防止变量变为全局变量,污染全局环境。 常量 基本类型number、string、boolean是常量值。对

  4. JavaScript获取和设置CSS属性

    获取样式 元素对象的宽高位置距离等属性 如offsetWidht、cilentWidht、scrollWidth…… let oWidth=obj.offsetWidth; 注意: 只能获取属

  5. javascript作用域、上下文、this和闭包详解

    词法作用域lexical scope 定义在词法阶段的作用域。词法作用域是变量和语句块在定义时所处的位置决定的。 全局 块级:在{}之内是一个块级作用域(ES6之前没有块级作用于只有函数内的局部作用