前言

模块化是什么?

为什么采用模块化?

场景:

一个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

CommonJS是一种规范,NodeJS是这种规范的实现。
NodeJS的出现,标志着“Javascript模块化编程”的正式诞生。
在CommonJS中,有一个全局性方法require(),用于加载模块 。
服务端模块。
同步加载完成。
Browserify 是目前最常用的 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的更多相关文章

  1. 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module

    随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...

  2. Javascript模块化编程之CommonJS,AMD,CMD,UMD模块加载规范详解

    JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?     模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问 题进行系 ...

  3. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  4. [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD!

    原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...

  5. js模块化编程之CommonJS和AMD/CMD

    js模块化编程commonjs.AMD/CMD与ES6模块规范 一.CommonJS commonjs的require是运行时同步加载,es6的import是静态分析,是在编译时而不是在代码运行时.C ...

  6. JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)

    原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...

  7. JavaScript模块化CommonJS/AMD/CMD/UMD/ES6Module的区别

    目录 JS-模块化进程 原始的开发方式 CommonJS && node.js AMD && Require.js CMD && Sea.js UMD ...

  8. 前端模块化方案全解(CommonJS/AMD/CMD/ES6)

    模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块 ...

  9. (转) 前端模块化:CommonJS,AMD,CMD,ES6

    模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块 ...

  10. CommonJS, AMD, CMD是什么及区别--简单易懂有实例

    CommonJS, AMD, CMD都是JS模块化的规范. CommonJS是服务器端js模块化的规范,NodeJS是这种规范的实现. AMD(异步模块定义)和CMD(通用模块定义)都是浏览器端js模 ...

随机推荐

  1. 洛谷P2396 yyy loves Maths VII

    P2396 yyy loves Maths VII 题目背景 yyy对某些数字有着情有独钟的喜爱,他叫他们为幸运数字;然而他作死太多,所以把自己讨厌的数字成为"厄运数字" 题目描述 ...

  2. BZOJ5462 APIO2018新家(线段树+堆)

    一个显然的做法是二分答案后转化为查询区间颜色数,可持久化线段树记录每个位置上一个同色位置,离线后set+树状数组套线段树维护.这样是三个log的. 注意到我们要知道的其实只是是否所有颜色都在该区间出现 ...

  3. BZOJ2299 HAOI2011向量(数论)

    设最后的组成为x=x0a+x1b,y=y0a+y1b.那么容易发现x0和y0奇偶性相同.x1和y1奇偶性相同.于是考虑奇偶两种情况,问题就变为是否存在x和y使ax+by=c,那么其充要条件是gcd(a ...

  4. spring boot 系列之六:深入理解spring boot的自动配置

    我们知道,spring boot自动配置功能可以根据不同情况来决定spring配置应该用哪个,不应该用哪个,举个例子: Spring的JdbcTemplate是不是在Classpath里面?如果是,并 ...

  5. 循环取月的三位英语名 Jan Feb

    CultureInfo ci = new CultureInfo("en-US"); DateTime now = DateTime.Now; for (int i = 0; i ...

  6. Linux系统Web网站目录和文件安全权限设置

    查看Linux文件的权限:ls -l 文件名称查看linux文件夹的权限:ls -ld 文件夹名称(所在目录)例如: drwxr-xr-x 2 root root 4096 2009-01-14 17 ...

  7. 解题:NOI 2009 诗人小G

    题面 今天考试考了,于是开始糊学决策单调性DP 这是一个完全不会优化DP的人 决策单调性DP的一种优化方法是用单调队列优化 存下{左端点l,右端点r,最优决策点p}的三元组,按照单调队列的通常操作来说 ...

  8. 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 ...

  9. NOI Linux的安装说明以及使用指南

    安装 本人的安装环境为Win10. 1. 首先从官网上下载一个CCF官方提供的Noi linux虚拟机以及安装文档 传送门 2. 然后,安装一个VMware Workstation 14 Pro,这里 ...

  10. vue.js初识(一)

    vue.js安装 官网:http://cn.vuejs.org/ 官方安装介绍:http://cn.vuejs.org/v2/guide/installation.html MVVM框架:View.V ...