JS模块化编程(一):CommonJS,AMD/CMD
前言
模块化是什么?
为什么采用模块化?
场景:
一个html,因不同的业务需求开发,会不断的引入js文件。另外,a.js和b.js中的变量或函数必须是全局的,才能暴露给使用方。
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.cookie.js"></script>
<script type="text/javascript" src="/scripts/a.js"></script>
<script type="text/javascript" src="/scripts/b.js"></script>
以上写法存在很大的问题:一是、过多的js文件加载会阻塞页面渲染;二是、js文件之间存在依赖关系 ,需严格保证加载顺序。
1.便于团队协同工作,成员只需要实现核心的业务逻辑,其他的工具类,底层逻辑,直接加载别人已经写好的模块。
2.减少全局变量的使用,避免全局变量的污染和覆盖。
一、CommonJS
二、AMD
异步模块定义规范
实现AMD规范的javascript常用库,require.js
采用require()加载模块
require([module],callback);
第一个参数[module],字符串数组
第二个参数callback,加载模块成功后回调函数
require(['util'], function (util) {
util.getFormatDate('2018-09-01');
})
三、CMD(通用模块定义)Common Module Definition
浏览器实现SeaJS。
推崇就近依赖,只有用到某个模块的时候再去require。
四、AMD和CMD的区别
两者的对依赖的处理不同。
JS模块化编程(一):CommonJS,AMD/CMD的更多相关文章
- 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module
随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...
- Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD!
原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...
- js模块化编程之CommonJS和AMD/CMD
js模块化编程commonjs.AMD/CMD与ES6模块规范 一.CommonJS commonjs的require是运行时同步加载,es6的import是静态分析,是在编译时而不是在代码运行时.C ...
- JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)
原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...
- JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别
目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...
- 前端模块化方案全解(CommonJS/AMD/CMD/ES6)
模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块 ...
- (转) 前端模块化:CommonJS,AMD,CMD,ES6
模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块 ...
- CommonJS, AMD, CMD是什么及区别--简单易懂有实例
CommonJS, AMD, CMD都是JS模块化的规范. CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现. AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模 ...
随机推荐
- 洛谷P2396 yyy loves Maths VII
P2396 yyy loves Maths VII 题目背景 yyy对某些数字有着情有独钟的喜爱,他叫他们为幸运数字;然而他作死太多,所以把自己讨厌的数字成为"厄运数字" 题目描述 ...
- BZOJ5462 APIO2018新家(线段树+堆)
一个显然的做法是二分答案后转化为查询区间颜色数,可持久化线段树记录每个位置上一个同色位置,离线后set+树状数组套线段树维护.这样是三个log的. 注意到我们要知道的其实只是是否所有颜色都在该区间出现 ...
- BZOJ2299 HAOI2011向量(数论)
设最后的组成为x=x0a+x1b,y=y0a+y1b.那么容易发现x0和y0奇偶性相同.x1和y1奇偶性相同.于是考虑奇偶两种情况,问题就变为是否存在x和y使ax+by=c,那么其充要条件是gcd(a ...
- spring boot 系列之六:深入理解spring boot的自动配置
我们知道,spring boot自动配置功能可以根据不同情况来决定spring配置应该用哪个,不应该用哪个,举个例子: Spring的JdbcTemplate是不是在Classpath里面?如果是,并 ...
- 循环取月的三位英语名 Jan Feb
CultureInfo ci = new CultureInfo("en-US"); DateTime now = DateTime.Now; for (int i = 0; i ...
- Linux系统Web网站目录和文件安全权限设置
查看Linux文件的权限:ls -l 文件名称查看linux文件夹的权限:ls -ld 文件夹名称(所在目录)例如: drwxr-xr-x 2 root root 4096 2009-01-14 17 ...
- 解题:NOI 2009 诗人小G
题面 今天考试考了,于是开始糊学决策单调性DP 这是一个完全不会优化DP的人 决策单调性DP的一种优化方法是用单调队列优化 存下{左端点l,右端点r,最优决策点p}的三元组,按照单调队列的通常操作来说 ...
- POJ 2251 Dungeon Master /UVA 532 Dungeon Master / ZOJ 1940 Dungeon Master(广度优先搜索)
POJ 2251 Dungeon Master /UVA 532 Dungeon Master / ZOJ 1940 Dungeon Master(广度优先搜索) Description You ar ...
- NOI Linux的安装说明以及使用指南
安装 本人的安装环境为Win10. 1. 首先从官网上下载一个CCF官方提供的Noi linux虚拟机以及安装文档 传送门 2. 然后,安装一个VMware Workstation 14 Pro,这里 ...
- vue.js初识(一)
vue.js安装 官网:http://cn.vuejs.org/ 官方安装介绍:http://cn.vuejs.org/v2/guide/installation.html MVVM框架:View.V ...