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

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

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

来源：oschina

链接：https://my.oschina.net/u/249230/blog/138251

标签

sea.js

模块开发

模块加载