认识达内从这里开始

认真做教育专心促就业

前端模块化开发的理解和操作方法及注意事项（三）

发布：达内培训
来源：达内培训
时间：2018-10-27 17:48

    为什么维护组件间的依赖关系这么费神呢，因为 JavaScript 中天生缺少了引入其它 js 文件的语法。在 Java 中可以通过 import 引入依赖组件，在 CSS 中也有 @import 命令去引入其它的 CSS 文件，而 js 中却不能自动管理依赖。-达内培训负责整理
    除了文件间的依赖关系维护不便外，如果在页面中引入的组件非常多，我们还得保证引用组件的路径及先后顺序不能出错，一旦出错，又得花时间查找错误，可想而知工作量是很可观了，再加上组件引入过多，又是以同步的方式加载各组件，也可能导致浏览器假死的现象。
    要解决这些问题，模块化开发的价值就体现出来了。
    3. 模块化开发
    3.1 模块化
    所谓模块化，就是把一个相对独立的功能，单独形成一个文件，可输入指定依赖、输出指定的函数，供外界调用，其它都在内部隐藏实现细节。这样即可方便不同的项目重复使用，也不会对项目造成额外的影响。
    前端使用模块化载发主要的作用是：
    · 异步加载 js,避免浏览器假死
    · 管理模块间依赖关系，便于模块的维护
    有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。
    但要使用模块的前提，是必然要形成可遵循的开发规范，使得开发者和使用者都有据可寻，否则你有你的写法，我有我的写法，大家没办法统一，也就不能很好的互用了。
    目前通用的规范是，服务器端使用 CommonJS 规范，客户端使用 AMD/CMD 规范。
    3.2 CommonJS
    CommonJS 规范出现是在 2009 年，Node.js 就是该规范的实现。CommonJS 规范中是这样加载模块的：
    var gulp = require（“gulp”）；
    gulp.task（/* 任务 */）；
    模块的加载是同步的，这种写法适合服务器端，因为在服务器读取的模块都是在本地磁盘，加载速度很快，可同步加载完成。但是如果在客户端浏览器中，因为模块是放在服务器端的，模块加载取决于网络环境，以同步的方式加载模块时有可能出现“假死”状况。
    今天我主要介绍针对浏览器编程，不针对 Node.js 内容，所以在此关于 CommonJS 规范就不作深究，知道 require（）用于加载模块即可。
    3.3 AMD
    由于在浏览器端，模块使用同步方式加载可能出现假死，那么我们采用异步加载的方式来实现模块加载，这就诞生了 AMD 的规范。

AMD 即 Asynchronous Module Definition 的简称，表示“异步模块定义”的意思。AMD 规范：https://github.com/amdjs/amdjs-api/wiki/AMD.

达内培训

    AMD 采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖所加载模块的语句，都被定义在一个回调函数中，等到模块加载完毕后，回调函数才会执行。
    AMD 也采用 require（）来加载模块，语法结构为：
    require（[module], callback）；
    module 是数组参数，表示所加载模块的名称；callback 是回调函数参数，所有模块加载完毕后执行该回调函数。如：
    require（[“jquery”], function（$）{
    $（“#box”）。text（“test”）；
    }）；
    3.4 CMD
    CMD 即 Common Module Definition 的简称，表示“通用模块定义”的意思。CMD 规范：https://github.com/cmdjs/specification/blob/master/draft/module.md.
    CMD 规范明确了模块的基本书写格式和基本交互规则，该规范是在国内发展出来的，由玉伯在推广 SeaJS 过程中规范产出的。
    实现了 CMD 规范。SeaJS 要解决的问题和 RequireJS 一样，只不过在模块定义方式和模块加载（运行、解析）时机上有所不同。
    3.5 AMD 与 CMD 的区别
    AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
    CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
    二者主要区别如下：
    1 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。
    2 CMD 推崇依赖就近，AMD 推崇依赖前置。
    3 AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。
    当然还有一些其它细节上的区别，具体看规范的定义就好。
    以上就是达内培训给大家做的内容详解，更多关于IT的学习，请继续关注达内培训

< 上一篇：前端模块化开发的理解和操作方法及注意事项（二）

下一篇：SEO和PPC做网络营销 >