sea.js最佳实践一基础框架搭建

我是个比较懒的人,基本不怎么写东西,表达也不是很好。最近辞职在家,闲得有点慌,觉得还是写点东西比较好。之前工作中用到了一个js模块加载器,觉得相当不错。今天就写点关于sea.js的东西。oschina里已经有一篇博客介绍他了,这里就不多说了。为什么用sea.js,大家可以参看这里。更多信息可以访问官网。这里之讨论下我们之前项目是怎么用它的,更具体内容大家还是看看文档吧。(一下代码都是基于sea.js vesion 2.0)


index.html
<!-- lang: html -->
<html>
<head>
    <title>sea.js最佳实践</title>
    <style type="text/css">
        #alert {
            padding: 10px 20px;
            background: green;
            float: left;
            color: #fff;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="js/seajs/2.0.0/sea-debug.js?t=123" data-config="sea-js-config.js?t=123"></script>
</head>
<body>
    <div id="alert">点击我</div>
</body>


</html>

上面的data-config是指sea.js的配置文件的路径。还有一个属性是data-main,它项目的起始模块。data-main是可选项,我们这里不使用他。
首先我们来看看sea-js-config.js

<!-- lang: js -->
seajs.config({
  // 配置插件
  plugins: ['shim'],

  // 配置别名
  alias: {
    // 配置 jquery 的 shim 配置,这样我们就可以通过 require('jquery') 来获取 jQuery
    'jquery': {
      src: 'libs/jquery/1.9.1/jquery.js',//注意,这里是从sea.js所在目录的上两节目录开始查找文件
      exports: 'jQuery'
    }
  }
});

plugins选项配置插件,这里使用了shim插件,更多插件可点这里。由于jquery不是一个标准的CMD模块,所以直接加载jquery是错误的。这里使用了shim插件,会自动把jquery转换一成一个标准的CMD模块。不用人工改动jquery原码。alias是配置别名,方便加载的。同时它还有很多功能,比如加载依赖包等,这个后面会提到。

再看下app.js

<!-- lang: js -->
/**
*项目主模块
*/
define(function(require, exports, module) {
//加载jquery, 并把它$设为全局变量
window.$ = window.jQuery = $ = require('jquery');

//定义一个全局的模块加载函数.module为模块名,options为参数
exports.script_load = function(module, options) {
    //使用require.async异步加载模块。模块需要提供一个固定的对外调用接口,这里定义为run。
    require.async('modules/' + module, function(module) {
        if (typeof(module.run) === 'function') {
            module.run(options);
        }
    });
}

window.script_load = exports.script_load
});

上面我们加载了jquery, 定义了一个模块加载函数。现在我们在html页面加入如下代码:

<!-- lang: js -->
<script type="text/javascript">
    seajs.use('modules/app', function(app) {
        app.script_load('index');
    });
</script>

这样就会去加载index模块,并执行index模块里的exports.run方法。
index.js

<!-- lang: js -->
define(function(require, exports, module) {
exports.run = function() {
    $('#alert').click(function() {
        alert('弹出了一个框!');
    });
}
});

当我们点击页面上的绿色区域,能弹出框了。
以后我们在现在的基础上再做一些复杂点的东西。
ps: 编辑器真心不好用。HTML代码始终有问题。代码放在了这里https://github.com/lvshuang/seajs_example

代码会时不时的更新下,跟多的例子大家参看代码。

你可能感兴趣的:(模块加载,sea.js,模块开发)