前几天我们已经为大家介绍了seaJs解决冲突问题的方法了。那么seaJs可以不可以帮大家避免javascript中的依赖问题呢?可以的,下面我们将为大家为大家seaJs解决依赖的方法。
如果页面当中有很多个js文件,他们之间要依赖。比如c.js依赖b.js。
依赖页面的HTML代码如下
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <Meta charset="utf-8"> <title>梦龙小站</title> <script type="text/javascript" src="js/a.js"></script> <!-- b.js依赖a.js --> <script type="text/javascript" src="js/b.js"></script> </head> <body> </body> </html>
那么用seaJs怎么实现依赖关系呢?我们可以直接把a.js写到b.js文件当中进行依赖。这样我们只需要再页面中引入一个b.js就可以了,依赖a.js在b.js中已经完成。
我们具体来看一个小例子,让大家更加明白seaJs的依赖使用。下面有个js文件叫“m.js”。在m.js中只写一个变量“m=20;”,不是一个模块,但只有一个变量。现在现在“k.js”中弹出变量m,就要依赖m.js。
m.js的javascript代码
var m = 20;
用seaJs依赖m.js 的k.js的javascript代码
/* 用seaJs依赖m.js 的k.js的javascript代码 */ define(function(require,exports,module) { //exports是对外的接口 //require是依赖的接口 require("./m.js"); //m.js加载好了,相当于在页面中写入了m=20; function tab () { alert(m) } exports.tab = tab; });
用seaJs依赖的HTML代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <Meta charset="utf-8"> <title>梦龙小站</title> <!-- 引入seaJs --> <script type="text/javascript" src="sea/sea.js"></script> <!-- 用seaJs引入k.js --> <script type="text/javascript"> seajs.use("./js/k.js",function (ex) { ex.tab(); }) </script> </head> <body> </body> </html>
预览效果
我们刷新一下,结果还是能找到变量m的值的。也可以看下下面js加载情况,也是ok的。现在我们写的并不是一个模块。那么如果要是依赖一个模块应该怎么办呢?比如p.js依赖q.js中的模块。
p.js(依赖q模块)中的javascript代码
/* 用seaJs依赖q.js 的p.js的javascript代码 */ define(function(require,module) { //exports是对外的接口 //require是依赖的接口 //如果地址是一个模块的话 //那么require函数的返回值 //就是 这个模块中的对外的接口(exports) //require("./q.js"); function tab () { alert( require("./q.js").q ) } exports.tab = tab; });
q.js(被p依赖的模块)中的javascript代码
/* 被p.js依赖的模块 */ define(function(require,module) { var q = 10; exports.q = q; });
用seaJs依赖模块的HTML代码
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <Meta charset="utf-8"> <title>梦龙小站</title> <!-- 引入seaJs --> <script type="text/javascript" src="sea/sea.js"></script> <!-- 用seaJs引入p.js --> <script type="text/javascript"> seajs.use("./js/p.js",function (ex) { ex.tab(); }) </script> </head> <body> </body> </html>
预览效果
写好之后,刷新即可看到预览效果。模块中的10同样是可以找到的。
seaJs也可以帮大家有效的避免javascript中的依赖问题。更多有关seaJs的内容,请关注梦龙小站有关seaJs笔记的相关更新。seaJs学习笔记之如何依赖模块就为大家介绍到这里,感谢大家支持。