×
广告

JS——requireJS、r.js

96
饥人谷_阿群
2016.11.14 17:32* 字数 354

Q&A:

1. 如下requirejs配置中, baseUrl 有什么作用?以什么作为基准? paths 的作用和用法是什么?

requirejs.config({
  baseUrl: "src/js",  
  paths: {
    'jquery': 'lib/bower_components/jquery/dist/jquery.min'
  }
});
  • baseUrl:设置默认根路径,如果没有设置,则baseUrl定义为应用require.js的html文件所在目录;
  • 基准:以html文件所在目录为基准;
  • paths:paths是相对路径,当需要引用的模块不在当前目录树下,或者文件名比较复杂时,可以用paths设置以简化;如代码中所示,用jquery名称id代替lib文件夹下很长的文件路径。

2. 如下 r.js 的打包配置中 baseUrl 是什么? name 是什么

({
    baseUrl: "./src/js",
    paths: {
        'jquery': 'lib/bower_components/jquery/dist/jquery.min'
    },
    name: "main",
    out: "dist/js/merge.js"
})
  • baseUrl:是当前目录下的src文件夹里的js文件目录;
  • name:入口模块的id名称,这里用main.js作为入口模块(主模块);
  • out:输出目录;

Coding:

使用 requirejs完成如下功能:

  • 首屏大图为全屏轮播
  • 有回到顶部功能
  • PORTFOLIO 使用瀑布流布局(图片高度不一),下部有加载更多按钮,点击加载更多会加载更多数据(数据在后端 mock)
  • About 每个时间区块默认隐藏,曝光渐变展示
  • 使用 r.js 打包应用
    预览
    代码

本文归本人和饥人谷所有,如需转载请注明出处

饥人谷
Web note ad 1