Javascript模块化

模块是什么呢?

从Javascript的发展史来看,模块系统的出现,是一种对隔绝全局作用域,关注点分离,显式依赖定义,高内聚、低耦合的结构的追求。

模块化 

主要解决代码分割、作用域隔离、模块之间的依赖管理以及发布到生产环境时的自动打包与处理等多个方面

背景以及问题

在模块化思维席卷前端之前,早期的代码或是集中在一个文件里,或是物理分散在多个文件里,但对作用域并无隔离,他们皆可以接触到全局作用域中的变量,也可以轻而易举、甚至是在不知情的情况下就将自己的变量与方法暴露到全局中。此外,不同代码之间依赖关系不够明确,关联代码的执行时机难以确定, 缺乏分析与加载机制。

应对

早期为了解决作用域隔离的问题,很多代码文件会将代码包裹在立即执行的匿名函数中,成功将变量和方法定义等局限在自己的函数作用域里。

(function() {
    //....代码在这里
})();

后期为了解决前端代码快速膨胀,js文件加载与执行难以时机的问题,出现了很多模块依赖加载的规范:AMD\CMD\COMMONJS\ES MODULE. 模块的概念开始清晰并统一起来。

个人认为,关于模块化规范的内容,主要聚焦在模块定义,依赖定义,模块查找,和模块导出等。

此处需要详细了解规范,作出修改。

COMMONJS规范

在CommonJS的规范中,每个JavaScript文件就是一个独立的模块上下文,在这个上下文中创建的属性和方法都是私有的。它采用同步加载模块的策略。该方案的关键字是require与module。

Node.js的module实现

/*** main.js **/

const a = require('./a.js')

console.log(a)

/*** a.js **/

 module.exports = {

    blockName: 'module-a'

}

这里定义一个a模块。在执行模块之前,node.js会使用一个如下的模块封装器将其封装起来,因此可以隔绝全局作用域,而将欲导出的内容挂载到传入的参数上,就成功暴露相应的内容给外部。

(function(exports,require,module,__filename,__dirname){  //....模块A })

在模块的上下文中,可以访问到require、exports、module.exports,__filename、__dirname等。

Node.js的模块加载后会缓存,模块定义脚本只会执行一次, 模块的依赖与元数据也是在执行时慢慢补齐。

var router = require('koa-router')()

console.log('测试',module.children[1],module.children[0]) 

const mysql = require('./mysql')

console.log('测试2',module.children[1],module.children[0]) 

结果: 

测试 undefined {//.....module1}

测试2 {//.....module2} {//.....module1}

模块的查找过程

Node.js有核心模块,文本文件模块,和目录模块。核心模块是定义在Node.js源码lib下的二进制模块,会被优先加载。至于文本文件模块,如果不是以'./', '../','/'开头,会进入最近的node_module中查找(支持本地化依赖的关键, 第三方模块);否则 ,应该是相对模块的路径进行查找。针对目录模块,Node会读入目录下的package.json来尝试解读模块信息,main定义模块的入口文件,type定义模块的类型(commonjs or mudule),exports定义导出。关于模块类型,有需要注意的是,现在Node.js推出了实验性特征,可以在较新的版本支持ES MODULE。项目代码中以.cjs结尾的文件是commonjs模块,而以.mjs结尾是es模块。但是注意一点,es模块中不可去调用commonjs模块,commonjs模块不可去调用es模块。

循环依赖

    /**   a.js:   */

       console.log('a开始');

       exports.done = false;

       const b = require('./b.js');

       console.log('在a中,b.done = %j',b.done);

       exports.done = true;

       console.log('a结束');

  /**    b.js: */

       console.log('b开始');

       exports.done = false;

       const a = require('./a.js');

       console.log('在b中,a.done = %j',a.done);

       exports.done = true;

       console.log(‘b结束');

  /**    main.js: */

       console.log('main开始');

       const a = require('./a.js');

       const b = require('./b.js');

       console.log('在main中,a.done=%j,b.done=%j',a.done,b.done);

结果

      main开始

      a开始

      b开始

      在b中,a.done = false

      b结束

      在a中,b.done = true

      a结束

      在main中,a.done=true,b.done=true

由于在模块生成代码执行前,模块的引用便已存在(模块封装器传入),因为可以克服循环模块依赖。

ES MODULE 规范

ES Module是语法静态的,默认使用严格模式。import会自动提升到代码顶层,意味着在编译时确定了输入和导出,可以更加快的查找依赖,可以使用lint工具对模块依赖进行检查。

ES 模块是异步的。你可以认为它是异步的因为实际的运作被分成了三个不同的阶段 —— 加载,实例化以及求值,而这些阶段都可以分开完成。

深入ES MODULE,请查看

https://www.imooc.com/article/28404?block_id=tuijian_wz

ES MODULE 和COMMONJS 不同

从使用方面来看,ES模块默认严格模式,没有node_path, 强制文件拓展名,没有require.main, require, exports, module.exports, __filename, __dirname等,只有import.meta等。

从导出来看,ES MODULE是编译时输出接口,Commonjs是运行时候加载; ES模块基于活动绑定,传递只读引用, 不可改变整体导入对象(prevent extension & freeze),Commonjs传递的缓存值拷贝。Commonjs的导出遵从但同时也受限于javascript的值赋值与传递特性。

var num=1

function add(){

num++

}

module.exports={

num:num, //导出值是值,而不是引用,内部的改动, 不会影响导出值

add:add

}

//main.js

var mod=require('./module')

console.log(mod.num)//1

mod.add()

console.log(mod.num)//1

//module.js

export var num=1; //导出的是只读引用,内部的值发生变化会会影响[命名导出]

export function add(){ num++;}

//main.js

import {num,add} from './module'

console.log(num);//1

mod.add();

console.log(num);//2 

AMD(CommonJS 浏览器端方案)

依赖前置。模块的依赖需要提前声明与加载执行。

define(['dependencies1','dependencies2'],function(dep1, dep2){/

   // dep1 & dep2 已经被正确赋值

    dep1.func() 

   //..... other codes

   dep2.func() 

})

CMD(CommonJS 浏览器端方案)

依赖就近。模块的依赖会被提前加载,但无需提前声明与执行

define(function({

   // dependencies1 & dependencies2 已被加载

   let dep1 = require('dependencies1') //依赖此时执行

    dep1.func() 

   //..... other codes

  let dep2 = require('dependencies2') //依赖此时执行

   dep2.func() 

})

UMD

AMD+Commonjs+全局变量三种风格的结合

(function(global,factory){

    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory():

    typeof define === 'function' && define.amd ? define(factory):

    (global.libName = factory());

}(this,(function(){ 'use strict';})));

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容