您的位置：首页 > Web前端 > JavaScript

seaJs学习笔记之如何变成模块

2013-12-20 09:03 686 查看

　　之前已经为大家介绍了一些有关javascript模块化的相关知识，相信大家也对javascript模块化有了一定的了解。接下来我们就要正式开始介绍seaJs的使用方法了。

　　首先使用seaJs这个库，就要先引入这个库。在本地下载好最新的seaJs库，并引入到页面中。

　　引入seaJs的HTML代码

<!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>
</head>
<body>
</body>
</html>

　　我们知道了如何引用seaJs，那么就可以继续了解seaJs中的小东西了。今天先为大家介绍一下如何用seaJs变成模块。

　　先建一个a.js文件，先来写一下普通写法的javascript

　　普通写法的Javascript代码

/*普通写法*/
function tab () {}

　　这种普通的写法是没有办法通过seaJs来组织，也就存在一些javascript的冲突，性能，依赖等问题。那么如何把一个普通的javascript，变成模块化呢?看看下面的javascript

　　seaJs模块化后的Javascript代码

/*seaJs模块化*/

define(function() {
function tab () {
alert(123)
}
});

　　将普通写法外面包裹define的回调函数中，就把普通的javascript变成了一个模块化的形式。这个回调函数可以接收三个参数，分别是require、exports和module。这三个参数是seaJs中规定好的写法，我们不能随随便便把三个参数的名字改变，比如改成a、b和c，这样是不允许的。那么我们不可以在传参的时候修改，我们在函数中定义一个变量进行修改可不可以呢，这也是不允许的。

　　seaJs模块化带参数的javascript代码

/*普通写法*/
function tab () {}
/*
    带参数的seaJs模块化
    错误写法
*/
define(function(a, b, c) {
    function tab () {
        alert(123)
    }
});

/*
    带参数的seaJs模块化
    错误写法
*/
define(function(require, exports, module) {
    
    var a = require;

    function tab () {
        alert(123)
    }
});

/*
    带参数的seaJs模块化
    正确写法
*/
define(function(require, exports, module) {
    function tab () {
        alert(123)
    }
});

　　这时候如果我在外面再写一个tab函数的话，这时候这两个tab函数是否会起冲突了呢?其实现在就不会起冲突了。放到一个函数中的函数是局部的，形成了一个闭包，在外面再写一个tab函数是不影响define中的tab的

　　seaJs模块化解决冲突的javascript代码

/*
seaJs模块化解决冲突
*/
define(function(require, exports, module) {
function tab () {
alert(123)
}
});

function tab () {
alert(456)
}

　　在外面写函数tab不影响define中的tab了，在外面是否能调到define中的tab呢?这也是调不到的，因为根据作用域的形式，是调不到define中的tab的。

　　seaJs模块化调用局部tab函数的javascript代码

/*
seaJs模块化解决冲突的javascript代码
*/
define(function(require, exports, module) {
function tab () {
alert(123)
}
});

tab();

　　我们既然写了个方法之后，不去用它。现在写好了局部的tab函数之后，我们怎么在外面去调用它呢?敬请大家关注seaJs笔记的相关更新，答案将在之后为大家揭晓。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： seaJs学习笔记如何变成模块 seaJs javascript模块化 javascript

相关文章推荐

新的分享

章节导航