Modularity（模块化-AMD规范）

最新推荐文章于 2022-04-10 22:09:38 发布

SeriousLose

最新推荐文章于 2022-04-10 22:09:38 发布

阅读量150

点赞数 1

分类专栏： Javascript Other

本文链接：https://blog.csdn.net/SeriousLose/article/details/118102838

版权

Javascript 同时被 2 个专栏收录

98 篇文章 1 订阅

订阅专栏

Other

45 篇文章 1 订阅

订阅专栏

第三阶段： AMD规范（Asynchronous Module Definition：异步模块定义）
	CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。 AMD规范则是非同步加载模块，允许指定回调函数。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范。而AMD规范的实现，就是大名鼎鼎的require.js了。
	AMD标准中，定义了下面两个API： 1.require([module], callback) 2.define(id, [depends], callback) 即通过define来定义一个模块，然后使用require来加载一个模块。并且，require还支持CommonJS的模块导出方式。
	require.js 主要解决两个问题：异步加载模块；模块之间依赖模糊； <script src="https://cdn.bootcdn.net/ajax/libs/require.js/2.3.6/require.js"></script>
	定义模块 define(id,[dependence],callback) id：一个可选参数，说白了就是给模块取个名字，但是却是模块的唯一标识。如果没有提供则取脚本的文件名 dependence：以来的模块数组 callback：工厂方法，模块初始化的一些操作。如果是函数，应该只被执行一次。如果是对象，则为模块的输出值
	使用模块 require([moduleName],callback); moduleName：依赖的模块数组 callback：即为依赖模块加载成功之后执行的回调函数（前端异步的通用解决方案）
	data-main <script src="scripts/require.js" data-main="scripts/app.js"></script> data-main 指定入口文件，比如这里指定 scripts 下的 app.js 文件，那么只有直接或者间接与app.js有依赖关系的模块才会被插入到html中
	require.config 通过这个函数可以对requirejs进行灵活的配置，其参数为一个配置对象 baseUrl——用于加载模块的根路径。 paths——用于映射不存在根路径下面的模块路径。 shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim deps——加载依赖关系数组
	require.config({ //默认情况下从这个文件开始拉去取资源 baseUrl: 'scripts/app', //如果你的依赖模块以pb头，会从scripts/pb加载模块。 paths: { pb: '../pb', }, // load backbone as a shim，所谓就是将没有采用requirejs方式定义 // 模块的东西转变为requirejs模块 shim: { backbone: { deps: ['underscore'], exports: 'Backbone', }, }, });
	优点：适合在浏览器环境中异步加载模块。可以并行加载多个模块。
	缺点：提高了开发成本，并且不能按需加载，而是必须提前加载所有的依赖。
	特点: 异步加载模块，不会造成因网络问题而出现的假死装填; 显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入; 在模块开始时，加载所有所需依赖;

// 文件名: foo.js
define(['jquery', 'underscore'], function ($, _) {
    // 方法
    function a(){}; // 私有方法，因为没有被返回(见下面)
    function b(){}; // 公共方法，因为被返回了
    function c(){}; // 公共方法，因为被返回了
     //    暴露公共方法
    return {
        b: b,
        c: c
    }
});

// Demo目录

|-js
  |-libs
    |-require.js
  |-modules
    |-article.js
    |-user.js
  |-main.js
|-index.html

// user.js文件
// 定义没有依赖的模块
define(function() {
  let author = ‘Fly'
  function getAuthor() {
    return author.toUpperCase()
  }
  return { getAuthor } // 暴露模块
})

// article.js文件
// 定义有依赖的模块
define(['user'], function(user) {
  let name = 'SeriousLose'
  function consoleMsg() {
    console.log(`${name} by ${user.getAuthor()}`);
  }
  // 暴露模块
  return { consoleMsg }
})

// main.js
(function () {
  require.config({
    baseUrl: 'js/', // 基本路径 出发点在根目录下
    paths: {
      //映射: 模块标识名: 路径
      article: './modules/article', // 此处不能写成article.js,会报错
      user: './modules/user'
    }
  })
  require(['article'], function (alerter) {
    article.consoleMsg()
  })
})()


// 需要引入第三方库，则需要在 main.js 文件中引入

(function() {
  require.config({
    baseUrl: 'js/',
    paths: {
      article: './modules/article',
      user: './modules/user',
      // 第三方库模块
      jquery: './libs/jquery-1.10.1'// 注意：写成jQuery会报错
    }
  })
  require(['article'], function(alerter) {
    article.consoleMsg()
  })
})()

// index.html文件
<!DOCTYPE html>
<html>
  <head>
    <title>Modular Demo</title>
  </head>
  <body>
    <!-- 引入require.js并指定js主文件的入口 -->
    <script data-main="js/main" src="js/libs/require.js"></script>
  </body>
</html>

SeriousLose

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Modularity（模块化-AMD规范）

第三阶段： AMD规范（Asynchronous Module Definition：异步模块定义） CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。 AMD规范则是非同步加载模块，允许指定回调函数。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。 ...
复制链接

扫一扫