seaJs学习笔记之怎么调用模块

　　之前我们已经了解了怎么用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

<script type="text/javascript" src="sea.js">《script》
<script type="text/javascript">/*	这个方法有两个参数：第一个参数是模块的地址；第二个参数是地址加载成功后的回调函数。*/seajs.use("a.js")《script》

　　通过服务器运行一下。用火狐firebug的网络查看，状态发现都是304错误。如下图

　　于是我分别把sea.js放到了sea文件夹中，把a.js放到了js文件夹中,就能看到真实的效果了。

　　通过seaJs中的use方法进行调用的HTML代码2

<script type="text/javascript" src="sea/sea.js">《script》
<script type="text/javascript">/*	这个方法有两个参数：第一个参数是模块的地址；第二个参数是地址加载成功后的回调函数。*/seajs.use("js/a.js")《script》

　　我们在网络中继续属性，可以发现现在a.js的状态是没有找到(404)。如下图

　　仔细看上面请求a.js的地址不难发现请求的是在sea文件夹下的js文件中的a.js。那这样的请求是找不到a.js的。现在sea和js文件夹是同级关系，并不是包含关系，所以是找不到的。通过地址我们可以发现一个问题，就是use方法中的地址不是相对于当前页面的地址，而是相对于sea.js的地址。所以seaJs的默认根目录是sea.js。那么我们怎么样以页面为根目录呢?用相对地址就可以了。

　　通过seaJs中的use方法相对地址的HTML代码

<script type="text/javascript" src="sea/sea.js">《script》
<script type="text/javascript">/*	这个方法有两个参数：第一个参数是模块的地址；第二个参数是地址加载成功后的回调函数。*/seajs.use("./js/a.js")《script》

　　预览效果

　　地址确认没问题，能够引到a.js 了之后，我们在写回调函数，看看加载好之后能不能走回调函数。

　　通过seaJs中的use方法回调函数测试的HTML代码

<script type="text/javascript" src="sea/sea.js">《script》
<script type="text/javascript">/*	这个方法有两个参数：第一个参数是模块的地址；第二个参数是地址加载成功后的回调函数。*/seajs.use("./js/a.js",function  () {	alert(1)})《script》

　　预览效果

　　没有问题，回调之后已经弹出“1”。当模块加载好之后，怎么样调用模块化的tab方法呢?因为对外的接口已经写好了。在回调函数中会接收1个参数，这个 参数可以随便起名字。回调的参数就是模块中的“exports”。

　　用use调用tab函数HTML代码

<script type="text/javascript" src="sea/sea.js">《script》
<script type="text/javascript">/*	这个方法有两个参数：第一个参数是模块的地址；第二个参数是地址加载成功后的回调函数。*/seajs.use("./js/a.js",function  (meng) {	meng.tab();})《script》

　　预览效果

　　这就是一个模块的调用形式。通过这样的调用形式就能避免命名冲突这个问题。比如a.js是由A小伙伴儿开发的。调用页面呢是由B小伙伴儿开发的。如果A小伙伴儿写了个tab函数。B小伙伴儿同样写了个tab。这时候他们会互相影响吗?这时候就不会影响了。因为a.js中的tab函数若想被调用就必须写成“meng.tab();”，而B小伙伴儿写的tab调用得写成“tab();”。可以发现，同样是tab函数，但是调用方式不一样，导致了尽管名字相同，但是也不会互相冲突。

　　模块化解决冲突的HTML代码

<script type="text/javascript" src="sea/sea.js">《script》
<script type="text/javascript">/*    引用A小伙伴儿写的a.js*/seajs.use("./js/a.js",function  (meng) {    //调用A小伙伴儿的tab    meng.tab();    })//B小伙伴儿写的tabfunction tab () {    alert("B小伙伴儿写的tab")}//调用B小伙伴儿的tabtab();《script》

　　预览效果

　　通过上面的预览效果，不难发现，很好的避免了命名冲突。

　　seaJs可以帮大家有效的避免javascript中的命名冲突问题，那么seaJs可以不可以帮大家避免javascript中的依赖问题呢?请关注梦龙小站有关seaJs笔记的相关更新。seaJs学习笔记之如何调用模块就为大家介绍到这里，感谢大家支持。