乐趣区

关于javascript:前端模块化iifeCJSAMDUMDESM的区别

前端模块化

注:以下所有解释齐全按照自己的主观思维,如果有不对的中央,请见谅

说到模块化,不得不先理解一下模块的起源,工夫程序方面不要太在意

  • 初始,只是创立一个 js 文件,外面定义一些办法、常量等,提供给其余页面应用,这就是一个最简略的模块,那只算是一个性能文件,不是公有的,会净化全局
  • 起初,就把所有的办法放到对象中,通过对象应用这些办法,然而内部能够通过对象更改外面的属性,而且也会净化全局,这个毛病也很不好
  • 而后就呈现了命名空间这个货色,命名空间就是说:若全局空间中已有同名对象,则不笼罩该对象,否则创立一个新的命名空间。

    var MYNAMESPACE = MYNAMESPACE || {};
    MYNAMESPACE.person = function() {console.log("hello word");
    };

    这仍然扭转不了被批改的命运

模块化的倒退

iife(自执行函数)

顾名思义,就是创立的时候就间接执行,而后返回一个参数对象(也能够只返回其余参数),对象中能够有办法,属性等,而后再内部进行调用,不会净化全局,也不会被内部更改

// 创立自执行函数
var testUtils = function () {function test(data){console.log(data)
    }
    return {test}
}();
// 执行自执行函数中的办法
testUtils.test("张三")
// 执行后果 - 张三

CJS(CommonJS 参考链接 https://javascript.ruanyifeng…)

每个文件就是一个模块,有本人的作用域。在一个文件外面定义的变量、函数、类,都是公有的,对其余文件不可见。
CommonJS 标准加载模块是同步的,因为 Node.js 次要用于服务器编程,模块文件个别都曾经存在于本地硬盘,所以加载起来比拟快,不必思考非同步加载的形式,所以 CommonJS 标准比拟实用
次要特点:

  • 所有代码都运行在模块作用域,不会净化全局作用域
  • 模块能够屡次加载,然而只会在第一次加载的时候执行,而后会缓存一份,前面再援用返回的都是缓存
  • 模块加载的程序是依照呈现的地位来定
  • 因为被输入的是拷贝值,则如果在内部对模块代码就行批改则不会失效
  • 个别用于服务端的标准

AMD(Asynchronous Module Definition)异步模块定义

跟 CJS 并称量大通用模块标准,次要用于客户端,因为客户端在加载的时候次要看中加载速度,如果像是 CJS 那样同步执行的话,在加载一个很大的组件的状况下会相当的耽误时间,所以催生出了 AMD 客户端的异步标准
AMD 标准援用组件形式
require([module], callback);
第一个参数[module],是一个数组,外面的成员就是要加载的模块;第二个参数 callback,则是加载胜利之后的回调函数。

// 引入 lodash 组件并应用
require(['lodash'], function (lo) {lo.isArray([])
});

UMD

他像是一个工厂,为了同时反对 CJS 和 AMD 的标准,判断谁的标准反对就应用谁的标准,他的最外层是一个 iife

ESM(ES6 Module 参考链接 http://caibaojian.com/es6/mod…)

ES6 实现了模块化性能,在 ES6 之前,社区制订了一些模块加载计划,最次要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言规范的层面上,实现了模块性能,而且实现得相当简略,齐全能够取代现有的 CommonJS 和 AMD 标准,成为浏览器和服务器通用的模块解决方案。
ES6 模块的设计思维,是尽量的动态化,使得编译时就能确定模块的依赖关系,以及输出和输入的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些货色。比方,CommonJS 模块就是对象,输出时必须查找对象属性。
次要特点:

  • 齐全代替 CJS 和 AMD,淘汰了 UMD,命名空间等标准
  • 动态化,编译时加载,使得页面加载速度快
  • ES6 模块的运行机制与 CommonJS 不一样,它遇到模块加载命令 import 时,不会去执行模块,而是只生成一个动静的只读援用。等到真的须要用到时,再到模块外面去取值
  • import 命令具备晋升成果,因为是编译时加载,所以会比其余代码都先执行
退出移动版