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

时间 2019-11-11

标签 sea.js sea 最佳实践基础框架搭建栏目 JavaScript 繁體版

原文原文链接

我是个比较懒的人，基本不怎么写东西，表达也不是很好。最近辞职在家，闲得有点慌，以为仍是写点东西比较好。以前工做中用到了一个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>javascript

</html>

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

<!-- 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是配置别名，方便加载的。同时它还有不少功能，好比加载依赖包等，这个后面会提到。html

再看下app.jsjava

<!-- 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页面加入以下代码：jquery

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

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

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

当咱们点击页面上的绿色区域，能弹出框了。之后咱们在如今的基础上再作一些复杂点的东西。 ps: 编辑器真心很差用。HTML代码始终有问题。代码放在了这里https://github.com/lvshuang/seajs_examplegithub

代码会时不时的更新下，跟多的例子你们参看代码。app