seajs开发教程及注意事项

最新推荐文章于 2020-10-23 16:38:31 发布

糖薪砖

最新推荐文章于 2020-10-23 16:38:31 发布

阅读量593

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/tangxinzhuan/article/details/53577541

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

Seajs是一种解决多人协作中JavaScript变量和函数命名冲突，以及管理JS依赖问题的工具。通过使用seajs，可以更好地组织和管理项目中的模块，确保代码的可维护性和可扩展性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

seajs可以解决多人协作开发时JS变量函数命名冲突，以及JS依赖难管理问题。

目录结构：

index.html 页面文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个sea模块应用</title>
</head>
<body>
<h1>我的第一个sea模块应用！</h1>

<!-- 官方建议加上id="seajsnode"，用于seajs快速找到sea.js，提高性能 -->
<script src="/static/js/sea-modules/seajs/sea.js" id="seajsnode"></script>
<script>
seajs.config({
	
	// 基础路径
	base: '/static/js/sea-modules/',
	
	// 当模块标识很长时，可以使用 alias 来简化书写，方便调用
	alias: {
	  'jquery': 'jquery/jquery-1.11.1.min',  // base基础路径下的模块标识
	  'boot': '//cdn.bootcss.com/bootstrap/3.3.7/js//bootstrap.min' // 绝对路径
	},
	
	// 当目录比较深，可以使用 paths来简化书写，方便调用，但是使用的时候一定要加是斜杠和要引入的文件名。
	paths: {
		'utilpath': 'aaa/bbb/ccc/utils'  // base基础路径下的路径
	}
	
});

// 加载前置模块jquery等文件  和 入口模块main文件
seajs.use(['jquery', 'boot', 'main'], function($, boot, app) {
	
	// 使用函数内部作用域的$
	$(document).ready(function() {
		app.init();
	});
	
});
</script>
</body>
</html>

/**
 * admin.js 模拟用户模块
 */
define( {"name": "tangxinzhuan", "create_time": "2016-12-12"} );

/**
 * mymath.js  模拟数学计算工具模块
 */
define(function(require, exports, module){
	// 模块代码
	
	/**
	 * 计算两个数的和。
	 */
	exports.add = function($num1, $num2) {
		return $num1 + $num2;
	};
	
});

/**
 * 程序入口模块
 */
define(function(require, exports, module){
	// 模块代码
	
	var $ = require('jquery');			alert('按顶级标识查找 '+require.resolve('jquery'));
	var admin = require('./admin');		alert('按相对标识查找 '+require.resolve('./admin'));
	
	var mymath = require('utilpath/mymath');	alert('按跨目录查找 '+require.resolve('utilpath/mymath'));
	
	// 自定义的函数
	exports.init = function() {
		
		alert('程序执行初始化');
		
		alert($('body').html());
		
		alert(admin.create_time +' '+ admin.name);
		
		alert('1 + 2 = '+ mymath.add(1,2));
	};
	
});

常见问题：

点我去看常见问题