require.js入门指南(三)

时间 2019-12-01

标签 require.js require 入门指南栏目 JavaScript 繁體版

原文原文链接

下面咱们来讲说main.js.html

前面没有用到,由于例子比较简单.当咱们的js文件夹中包含多个文件时,每次require都要写 (路径名/文件名) 这样的require()参数,很麻烦.并且,直接把js代码写在页面中,也是很差的.jquery

咱们就能够用main.js设置参数,简化操做,并把页面须要的js代码写在其中.web

如今咱们在js文件夹下新建一个文件夹,命名为lib,并把jquery.js移动至这个目录下.这个文件夹就用来存放全部的库文件,也方便维护和管理.canvas

目录结构变成了下面这样子:ruby

若是咱们不使用main.js,那么index.html想引用jquery,要像下面这样写:app

<!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <script src="js/require.js"></script>
            <title>requireJS</title>
            <script>
            require(['js/lib/jquery'],function(jquery){
                alert($().jquery);
            })
            </script>
        </head>
            <body>

            </body>
    </html>

运行结果如图: ide

若是有多个文件须要引入的话,写起来比较长,不方便.requirejs

这时候咱们就能够在main.js里面设置路径,下面是main.js的代码ui

require.config({
    baseUrl:'./js',
    paths:{
        jquery:'./lib/jquery',
    }
});

这里须要解释一下:spa

baseUrl :通常指的是main.js相对与index.html的路径 ,我这里就是./js
paths: 键名就是模块的名字,或者叫ID,值就是这个模块相对与baseUrl的路径加上模块文件的名称(不加.js后缀).

下面是引入index.html页面中的方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="js/require.js" data-main="js/main"></script>
    <title>requireJS</title>
　　<script>
        require(['jquery'],function(jq){
            alert($().jquery);
        });
    </script>
</head>
<body>

</body>
</html>

说明:

咱们并无像引入其它JS那样用script标签把main.js引入.
这是requireJS指定的方法,能够查看文档.
在data-main后面引入main.js文件.格式一样是相对与当前html页面的路径 / 入口文件名(不加后缀,这里是main).

这时候requirejs的文件路径就配置好了.可是若是咱们在页面中使用的话,会出现如下问题:

咱们刚刚在main.js中配置了jquery.js的paths,难道出了什么问题?

实际上是由于路径是在main.js配置的,只对main.js中的模块生效. 而咱们的代码也不该该写在html页面中,而是写在main.js中.

这样咱们只须要在页面中引入main.js,main.js中再对须要的模块进行请求,模块都加载完毕后,执行main.js中的callback,也就是第二个参数中的代码.

如此就实现了js文件的统筹管理,按需加载.

代码以下:

main.js中的代码以下:

require.config({
    baseUrl:'js',
    paths:{
        jquery:'lib/jquery',
    }
});
require(['jquery'],function(jq){
            alert($().jquery);
        });

运行效果以下: