模块化方案esl以及amd的依赖方式
来自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)。
模块化方案esl以及amd的依赖方式的更多相关文章
- 前端模块化方案全解(CommonJS/AMD/CMD/ES6)
模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块 ...
- JS模块化规范CommonJS,AMD,CMD
模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的 ...
- 【JS】382- JavaScript 模块化方案总结
本文包含两部分,第一部分通过简明的描述介绍什么是 CommonJS.AMD.CMD.UMD.ES Module 以及它们的常见用法,第二部分则根据实际问题指出在正常的 webpack 构建过程中该如何 ...
- 前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS
我们知道,在NodeJS之前,由于没有过于复杂的开发场景,前端是不存在模块化的,后端才有模块化.NodeJS诞生之后,它使用CommonJS的模块化规范.从此,js模块化开始快速发展. 模块化的开发方 ...
- 前端模块化之CommonJS,ES6,AMD,CMD
最近在搞跨平台解决方案,讨论关于模块划分的问题以及如何尽量多的复用逻辑代码.于是就有了此文章,之前的博客也写过,不过由于主机商跑路,宝贵的资源也就没了,说多了都是泪~ 这里按模块化发展的历史回溯的时间 ...
- 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module
随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...
- javascript模块化之CommonJS、AMD、CMD、UMD、ES6
javascript模块化之CommonJS.AMD.CMD.UMD.ES6 一.总结 一句话总结: CommonJS是同步加载模块,用在服务端:AMD是异步加载模块,用于浏览器端 1.为什么服务器端 ...
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- 12. 前后端联调 + ( proxy代理 ) + ( axios拦截器 ) + ( css Modules模块化方案 ) + ( css-loader ) + ( 非路由组件如何使用history ) + ( bodyParser,cookieParser中间件 ) + ( utility MD5加密库 ) + ( nodemon自动重启node ) + +
(1) proxy 前端的端口在:localhost:3000后端的端口在:localhost:1234所以要在webpack中配置proxy选项 (proxy是代理的意思) 在package.jso ...
随机推荐
- 【转载】关于C++中cin的几点说明性总结
转载地址:http://www.07net01.com/program/289153.html 学C++的时候,这几个输入函数弄的有点迷糊:这里做个小结: 1.cin 2.cin.get() 3.ci ...
- vi编辑器快捷键使用详解
文本编辑器是所有计算机系统中最常用的一种工具.UNIX下的编辑器有ex,sed和vi等,其中,使用最为广泛的是vi,而vi命令繁多,论坛里好像这方面的总结不多,以下稍做总结,以资共享!渴望更正和补充! ...
- 实现利用公钥私钥免密码登录Linux服务器
原理 客户端生成公钥私钥,把公钥拷贝给linux服务器,用自己的私钥连接服务器.实现如下: 如果是两台Linux服用器A和B,A来实现免密码登录B A执行ssh-keygen -t rsa 就会在/r ...
- yarn作业提交过程源码
记录源码细节,内部有中文注释 Client 端: //最终通过ApplicationClientProtocol协议提交到RM端的ClientRMService内 package org.apache ...
- Spring data jpa 实现简单动态查询的通用Specification方法
本篇前提: SpringBoot中使用Spring Data Jpa 实现简单的动态查询的两种方法 这篇文章中的第二种方法 实现Specification 这块的方法 只适用于一个对象针对某一个固定字 ...
- RPM和yum相关
写在前面: 在这里可以知道rpm和yum的基本用法,找到更新本地yum源.搭建yum源的方法以及yum很琐碎的东西,包括yum源的优先级.用yum来安装或卸载CentOS图形界面包以及保存yum下载的 ...
- .net core web发布到CentOS汇总
直到今天我的博客终于可以见世人了,中间懒了很长一段时间,什么也没干,也没怎么学习,前段时间也是各种折腾,无心学习.本篇主要汇总下从一开始到现在遇到的问题汇总,作为学习笔记.我的博客就是我的学习笔记,因 ...
- 通过Intent 打开系统级应用
众所周知,各个手机厂商由于对Android 原生系统定制的原因,会造成系统级应用packname 和activityname 不同的现象,就拿时钟软件来说,魅族2的activityname 是[com ...
- IT从业人员必看的10个论坛(转)
IT方面的论坛太多了,有综合,有专业,有行业,在各个论坛里混了几年,体会颇深,以前是论坛哪里人多,往哪里去,新浪论坛,网易是经常去的,人多啊,好几十万,去了以后才发现没有意思,没有共同的语言,于是逛专 ...
- Git学习--创建版本库
什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或 ...