前端模块化

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

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

  • 初始，只是创立一个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命令具备晋升成果，因为是编译时加载，所以会比其余代码都先执行