码迷,mamicode.com
首页 > Web开发 > 详细

seajs入门使用

时间:2014-07-02 16:57:34      阅读:471      评论:0      收藏:0      [点我收藏+]

标签:seajs

使用 Sea.js 进行模块化开发还可以带来很多好处:

  1. 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。

  2. 提高可维护性。模块化可以让每个文件的职责单一,非常有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能,能比较明显地提升效率。

  3. 前端性能优化。Sea.js 通过异步加载模块,这对页面性能非常有益。Sea.js 还提供了 combo、flush 等插件,配合服务端,可以很好地对页面性能进行调优。

  4. 跨环境共享模块。CMD 模块定义规范与 Node.js 的模块规范非常相近。通过 Sea.js 的 Node.js 版本,可以很方便实现模块的跨服务器和浏览器共享。



seajs的文件结构 :
bubuko.com,布布扣

以上步骤完成,接下来演示一个如何简单的使用seajs

第一步:
   

define

   用来定义模块。Sea.js 推崇一个模块一个文件,遵循统一的写法:
define(function(require,exports,module){
    
	  var _msg = 'not set msg!';
	  exports.setMsg = function(msg){
		  _msg = msg;
	  };
	  
	  exports.getMsg = function(){
		  return _msg;  
	  };
});

第一个参数:require用来获取指定的接口,注意require只接受字符串直接是量作为参数
第二个参数:exports用来在模块内部对外部提供接口
第三个参数:module与exports类似,用来在模块内部对外提供接口

第二步:
   当模块定义好了,那么就把刚才配置好的模块配置入seajs。

seajs.config

seajs.config({
    alias:{
         'init':"modul/init.js"
        }
});

init表示模块的id是自定义的,“modul/init.js”是模块的相对路径可以省略js,注意:模块的绝对路径是seajs-2.3.0/dist/modul/init.js

seajs.use

用来在页面中加载一个或多个模块。

seajs.use("init", function(init){
	 //设置值
	 init.setMsg('Hello World');
     alert(init.getMsg());
});

效果:

bubuko.com,布布扣

  
HTML页面的代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入seajs-2.3.0这个文件 -->
<script type="text/javascript" src="seajs-2.3.0/dist/sea.js"></script>
   
<script type="text/javascript">
//配置seajs
seajs.config({
    alias:{
         'init':"modul/init.js"
        }
});

//使用seajs
seajs.use("init", function(init){
	 //设置值
	 init.setMsg('Hello World');
     alert(init.getMsg());
});
</script>
</head>
<body>
     <h1>Test seajs</h1>
     
</body>
</html>


seajs入门使用,布布扣,bubuko.com

seajs入门使用

标签:seajs

原文地址:http://blog.csdn.net/fense_520/article/details/36382645

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!