来自AMD设计思想的总结和思考

  • 在之前了解es6模块化的时候有遇到过依赖循环的问题,在es6中对于模块是引用性的,而当时于es6模块化做对比的commonjs(CMD规范)对于模块是值类型(会将其缓存下来),所以面对循环依赖的时候,利用es6的模块化机制并不会报错。

    AMD中依赖的种类

  • 装载时依赖,在模块化初始阶段久需要将依赖加载完成
    // 装载时依赖 define('a',function (require) { require('b').init(); })
    这种方式加载模块的时候需要b模块初始化完成才能加载成功,如果b模块也已这种方式依赖于a(或者以装载时依赖的方式构成了一个循环)那么这个循环就是死的(无法成功加载)
  • 运行时依赖,在模块初始化的时候不需要,但是在后面运行的时候需要用到,这种依赖就是运行时依赖
    // 运行时依赖 define('b',function(require)) { return { foo : require('b').foo(); } }
    对于循环依赖,只要其中有一项采用对是运行时依赖则这个循环依赖就是‘合法’的。(这也是requirejs当中提倡的对于循环依赖的解决办法)

    依赖提前声明时如何判定依赖方式

    我们知道在define中我们可以将以来直接声明到第二个参数里(数组),也可以利用require直接在需要时声明(要将require作为默认参数传给factory),那么当依赖前置的时候我们如何判断依赖方式?在我们在第二个参数声明了依赖之后,通常会将需要的用道(初始化)的模块名当作参数传入factory,当传入的参数个数(length)于第二个参数中数组的length不相等时,我们就会认为它存在运行时依赖。

    The dependencies argument is optional. If omitted, it should default to [“require”, “exports”, “module”]. However, if the factory function’s arity (length property) is less than 3, then the loader may choose to only call the factory with the number of arguments corresponding to the function’s arity or length.

  • 存在的疑问:什么是「用时定义」,暂时的理解:像commonjs那样,使用模块时进行require然后初始化,但是好像这个想法和异步加载是相悖的,后续再来学习。

为什么使用esl

esl是AMD规范下的一个应用,它是一个浏览器端、符合AMD的标准加载器,适合用于现代Web浏览器端应用的入口与模块管理。

相比于Require:

  • 体积更小
  • 性能更高
  • 更健壮
  • 不支持在非浏览器端使用
  • 依赖模块「用时定义」(lazy define)

关于esl加载(初始化)模块的方式

前面有提到我们声明依赖的时候有两种方式:

  • 在dependencies中声明,然后顺序传入factory中(这里有特别情况)
  • 不要dependencies,直接将require作为参数传入factory中,当需要某个模块时直接require进来。

但是这两种方式中模块初始化的时机不同,需要注意:

  • 当我们使用第一种方式加载时,esl会像requirejs一样去工作,依赖的模块会提前初始化,但是这里存在一种特殊情况,当我们不完全将dependencies数组中的项传入factory时,esl会这样做

    当factory的形式参数数目少于3时,loader可以根据参数数量的前几个dependencies模块,去call factory。也就是说,dependencies数组里,后面一些模块的初始化时机,是可以自由把握的;在call factory的时候,dependencies数组中位于形式参数length后面index的模块,不一定要初始化完毕。

  • 当我们使用第二种方式时,esl会像seajs一样去工作,当我们require一个模块的时候它才会去进行初始化,需要注意的是,如果requirejs以这种方式去加载依赖,它仍然会和原来一样的方式去工作(提前初始化好)。
  • 个人感悟:通过了解和学习,个人感觉cmd规范像是amd的一个子集,而requirejs&seajs分别实现了amd规范的一部分,而esl是根据编写的方式决定了初始化方案(按照requirejs还是seajs)。

转载于:https://www.cnblogs.com/nanshanlaoyao/p/7323770.html

模块化方案esl以及amd的依赖方式相关推荐

  1. 前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS

    我们知道,在NodeJS之前,由于没有过于复杂的开发场景,前端是不存在模块化的,后端才有模块化.NodeJS诞生之后,它使用CommonJS的模块化规范.从此,js模块化开始快速发展. 模块化的开发方 ...

  2. 前端工程化、模块化方案教程大全,现代前端高手进阶必经之路(欢迎收藏)...

    关注掘金和github很久了,但是一直没有在上面发表什么文章,这次静下心来写了个前端的目前工程化与模块化方案的总结,后期会继续更新,为开源社区做出更大贡献. 前端的模块化方案从早年的require.j ...

  3. 前端模块化(CMD与AMD)

    随着前端技术的日益更新,模块化也发展的如火如荼的,下面就是关于AMD与CMD的一些介绍(多谢各位大佬们的分享,才有我这个ctrl+v程序员的整理) 一.AMD 1. AMD的由来(AMD是Requir ...

  4. javascript模块化之CommonJS、AMD、CMD、UMD、ES6

    javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结 一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...

  5. 无法找到模块“mint-ui”的声明文件_[搬运] JavaScript 模块化:CommonJS vs AMD vs ES6...

    本文主体部分 翻译+搬运 自外网著名技术博客网站 medium.com 的一篇点赞数 2.7k 的文章 (文章链接在结尾处) 什么是 JavaScript 模块 JavaScript 模块指的是一段可 ...

  6. WEB 前端模块化方案完全总结

    工匠若水可能会迟到,但是从来不会缺席,最终还是觉得将自己的云笔记分享出来吧 - 背景 JavaScript 的模块系统主要是在解决大中型前端应用脚本管理与加载问题.在前端模块化进程中主要经历了下面几种 ...

  7. 史上最全的 JavaScript 模块化方案和工具

    作者简介: 李中凯 八年多工作经验 前端负责人, 擅长JavaScript/Vue. 掘金文章专栏:https://juejin.im/user/57c7cb8a0a2b58006b1b8666/po ...

  8. AndroidStudio的几种依赖方式

    前置知识点:AndroidStudio中项目组织方式,最高层为Project(虽然结构层次和Eclipse里的workplace有些相似,但还是有很大区别的),下面可以包括很多module,每个mod ...

  9. 开发日记-20190916 gradle新的依赖方式implementation,api,compileOnly

    转载于:gradle 新的依赖方式 implementation.api.compileOnly gradle升级之后,有了新的依赖方式,下面我来介绍一下他们的使用 先看看之前的 再看看现在的 区别和 ...

  10. CSS模块化方案分类

    CSS模块化方案分类: 1.命名约定 规范化CSS的解决方案如:BEM.OOCSS.AMCSS.SMACSS 2.CSS in JS 彻底抛弃 CSS,用 JavaScript 写 CSS 规则,st ...

最新文章

  1. ASP.NET清除页面缓存的方法
  2. C# 常用正责表达式
  3. JS中的Math.ceil和Math.floor函数的用法
  4. Catalan数推导及应用
  5. python标准库sys_Python——标准库 Sys模块
  6. 误差反向传播法(二)【神经网络以层的方式实现】
  7. 手机能上wifi电脑不行_电脑如何当Wifi供手机使用
  8. cf446C DZY Loves Fibonacci Numbers
  9. 【优化预测】基于matlab蝙蝠算法优化SVM预测【含Matlab源码 141期】
  10. 一文读懂模拟电路和数字电路之间的区别和联系
  11. 【校招VIP】前端js语言考点之事件冒泡与捕捉
  12. php PDO连接mysql
  13. “IndentationError: unindent does not match any outer indentation level“ 错误解决
  14. 公众平台手机版来临 微信公众平台推出手机版运营中心
  15. 《SpringBoot实战》读书笔记
  16. Vue中video播放m3u8视频
  17. 支付宝将推出免费WiFi
  18. 过滤器(Filter)的实现方式
  19. 如何创建 CAB 文件和如何从文件、内存和资源中解压缩 CAB 文件
  20. MODIS产品质量控制文件使用方法

热门文章

  1. OpenMAX IL介绍与其体系
  2. NOI十连测 第三测 T1
  3. android selector 开始自定义样式
  4. ExtJS-3.4.0系列目录
  5. Maven的-pl -am -amd参数学习 -am 踩过的坑
  6. MVC中的service controller 有状态,无状态Bean线程安全
  7. 为什么 Nginx 比 Apache 更牛叉?
  8. Redis如何实现故障自动恢复?
  9. GitHub 上四万 Star 大佬的BATT求职回忆
  10. 一套开源的 iOS 轻量级框架