AMD模块化可以让我们更方便地使用别人的代码,想要什么功能, 就加载什么模块,但前提是大家必须以同样的方式编写模块。目前, 通行的Javascript模块规范共有两种:CommonJS和AMD。AMD是'Asynchronous Module Definition”的缩写,意思 就是'异步模块定义'。它采用异步方式加载模块,模块的加载不影 响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回 调函数中,等到加载完成之后,这个回调函数才会运行。requireJs就是适用的AMD规范。
传统引入形式的缺点 1. js加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长; 2. 当依赖关系很复杂的时候,代码的编写和维护都会变得困难。
JS阻塞浏览器渲染
requireJs非阻塞渲染
js的加载
requireJs的优点
requireJs的下载
requireJs的使用
标签属性
主模块加载require.js以后,需要加载自己的代码,这里需要我们设置一个主模块 main.js,意思是整个网页的入口代码。 主模块要将所有的js文件连接到一起,需要require函数的支持。
三个方法 在我们使用requireJs时,我们主要会用到下面三个方法: define() 用来定义一个模块; require() 用来加载依赖模块,并执行加载完后的回调函数; require.config() 用来配置加载行为。
require()
require.config() require.config()方法,可以让我们对模块的加载行为进行自 定。它写在主模块的头部,参数就是一个对象,通过对象的属性 进行各种设定。主要是用于对文件的加载路径进行设置。
paths()
baseUrl
shim
define() define() 用来自己定义一个模块。 在使用requireJs的时候,我们往往需要加载一些自己编写的模块,这些模块必须采用特定的define()函数来定义。
define无依赖
define有依赖
加载CSS文件
依赖性加载CSS文件