1.下载require.js 然后在页面引用

  • async="true"异步加载
  • data-main="js/config" 加载配置文件 目录/文件 文件不需要写后缀名.js
<script type="application/javascript" src="js/require.js" async="true" data-main="js/config"></script>

2.修改配置文件config.js

/*
* require 配置文件
*   @baseURI 基础路径,在这个路径之下,查找文件。将所有.js文件都放在js文件夹下的
*   @paths "别名":"文件路径(不需要带后缀.js) 可以是本地 js目录下的路径 也可以是 别的目录下面的文件路径 或者是[远程路径,'当远程路径加载不了的话用本地路径'] 远程路径要用[]"
*
* */
require.config({
    baseURI:"js",
    paths:{
        "jquery":["https://cdn.bootcss.com/jquery/3.4.1/jquery",'jquery'],
        "other":"/ruquire/other/other",
        "my":"my",
        "embed":"embed"
    }

})

3.写模块

/*
*模块统一用define() 定义
* define(["要加载的模块,也可以不写"],function(对应模块的对象){自己的方法})
* */

define(['jquery'],function ($) {
    return {
        "one":function () {
            console.log("one的方法");
        },
        "two":function () {
            console.log("two的方法");
        }
    }
})

4.应用

    /*可以依次看到加载 jquery.js other.js my.js*/
    require(['jquery','other','my'],function ($,other,my) {
        console.log("??");
    })
    /*可以看到加载了embed.js 然后使用模块内部定义的one方法*/
    require(['embed'],function (embed) {
        embed.one()
    })

练习demo
demo.zip

Last modification:October 16th, 2019 at 11:28 am
如果觉得我的文章对你有用,请随意赞赏