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';})));

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,734评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,931评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,133评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,532评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,585评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,462评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,262评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,153评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,587评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,635评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,237评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2 354

推荐阅读更多精彩内容