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





梦龙小站










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

seaJs学习笔记之怎么调用模块_第1张图片


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


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





梦龙小站










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

seaJs学习笔记之怎么调用模块_第2张图片


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


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





梦龙小站










  预览效果

seaJs学习笔记之怎么调用模块_第3张图片


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


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





梦龙小站










  预览效果

seaJs学习笔记之怎么调用模块_第4张图片


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


  用use调用tab函数HTML代码





梦龙小站










  预览效果

seaJs学习笔记之怎么调用模块_第5张图片


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


  模块化解决冲突的HTML代码





梦龙小站










  预览效果

seaJs学习笔记之怎么调用模块_第6张图片


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

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




你可能感兴趣的:(seaJs学习笔记,seaJs学习笔记)