代码改变世界

seajs小记

2012-03-26 16:51  飞魚  阅读(1017)  评论(0)  编辑  收藏  举报

写一个小demo加深印象...

运行结果图，

demo总体结构图，

seajs.htm　

<!doctype html>
<html>
<head>
    <title>seajs-demo</title>

    <script src="js/lib/sea.js" data-main="./js/init" type="text/javascript"></script>

</head>
<body>
    <div id="page">
    </div>
</body>
</html>

init.js

seajs.config({
    alias: {//设置别名
        'jquery': 'jquery/1.7.1/jquery'
    },
    preload: ['plugin-text']//提前加载文本插件
});

define(function(require, exports, module) {//模块格式

    var $ = require('jquery'),//引用相关文件
        p = require('./tmpls/page.tpl'),
        d = require('./moduls/modul1');

    /*
     *查看模块表示的路径
     *  如果没有配置base路径，直接写的路径为seajs.js文件所在的目录
     *  ./相对于当前目录
     *  ../相对于上一个目录
     *  /相对于根目录
    */
    console.log(require.resolve('moduls/modul1'));
    console.log(require.resolve('./moduls/modul1'));
    console.log(require.resolve('../moduls/modul1'));
    console.log(require.resolve('/moduls/modul1'));
    
    $(function() {
        //由于没有引用模版插件，简单替换
        var data = d.Run(), html = p.replace('{{name}}', data['name']);

        $("#page").append(html);

    });

});

modul1.js

define(function(require, exports, module) {

    var data = require('./modul2');

    exports.Run = function() {

        return data;
    }
});


modul2.js

define(function(require, exports, module) {
   
    var data = require('./modul3');

    return data;
});

modul3.js

define({ "name": "ygm" });

page.tpl

<div>I am {{name}}.</div>

 

注意：

1引用的常用库，如jquery等，如果想require('jquery')，要改造源码，用define(...)包装起来

2define模块里的require('xxx.js')会在解析时加载，如果要按需加载用require.async(..

 

源码下载

关于更多查看项目地址  https://github.com/seajs/seajs