requirejs的使用(AMD规范实现的库)

什么是requirejs

要说requirejs就要先说一下AMD。
AMD是”Asynchronous Module Definition”的缩写,意思就是”异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。
我们要介绍的require.js就是AMD规范实现的一个库。

requirejs的作用

require.js可以很好的解决两个问题

  1. 实现js文件的异步加载,避免网页失去响应;
  2. 管理模块之间的依赖性,便于代码的编写和维护。

如何使用requirejs

鉴于requirejs官网文档实在太烂,我就直接说一下具体使用流程

  1. 首先,在index.html的script中引入我们的require.js的依赖,以及main来异步加载main.js(由于require.js默认的文件后缀名是js,所以可以把main.js简写成main)

  1. main.js可以看作是整个html的JS管理入口,之后我们所有的依赖都在main.js里来控制处理。
    main.js基本内容分两部分

    1. require.config()主要来布置一些外来引入的依赖,用固定的path定义,
    2. require([url],callback)来引入我们自己定义的依赖,可以有多个:
require.config({
    paths: {
        jquery: 'jquery.min'
    }
});

requirejs(['./hello'],function(x){
  document.body.append(x.person.name)
  console.log(2)
  }
  1. 用define()来定义被引入的依赖,如hello.js.而在define()内部,我们可以继续引用其他依赖,如frank.js;
define(['./frank'],function(frank){
  console.log(1)
  return {
    person:frank
  }
})

4.定义frank.js为一个数据文件:

define({
      name: "Hello,Frank",
      age: 18
});

5.为了看出执行的先后顺序,在每一层函数里加入了console.log(1),console.log(2).可以看出执行顺序是先hello.js后main.js:

6.这样就可以实现一个RequireJS模块化管理的基本模型,例子中的main.js定义了一个固定路径的jquery依赖和自己定义的hello.js模块,又在hello.js内引入frank.js的数据,最后成功拿到frank的数据,输出在页面里。
当我们打开index.html,可以看到

Hello,Frank

你可能感兴趣的:(requirejs的使用(AMD规范实现的库))