多语言展示
当前在线:1961今日阅读:103今日分享:49

HTML5高级工程师之requireJs

随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已 经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。于是requireJs等模块 化开发框架便应运而生。
方法/步骤
1

AMD模块化可以让我们更方便地使用别人的代码,想要什么功能, 就加载什么模块,但前提是大家必须以同样的方式编写模块。目前, 通行的Javascript模块规范共有两种:CommonJS和AMD。AMD是'Asynchronous Module Definition”的缩写,意思 就是'异步模块定义'。它采用异步方式加载模块,模块的加载不影 响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回 调函数中,等到加载完成之后,这个回调函数才会运行。requireJs就是适用的AMD规范。

2

传统引入形式的缺点 1. js加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长; 2. 当依赖关系很复杂的时候,代码的编写和维护都会变得困难。

3

JS阻塞浏览器渲染

4

requireJs非阻塞渲染

5

js的加载

6

requireJs的优点

7

requireJs的下载

8

requireJs的使用

9

标签属性

10

主模块加载require.js以后,需要加载自己的代码,这里需要我们设置一个主模块 main.js,意思是整个网页的入口代码。 主模块要将所有的js文件连接到一起,需要require函数的支持。

11

三个方法 在我们使用requireJs时,我们主要会用到下面三个方法:       define()   用来定义一个模块;    require()   用来加载依赖模块,并执行加载完后的回调函数;       require.config()   用来配置加载行为。

12

require()

13

require.config()   require.config()方法,可以让我们对模块的加载行为进行自 定。它写在主模块的头部,参数就是一个对象,通过对象的属性 进行各种设定。主要是用于对文件的加载路径进行设置。

14

paths()

15

baseUrl

16

shim

17

define() define()   用来自己定义一个模块。    在使用requireJs的时候,我们往往需要加载一些自己编写的模块,这些模块必须采用特定的define()函数来定义。

18

define无依赖

19

define有依赖

20

加载CSS文件

21

依赖性加载CSS文件

推荐信息