require.js 主要用法
来源:互联网 发布:java项目效率优化案例 编辑:程序博客网 时间:2024/05/17 01:28
1. 诞生
- 实现 js 文件的异步加载,避免网页失去响应
- 管理 js 文件间的依赖关系,便于代码的编写及维护
2. 加载require.js
<script src="js/require.js" defer async="true" ></script>
* 注: async设置为true,来异步加载requirejs,避免阻塞。ie不是被async,所以还要加上defer。*
3. 基本API
require定义三个变量,define,require,requirejs。其中 require===requirejs。
- define。用来定义模块
- require。加载模块,并执行加载后的回调函数。
// main.js require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){ // some code here });
4. 主模块
<script src="js/require.js" data-main="js/main"></script>
主模块: 使用data-main属性指定网页的主模块。该文件会首先加载,是网页的入口代码。
require.config()
使用该方法,我们可以对模块的加载行为进行自定义。写在主模块的头部。参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。
paths
属性
require.config({ paths: { "a": "lib/a", "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min", }})
可以使用本地路径,也可以直接指定网址。
注意: 模块路径默认是main.js的路径。例如: main.js 处于名为 js 的文件夹下,对以上 a.js 的实际查找路径的 js/lib/a 。
如果想要修改基目录,可以使用 baseUrl: “js/lib”。
require.config({ baseUrl: "js/lib", paths: { "a": "a", "b": "b", }})
shim
属性
require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合。所以,利用shim
属性能够实现加载非规范的模块。
例如: backbone,underscore都没有采用AMD规范,所以在加载模块的时候使用shim来定义模块的特征。
(1)exports值(输出的变量名),表明这个模块外部调用时的名称;
(2)deps数组,表明该模块的依赖性。
require.config({ shim: { "underscore": { exports: "_" }, "backbone": { deps: ["underscore", "jquery"], exports: "backbone", } // jquery的插件可以这样配置 'jquery.scroll': { deps: ['jquery'], exports: 'jQuery.fn.scroll' } }})
5. 模块加载
例如: math.js 定义了一个math模块。
define(function (){ var add = function (x,y){ return x+y; }; return { add: add };});
如果math模块依赖于其他模块,那么define的第一个参数是一个数组,指明依赖关系。
define(["someModule"], function (moduleA){ function func(){ moduleA.dosomething(); } return { func: func };});
加载math模块
require(['math'], function(math){ console.log(math.add(1,2));})
1 0
- require.js 主要用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- Require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- require.js的用法
- 设计模式学习(二十六)————享元模式
- Python简单知乎爬虫--爬取页面的图片并下载到本地
- 打包编译hadoop之HelloWord(WordCount)
- Google Protocol Buffer 的使用和原理
- UIAlertController更改内容样式及插入自定义View
- require.js 主要用法
- cmd的网络命令整理
- 收集的常用Github上比较优秀的项目
- 获取微信OpenId
- java--刻类模板
- Java网络编程-(1)套接字
- Web前端面试指导(三十):JavaScript有几种类型的值?你能画一下他们的内存图吗?
- 第一篇博客
- java中各种集合的用法和比较