RequireJS加载js文件

RequireJS的目标是鼓励代码的模块化,它使用了不同于传统

//This sets the baseUrl to the "scripts" directory, and loads a script that will have a module ID of 'main'
<script data-main="scripts/main.js" src="scripts/require.js"></script>

baseUrl亦可通过RequireJS config手动设置。如果没有显示指定config及data-main,则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。
RequireJS默认嘉定所有的依赖资源都是js脚本,因此无需再module ID上再加”.js”后缀,RequireJS在进行moduleID到path的解析时会自动不上后缀。你可以通过paths config设置一组脚本,这些有助于我们在使用脚本时码更少的字。
有时候你想避开“baseUrl+paths”的解析过程,而是直接指定加载某一个目录下的脚本。此时可以这样做:如果一个module ID符合下述规则之一,其ID解析会避开常规的“baseUrl+paths”配置,而是直接将其加载为一个相对于当前HTML文档的脚本:

  • 以“.js”结束。
  • 以“/”开始。
  • 包含URL协议,如“http:”or“https:”。
    一般来说,最好还是使用baseUrl及“paths”去设置moduleID。它会给你带来额外的灵活性,如便于脚本的重命名、重定位等。同时,为了避免凌乱的配置,最好不要使用多级嵌套的目录层次来组织代码,而是要么将所有的脚本都放置到baseUrl中个,要么分置为项目库/第三方库的一个扁平结构。

  • www/

    • index.html
    • js/
      • app/
        • sub.js
      • lib/
        • jquery.js
        • canvas.js
      • app.js

    index.html

<script data-main="js/app.js" src="js/require.js"></script>

app.js

requirejs.config({
  //By default load any module IDs from js/lib
  baseUrl: 'js/lib',
  //except, if the module ID starts with "app",
  //load it from js/app directory. paths
  //config is relative to the baseUrl, and 
  //never includes a ".js" extension since
  //the paths config could be for a directory
  paths: {
    app: '../app'
  }
});

//Start the main app logic.
requirejs(['jquery', 'canvas', 'app/sub'], function($, canvas, sub){
  //jQuery, canvas and the app/sub module are all
  //loaded and can be userd here now.
}

理想情况下,每个加载的脚本都是通过define()来定义的一个模块;但有些“浏览器全局变量注入”型的传统/遗留库并没有使用define()来定义他们的依赖关系,你必须为此使用shim config来指明它们的依赖关系。如果你没有指明依赖关系,加载可能报错。这是因为基于速度的原因,RequireJS会异步地以无序的形式加载这些库。

注意
1、data-main指定的js文件也会被当做一个module,命名为其js文件名称。
2、在require config中paths不仅可以配置一个js文件的module ID,还可以配置一个文件夹的module ID,那么这个文件夹下所有的js文件都可以用这个文件夹的moduleID/js文件名表示。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值