前言

模块化是什么?

为什么采用模块化?

场景:

一个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. Pandas笔记目录

    速查笔记 使用实例 Pandas-数据导入 (未完成) Pandas-数据探索 基础属性 shape indexs columns values dtype/dtypes 汇总和计算描述统计 coun ...

  2. POJ 1182 食物链 (拆点并查集)

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 78601   Accepted: 23422 Description ...

  3. 洛谷P3227 切糕

    最小割模板. 题意:你要在一个三维点阵的每个竖条中删去一个点,使得删去的点权和最小. 且相邻(四联通)的两竖条之间删的点的z坐标之差的绝对值不超过D. 解: 首先把这些都串起来,点边转化,就变成最小割 ...

  4. (转)Maven学习总结(六)——Maven与Eclipse整合

    孤傲苍狼只为成功找方法,不为失败找借口! Maven学习总结(六)——Maven与Eclipse整合 一.安装Maven插件 下载下来的maven插件如下图所示:,插件存放的路径是:E:/MavenP ...

  5. npm 设置地址

    -- 查看当前地址: npm config get registry https://registry.npmjs.org/ npm config get disturl undefined -- 设 ...

  6. python循环删除列表元素常见错误与正确方法

    python循环删除列表元素 觉得有用的话,欢迎一起讨论相互学习~Follow Me 常见错误 常见错误一:使用固定长度循环删除列表元素 # 使用固定长度循环pop方法删除列表元素 num_list_ ...

  7. springSecurity自定义认证配置

    上一篇讲了springSecurity的简单入门的小demo,认证用户是在xml中写死的.今天来说一下自定义认证,读取数据库来实现认证.当然,也是非常简单的,因为仅仅是读取数据库,权限是写死的,因为相 ...

  8. jeecms常用的标签

    友情链接 <dt>友情链接:</dt> [@cms_friendlink_list] [#list tag_list as link] <dd><a href ...

  9. 谷歌AMP和百度MIP是什么鬼?

    首先我们来看定义: 谷歌AMP(Accelerated Mobile Pages,加速移动页面)是Google推出的一种为静态内容构建 web 页面,提供可靠和快速的渲染,加快页面加载的时间,特别是在 ...

  10. ASP.NET MVC学习笔记-----ControllerFactory

    上面这张图是asp.net mvc的工作流程图,我们可以看到当一个http请求来临时,首先需要经过路由系统,路由系统从中获取一些路由信息,然后ControllerFactory根据所得到的路由信息生成 ...