seajs使用demo

初试seajs,为下次项目的实战做准备:

html:

seajsDemo.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>seajsdemo</title>
		<script src="../js/seajs2.2.0/sea.js"></script>
		<script src="../js/seajs2.2.0/sea-debug.js"></script>
	</head>
	<body>
		<div class="wrap">
			<span>使用seajs加载js</span>
			<div class="content">
				内容
			</div>
		</div>
	</body>
	<script>
		var app = {};
			app.debug = false;
			window.app.controller = "demo1";
			seajs.config({
				base:"../js/seaDemo",
				alias:{
					"jQuery":"jquery.js"
				},
				paths:{
					"jQuery":"jquery.js"
				}
			});
			seajs.use("../js/seaDemo/app.js");
	</script><!--seajs入口-->
</html>

 js:

app.js

/**
*seajs入口
*调用其他程序
*/
define(["jQuery"],function(require,exports,module){
	  //  window.$ = window.jQuery = require("jQuery");
		 
	exports.load = function(name){
	     
		require.async("../seaDemo/"+name+".js",function(controller){
			if(typeof(controller.run) =="function"){
				controller.run(); //运行需要加载的js
			}
		})
	}
	/******/

	window.app.load = exports.load;

	if(window.app.controller){
		exports.load(window.app.controller);
	}
	/***调用加载**/
});

 demo1.js

define(function(require,exports,module){
	exports.run = function(){
		alert("已调用demo1.js");
		 $(".content").text("hello seajs");
	}
});

 目录结构:

html位置:demo/html/seajsDemo.html

技术分享

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。