require js初识
来源:互联网 发布:ae cs4软件下载 编辑:程序博客网 时间:2024/06/04 20:08
原文地址:http://www.2cto.com/kf/201404/290815.html
1、为什么使用require.js
作为命名空间;作为命名空间使用;异步加载js,避免阻塞,提高性能;js通过require加载,不必写很多script
2、require.js的加载
require.js下载下载后,放在指定目录就可以加载了1
<script src=
"js/require.js"
></script>
1
<script src=
"js/require.js"
defer async=
"true"
></script>
这种写法虽然简单,但其实并不推荐,一般的写法还要再加个属性:
1
<script data-main=
"js/main"
src=
"js/require-jquery.js"
></script>
1、加载了 require-jquery.js 文件。注意,官方提供了 require.js和 jquery 的打包版本,推荐。
2、在加载之后,加载入口文件 js/main.js ,注意,main.js 写进去的时候,不需要后缀名。
你的所有其他 js 模块文件,都可以写在 main.js 里面,通过 main.js 加载。
3、require.js的配置
在data-main指定的主文件中,通过require.config来配置,并加载其他js模块1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
require.config({
baseUrl:
'js/'
,
paths: {
"backbone"
:
"backbone"
,
"underscore"
:
"underscore"
},
shim: {
"backbone"
: {
deps: [
"underscore"
],
exports:
"Backbone"
},
"underscore"
: {
exports:
"_"
}
}
});
- exports值(输出的变量名),表明这个模块外部调用时的名称;
- deps数组,表明该模块的依赖性。
- 主模块可以将项目基础模块加载加来并定义全局方法等
- 123
require([
'jquery'
,
'underscore'
,
'backbone'
], function ($, _, Backbone){
// some code here
});
4、定义模块(符合AMD规范)
require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。
具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:加载方法如下:123456789// math.js
define(function (){
var add = function (x,y){
return
x+y;
};
return
{
add: add
};
});
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。1234// main.js
require([
'math'
], function (math){
alert(math.add(
1
,
1
));
});
12345678define([
'myLib'
], function(myLib){
function foo(){
myLib.doSomething();
}
return
{
foo : foo
};
});
定义的模块返回函数个数问题
1、define 的return只有一个函数,require的回调函数可以直接用别名代替该函数名。
2、define 的return当有多个函数,require的回调函数必须用别名调用所有的函数。
此处query 函数是1的情况,book 函数是2的情况。123456require([
'selector'
,
'book'
], function(query,book) {
var els = query(
'.wrapper'
);
book.fun1();
book.fun2();
});
5、加载js文件
到此为止,我们遇到了两个关键词,一个是 define ,可以用来定义模块(命名空间),第一部分我们讲了;还有一个是 require,可以直接加载其他 js。它除了简单的用法:之外,还有和 define 类似的复杂用法:123<script>
require( [
"some"
] );
</script>
总结一下,define 是你定义自己的模块的时候使用,可以顺便加载其他js;require 直截了当,供你加载用的,它就是一个加载方法,加载的时候,可以定义别名。123456<script>
require([
"aModule"
,
"bModule"
], function() {
myFunctionA();
// 使用 aModule.js 中的函数 myFunctionA
myFunctionB();
// 使用 bModule.js 中的函数 myFunctionB
});
</script>
6、requ.js插件
require.js还提供一系列插件,实现一些特定的功能。
domready插件,可以让回调函数在页面DOM结构加载完成后再运行。
text和image插件,则是允许require.js加载文本和图片文件。123require([
'domready!'
], function (doc){
// called once the DOM is ready
});
类似的插件还有json和mdown,用于加载json文件和markdown文件。123456789define([
'text!review.txt'
,
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
7、其他问题
1、路径与后缀名在 require 一个 js 文件的时候,一般不需要加上后缀名。如果加上后缀名,会按照绝对路径加载。没有后缀名,是按照下面的路径加载:也就是默认加载 data-main 指定的目录,即 js/main.js 文件所在的目录。当然,你可以通过配置文件修改。1<script data-main=
"js/main"
src=
"js/require-jquery.js"
></script>
2、define 定义模块方法只能用在独立的js文件中,不能在页面中直接使用。
否则会报 Mismatched anonymous define() module 错误。3、在代码中require一个文件多次,不会导致浏览器反复加载
不会,这是 RequrieJS 的优点,即使你反复 require 它,它只加载一次。
8、require深入
1、cdn回退其支持当CDN加载不正确时,回退加载本地相应的库。我们可以通过require.config达到这个目的:2、没有依赖?对象字面量?没问题!12345678requirejs.config({
paths: {
jquery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js'
,
'lib/jquery'
]
}
});
当你写一个没有任何依赖的模块,并且只是返回一个对象包含一些功能函数,那么我们可以使用一种简单的语法:很简单,也很有用,如果该模块仅仅是功能的集合,或者只是一个数据包。1234567891011define({
forceChoke: function() {
},
forceLighting: function() {
},
forceRun: function() {
}
});
3、循环依赖在一些情况中,我们可能需要模块moduleA和moduleA中的函数需要依赖一些应用。这就是循环依赖。4、得到模块的地址如果你需要得到模块的地址,你可以这么做……1234567891011// js/app/moduleA.js
define( [
"require"
,
"app/app"
],
function( require, app ) {
return
{
foo: function( title ) {
var app = require(
"app/app"
);
return
app.something();
}
}
}
);
5、JSONP1var path = require.toUrl(
"./style.css"
);
我们可以这样处理JSONP终端:12345require( [
"http://someapi.com/foo?callback=define"
], function (data) {
console.log(data);
});
9、r.js压缩
Require.js 提供一个脚本 r.js ,可以将所有使用到的模块压缩成一个脚本文件,r.js 可以使用 node.js 来执行。
在压缩模块前,需要写一个配置文件,说明主模块名,压缩后的文件名,哪些模块不要压缩
没有使用 define 定义的模块都不要压缩,包括 jquery,backbone 等库及其插件
压缩命令:1234567891011//build.js
({
baseUrl:
'.'
,
paths: {
'jquery'
:
'empty:'
,
'underscore'
:
'empty:'
,
'backbone'
:
'empty:'
,
},
name:
'main'
,
out:
'main.min.js'
})
1node r.js -o build.js
0 0
- [require.js]初识require.js
- require js初识
- 初识javascript模块加载器require.js
- 初识模块化AMD和require.js
- require.js
- require.js
- require.js
- require.js
- Require.js
- require.js
- Require.js
- require.js
- JS-require.js
- JS-require.js
- require.js入门教程
- require.js 使用经验
- require.js的用法
- require.js 入门学习
- Intent 和 Intent Filter
- C++ primer 第四版 习题3.13
- 个人学习线程笔记
- centos6.5下 GD库不支持jpeg的问题
- new深入剖析 c++
- require js初识
- hash_map
- 【cocos2dx-3.2】Tile Map 的六边形实现
- GIT 教程
- 【SSH之旅】一步步学习Struts1框架(一):封装什么
- win7下在当前目录下打开cmd命令窗口
- Selector android
- iOS语音通话(语音对讲)
- 以正确的方式开始一个 Django 1.6 项目