之前我们已经了解了怎么用seaJs把javascript函数变成模块化。那么我们仅仅把javascript变成模块化是不够的,我们还需要使用这个模块。那么我们怎么在外面去调用它呢?现在我们就揭晓答案。今天的例子就要在服务器环境下运行了,因为要看js加载情况。
define参数require就是调用模块的接口。通过require,我们才能调到这个模块,调到这个方法。有了require,我们在外面就可以很轻松的调到这个模块化的函数了。那么怎么样给函数tab和require建立起关系呢?在require后面加个“.”,然后等于模块化函数的名字即可。
用require对外提供接口的javascript代码
/*
用require对外提供接口的javascript代码
*/
define(function(require, exports, module) {
function tab () {
alert("这是模块化tab函数")
}
exports.tab = tab;
});
tab();
那么在页面中,想要调用模块化的tab函数,应该怎么调用呢?就是通过seaJs中的use 方法调到模块。这个方法有两个参数:第一个参数是模块的地址;第二个参数是地址加载成功后的回调函数。我们先写一个地址,先看看js能不能加载进来。
通过seaJs中的use方法进行调用的HTML代码1
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入sea.js -->
<script type="text/javascript" src="sea.js"></script>
<!-- 调用模块tab函数 -->
<script type="text/javascript">
/*
这个方法有两个参数:第一个参数是模块的地址;第二个参数是地址加载成功后的回调函数。
*/
seajs.use("a.js")
</script>
</head>
<body>
</body>
</html>
通过服务器运行一下。用火狐firebug的网络查看,状态发现都是304错误。如下图
于是我分别把sea.js放到了sea文件夹中,把a.js放到了js文件夹中,就能看到真实的效果了。
通过seaJs中的use方法进行调用的HTML代码2
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入sea.js -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 调用模块tab函数 -->
<script type="text/javascript">
/*
这个方法有两个参数:第一个参数是模块的地址;第二个参数是地址加载成功后的回调函数。
*/
seajs.use("js/a.js")
</script>
</head>
<body>
</body>
</html>
我们在网络中继续属性,可以发现现在a.js的状态是没有找到(404)。如下图
仔细看上面请求a.js的地址不难发现请求的是在sea文件夹下的js文件中的a.js。那这样的请求是找不到a.js的。现在sea和js文件夹是同级关系,并不是包含关系,所以是找不到的。通过地址我们可以发现一个问题,就是use方法中的地址不是相对于当前页面的地址,而是相对于sea.js的地址。所以seaJs的默认根目录是sea.js。那么我们怎么样以页面为根目录呢?用相对地址就可以了。
通过seaJs中的use方法相对地址的HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入sea.js -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 调用模块tab函数 -->
<script type="text/javascript">
/*
这个方法有两个参数:第一个参数是模块的地址;第二个参数是地址加载成功后的回调函数。
*/
seajs.use("./js/a.js")
</script>
</head>
<body>
</body>
</html>
预览效果
地址确认没问题,能够引到a.js 了之后,我们在写回调函数,看看加载好之后能不能走回调函数。
通过seaJs中的use方法回调函数测试的HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入sea.js -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 调用模块tab函数 -->
<script type="text/javascript">
/*
这个方法有两个参数:第一个参数是模块的地址;第二个参数是地址加载成功后的回调函数。
*/
seajs.use("./js/a.js",function () {
alert(1)
})
</script>
</head>
<body>
</body>
</html>
预览效果
没有问题,回调之后已经弹出“1”。当模块加载好之后,怎么样调用模块化的tab方法呢?因为对外的接口已经写好了。在回调函数中会接收1个参数,这个 参数可以随便起名字。回调的参数就是模块中的“exports”。
用use调用tab函数HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入sea.js -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 调用模块tab函数 -->
<script type="text/javascript">
/*
这个方法有两个参数:第一个参数是模块的地址;第二个参数是地址加载成功后的回调函数。
*/
seajs.use("./js/a.js",function (meng) {
meng.tab();
})
</script>
</head>
<body>
</body>
</html>
预览效果
这就是一个模块的调用形式。通过这样的调用形式就能避免命名冲突这个问题。比如a.js是由A小伙伴儿开发的。调用页面呢是由B小伙伴儿开发的。如果A小伙伴儿写了个tab函数。B小伙伴儿同样写了个tab。这时候他们会互相影响吗?这时候就不会影响了。因为a.js中的tab函数若想被调用就必须写成“meng.tab();”,而B小伙伴儿写的tab调用得写成“tab();”。可以发现,同样是tab函数,但是调用方式不一样,导致了尽管名字相同,但是也不会互相冲突。
模块化解决冲突的HTML代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>梦龙小站</title>
<!-- 引入sea.js -->
<script type="text/javascript" src="sea/sea.js"></script>
<!-- 调用模块tab函数 -->
<script type="text/javascript">
/*
引用A小伙伴儿写的a.js
*/
seajs.use("./js/a.js",function (meng) {
//调用A小伙伴儿的tab
meng.tab();
})
//B小伙伴儿写的tab
function tab () {
alert("B小伙伴儿写的tab")
}
//调用B小伙伴儿的tab
tab();
</script>
</head>
<body>
</body>
</html>
预览效果
通过上面的预览效果,不难发现,很好的避免了命名冲突。
seaJs可以帮大家有效的避免javascript中的命名冲突问题,那么seaJs可以不可以帮大家避免javascript中的依赖问题呢?请关注梦龙小站有关seaJs笔记的相关更新。seaJs学习笔记之如何调用模块就为大家介绍到这里,感谢大家支持。