异步加载之seajs,同样值得拥有

1、 seajs概述:  

 seajs是淘宝前端团队实现的基于commonjs规范的异步加载器,作者就是大名鼎鼎的玉伯。目标也是和requirejs一样,都是为了模块化和异步加载。


2 、 资源

github: https://github.com/seajs/seajs/

doc:  http://seajs.org/docs/#docs

玉伯的github:https://github.com/lifesinger

cmd规范:https://github.com/seajs/seajs/issues/242


3 、例子:

    seajs也是通过define定义模块

define(function(require, exports, module) {
    //code of the module...
});
  • require――模块加载函数,用于记载依赖模块。

  • exports――接口点,将数据或方法定义在其上则将其暴露给外部调用。

  • module――模块的元数据。

  先来一个正宗的module定义,即绑定到exports上:

define(function(require, exports, module) {
    var a = require('a'); //引入a模块
    var b = require('b'); //引入b模块
 
    var data1 = 1; //私有数据
 
    var func1 = function() { //私有方法
        return a.run(data1);
    }
 
    exports.data2 = 2; //公共数据
 
    exports.func2 = function() { //公共方法
        return 'hello';
    }
});

当然,除了正宗的方法,还有不正宗的方法:

define(function(require) {
    var a = require('a'); //引入a模块
    var b = require('b'); //引入b模块
 
    var data1 = 1; //私有数据
 
    var func1 = function() { //私有方法
        return a.run(data1);
    }
 
    return {
        data2: 2,
        func2: function() {
            return 'hello';
        }
    };
});

如果没有依赖,只是返回一个简单的对象,该怎么实现呢,其实很简单,和requirejs的实现一样:

define({
    data: 1,
    func: function() {
        return 'hello';
    }
});

seajs.use:相当于java中的main方法,

//单一模式
seajs.use('./a');
 
//回调模式
seajs.use('./a', function(a) {
  a.run();
});
 
//多模块模式
seajs.use(['./a', './b'], function(a, b) {
  a.run();
  b.run();
});


4 、 完整的例子(类库请自己下载)

  html页面

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SeaJS Demo</title>
</head>
<body>
<div id="content">
    <p class="author"></p>
    <p class="blog"></p>
</div>
 
<script src="./sea.js" data-main="./init"></script>
</body>
</html>

请注意,data-main中应用的js同样不需要加.js扩展名。


init.js 文件定义的内容:

define(function(require, exports, module) {
    var $ = require('./jquery');
    var data = require('./data');
 
    $('.author').html(data.author);
});

data.js文件定义的内容:

define({
    author: 'Hcc0926',
    blog: 'http://hcc0926.blog.51cto.com'
});

运行下代码看下效果。

下篇文章我们总结下amd 和cmd 的区别。

你可能感兴趣的:(cmd,seajs)