JavaScript模块化-AMD

最近写一个小游戏的时候用的是RequireJs构建项目,顺便补了一下RequireJs,下面讲解一些基础和进阶的用法。

JavaScript模块化-AMD_第1张图片

AMD

AMDAsync Module Definition代表的意思为异步模块定义,是Javascript模块化的浏览器解决方案,它采用异步的方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在回调函数中,等到加载完成之后,这个回调函数才会运行。

JavaScript模块化-AMD_第2张图片

AMD规范定义了一个函数define,通过define方法定义模块:

 define(id?, dependencies?, factory);

并且采用require()语句加载模块:

require([module], callback);

引入的模块和回调函数不是同步的,所以浏览器不会因为引入的模块加载不成功而假死。

RequireJS

RequireJS是一个基于AMD规范实现的JavaScript文件和模块加载器。它针对浏览器内使用进行了优化,并且对其他JS环境(Rhino和Node)做了兼容。使用RequireJS这样的模块化脚本加载器可以提高代码的速度和质量。

  • 异步加载: 使用 RequireJS,会在相关的 js 加载后执行回调函数,这个过程是异步的,所以它不会阻塞页面。
  • 按需加载: 通过 RequireJS,你可以在需要加载 js 逻辑的时候再加载对应的 js 模块,不需要的模块就不加载,这样避免了在初始化网页的时候发生大量的请求和数据传输。

基本使用

根据官方文档和项目实例,接下来说一下ReuqireJS的基本使用:

Reuqire Download

下载最新版的RequireJS

Project Structure

下面是官方示例的RequireJS项目结构,对内容做了小小的改动,www作为项目的根目录,lib中存放项目依赖即需要的一些JS库,app.js为主入口文件,app中存放自己写的模块文件。

JavaScript模块化-AMD_第3张图片

Project Code

1. index.html

index.html中定义了一个script标签来引入require.js,其中data-main属性是一个自定义属性,这个属性指定在加载完 reuqire.js 后,就将属性指定路径下的JS文件并运行,这个文件即入口文件,这里的app.jsjs后缀被省略掉了。



    
        
    
    
        

Hello World

如果

你可能感兴趣的:(javascript,前端,require,amd模块加载,模块化)