RequireJS

简介: <script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script> 首页index.html只需要引入requireJs库文件,并且指明入口函数main.js(data-main),它一般用来对requirejs进行配置,
<script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script>
首页index.html只需要引入requireJs库文件,并且指明入口函数main.js(data-main),它一般用来对requirejs进行配置,
main.js内容如下:main.js这个文件做的事情就是:由requirejs异步载入所有文件

require.config({
    paths:{
        //一些库文件
        'jquery': '//cdn.staticfile.org/jquery/1.10.2/jquery.min',
        'angular': '//cdn.staticfile.org/angular.js/1.2.10/angular.min',
        'angular-route': '//cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min','domReady': '//cdn.staticfile.org/require-domReady/2.0.1/domReady.min',
        //js文件
        'bootstrap': "../scripts/bootstrap",
        'app': "../scripts/app",
        'router': "../scripts/router"
        .....以及其他的js文件,这里省略
    },
    shim:{
        'angular':{
            exports:'angular'
        },
        'angular-route':{
            deps:['angular'],
            exports: 'angular-route'
        }
    },
    deps:['bootstrap'],
    urlArgs: "bust=" + (new Date()).getTime()  //防止读取缓存,调试用
});



requirejs一共提供了两个全局变量:
1. requirejs/require: 用来配置requirejs及载入入口模块。如果其中一个命名被其它库使用了,我们可以用另一个
声明模块及js文件地址



2. define: requirejs的方式来定义模块:
define([], function() {
  return {
    hello: function() {
      alert("hello, app~");
    }
  }
});


普通的方式定义了一个函数,我们能在requirejs里使用它吗?

暴露单个变量exports:

可以把某个非requirejs方式的代码中的某一个全局变量暴露出去,当作该模块以引用。
shim: {
    hello: { exports: 'hello' }
}


暴露多个变量:init

这时就不能再用 exports 了,必须换成 init 函数:

shim: {
    hello: {
      init: function() {
        return {
          hello1: hello1,
          hello2: hello2
        }
      }
    }
  }

当exports与init同时存在的时候, exports将被忽略。



有主的模块(不能重新起模块名)
它们声明为有主的,那么所有的模块只能使用同一个名字引用它们,这样系统就只会载入它们一次。
声明了一个确定的模块名。define('jquery', [], function() { ... });



无主的模块
define([...], function() {
  ...
});

我们可以在 requirejs.config 里,使用任意一个模块名来引用它

目录
相关文章
|
12月前
|
Rust 编译器 Go
你真的了解ESM吗?
模块兼容性 推荐阅读指数⭐️⭐️⭐️ ESM是个啥 推荐阅读指数⭐️⭐️⭐️⭐️ 在浏览器中使用ESM 推荐阅读指数⭐️⭐️⭐️⭐️ 模块指定符 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 默认情况下,模块是defer的 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 动态导入 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ import.meta 推荐阅读指数⭐️⭐️⭐️⭐️⭐️ 优化建议 推荐阅读指数⭐️⭐️⭐️ 网站中使用ESM 推荐阅读指数⭐️⭐️⭐️
103 0
你真的了解ESM吗?
|
缓存 Rust 前端开发
esbuild + swc 能有多快?
前端工具层出不穷,之前有常用的打包工具webpack,现在有了速度更快的vite。 vite的开发模式是基于esBuild编译的,打包又是基于rollup,启动项目是很快的。
640 0
esbuild + swc 能有多快?
|
JavaScript 前端开发 C#
requireJS的基本用法(下)
requireJS的基本用法(下)
126 0
requireJS的基本用法(下)
|
JavaScript 前端开发 Go
requireJS的基本用法(上)
requireJS的基本用法
128 0
requireJS的基本用法(上)
|
JavaScript 前端开发 中间件
Koa中 引入使用 EJS 模板引擎
Koa中 引入使用 EJS 模板引擎
190 0
|
JavaScript
JS模块化(一):Commonjs
JS模块化(一):Commonjs
115 0
JS模块化(一):Commonjs
|
JavaScript 前端开发 应用服务中间件