使用requireJS按需加载

一、requirejs与常规加载js的区别

常用加载js文件的弊端

1：加载js文件，浏览器停止页面渲染。文件过长，浏览器响应失效

2：由于js文件之间存在依赖关系，因此必须严格保证加载顺序

3：RequireJS是一个JavaScript的模块加载器

 通过模块加载器可以有效的解决这些问题：

      1.JS文件的依赖关系。

      2.通过异步加载优化script标签引起的阻塞问题

      3.可以简单的以文件为单位将功能模块化并实现复用

使用方法：

<!--引入require.js（实际上除了require.js，其它文件模块都不再使用script标签引入）--->

<script data-main="main" src="require.js"></script>
        data-main属性的作用是，指定网页程序的主模块
 
 
1
2
3
4
 
 
1
2
3
4

mian.js

require.config({ 
    paths: { 
        jquery: 'jquery-1.7.2' 
    } 
}); 
require(['jquery'], function($) { 
    alert($().jquery); 
}); 
 
 
1
2
3
4
5
6
7
8
 
 
1
2
3
4
5
6
7
8

二、模块的加载

require.config({
　　　　baseUrl: "js/lib",
　　　　// 直接指定加载某一个目录下的脚本
　　　　paths: {
　　　　　　"jquery": "jquery.min",
 　　　　　　"underscore": "underscore.min",
 　　　　　　"backbone": "backbone.min"
　　　　}
　　});
 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

如果某个模块在另一台主机上

require.config({

　　　　paths: {

　　　　　　"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"

　　　　}

　　});
　
 
 
1
2
3
4
5
6
7
8
9
10
 
 
1
2
3
4
5
6
7
8
9
10

三、AMD模块的写法

模块必须采用特定的define()函数来定义 
math.js

define(function (){

　　　　var add = function (x,y){

　　　　　　return x+y;

　　　　};

　　　　return {

　　　　　　add: add
 　　　　};

　　});

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

加载方法如下： 
main.js

require(['math'], function (math){

　　　　alert(math.add(1,1));

　　});

 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

define(['myLib'], function(myLib){

　　　　function foo(){

　　　　　　myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

　　});

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。

四、加载非规范的模块

require.config({

　　　　shim: {

 　　　　　　'underscore':{
 　　　　　　　　exports: '_'
 　　　　　　},

　　　　　　'backbone': {
 　　　　　　　　deps: ['underscore', 'jquery'],
 　　　　　　　　exports: 'Backbone'
 　　　　　　}

　　　　}

　　});

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

require.config()接受一个配置对象，shim属性：专门用来配置不兼容的模块。 
（1）exports值（输出的变量名），表明这个模块外部调用时的名称 
（2）deps数组，表明该模块的依赖性。