第一次使用require.js(2)
2017-02-17 13:15
393 查看
由于上次对于require.js的使用只是一个皮毛,达到的目的也只是在一个js中调用另一个js中的接口的目的,未能对于里面的一些其他参数和方法进行解读,所以这次再来好好的总结一下。
shim的配置
理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合,还有自己定义的一些js文件。那么,require.js是否能够加载非规范的模块,使用期接口呢?
用一个例子来说明一下:(还是在上一个例子基础上扩展)
比如我们现在还有一个test2.js文件,这个文件的函数不是用模块化去写的,没有用到define,就是普通的一个js,现在想用到里面的一个接口函数怎么办呢?
/*********test2.js************/
function fun2(){
console.log("test2:"+$().jquery);
}
/*******main.js************/
require.js给了我们一个shim的配置参数来解决这个问题。
require.config({
baseUrl:"js",
/*paths:{
jquery:"jquery",
test:"test"
}*/
shims:{
"test2":{
deps:["jquery"],
exports:"test2"
}
}
});
deps后面接的是这个文件使用到了哪些依赖的模块,比如这里的jquery。
exports后面是输出名,就是我们使用require依赖的那个名称,也就是js的文件名,test2.js(省去了.js)
使用起来的话也很方便
这样就可以了,直接使用test2.js里面的函数即可。(而且里面的全局变量,也可以使用哦,大家可以在test2.js中定义一个全局变量,然后再main.js中打印一下,发现可以使用) 既然我们自己定义的非模块化文件都能够使用,那么其他的一些非模块化的库也就是同理咯~很强大哈~
/**************main.js**************/
require.config({
baseUrl:"js",
/*paths:{
jquery:"jquery",
test:"test"
}
shims:{
"test2":{
deps:["jquery"],
exports:"test2"
}
}*/
});
require(["test","test2"],function(test,test2){
test.hi();
test2.hi();
});
/*************test.js************/
/************test2.js***********/
define(["test"],function (test) {
return{
name:'test2',
hi:function(){
console.log('hi,'+test.name);
}
}
});
我们会发现test2去调用test的时候会报错,告诉我不存在这个属性。
我们调换test和test2的顺序发现,他们的关系又反过来了,test不能去调用test2的属性和方法了。
解决的办法就是在后者中重新再依赖一次前者。(至于为什么会出现这样的原因,我觉得需要阅读源码才能解决我的疑惑)
define(["test"],function (test) {
return{
name:'test2',
hi:function(){
test=require("test");
console.log('hi,'+test.name);
}
}
});
shim的配置
理论上,require.js加载的模块,必须是按照AMD规范、用define()函数定义的模块。但是实际上,虽然已经有一部分流行的函数库(比如jQuery)符合AMD规范,更多的库并不符合,还有自己定义的一些js文件。那么,require.js是否能够加载非规范的模块,使用期接口呢?用一个例子来说明一下:(还是在上一个例子基础上扩展)
比如我们现在还有一个test2.js文件,这个文件的函数不是用模块化去写的,没有用到define,就是普通的一个js,现在想用到里面的一个接口函数怎么办呢?
/*********test2.js************/
function fun2(){
console.log("test2:"+$().jquery);
}
/*******main.js************/
require.js给了我们一个shim的配置参数来解决这个问题。
require.config({
baseUrl:"js",
/*paths:{
jquery:"jquery",
test:"test"
}*/
shims:{
"test2":{
deps:["jquery"],
exports:"test2"
}
}
});
deps后面接的是这个文件使用到了哪些依赖的模块,比如这里的jquery。
exports后面是输出名,就是我们使用require依赖的那个名称,也就是js的文件名,test2.js(省去了.js)
使用起来的话也很方便
require(["test","test2"],function(test){ fun2(); test.fun(); });
这样就可以了,直接使用test2.js里面的函数即可。(而且里面的全局变量,也可以使用哦,大家可以在test2.js中定义一个全局变量,然后再main.js中打印一下,发现可以使用) 既然我们自己定义的非模块化文件都能够使用,那么其他的一些非模块化的库也就是同理咯~很强大哈~
循环依赖
先来看下面这个实例,看看输出会是什么呢?(test依赖test2,test2又依赖test,然后互相调用彼此方法或者使用彼此的一些属性)/**************main.js**************/
require.config({
baseUrl:"js",
/*paths:{
jquery:"jquery",
test:"test"
}
shims:{
"test2":{
deps:["jquery"],
exports:"test2"
}
}*/
});
require(["test","test2"],function(test,test2){
test.hi();
test2.hi();
});
/*************test.js************/
define(["test2"],function (test2) { return{ name:'test', hi:function(){ console.log('hi!'+test2.name); } } });
/************test2.js***********/
define(["test"],function (test) {
return{
name:'test2',
hi:function(){
console.log('hi,'+test.name);
}
}
});
我们会发现test2去调用test的时候会报错,告诉我不存在这个属性。
我们调换test和test2的顺序发现,他们的关系又反过来了,test不能去调用test2的属性和方法了。
解决的办法就是在后者中重新再依赖一次前者。(至于为什么会出现这样的原因,我觉得需要阅读源码才能解决我的疑惑)
define(["test"],function (test) {
return{
name:'test2',
hi:function(){
test=require("test");
console.log('hi,'+test.name);
}
}
});
相关文章推荐
- 第一次使用require.js(3)
- 第一次使用require.js
- require.js的使用
- crypto-js,require,nodejs,加密使用手册
- node.js使用require()函数加载模块
- require.js 的使用
- javascript代码模块化Demo(使用Require.js)
- Node.js export default 使用require引入报错:SyntaxError: Unexpected token export
- jschart 第一次使用手记
- require.js的使用
- require.js的基本概念及使用流程(1)
- require.js及模板引擎的使用实例
- IDEA 编译 JS 无法使用require 下面有波浪线
- 第一次在html中使用js
- Javascript : require.js 的使用(例子)
- 对require.js 的使用进行总结
- require.js使用步骤
- 使用require.js编写模块化JS
- 使用require.js
- 使用require加载非AMD规范的js文件,并在模块中使用。