seaJs的简单应用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了seaJs的简单应用相关的知识,希望对你有一定的参考价值。

sea.js的应用
模块化:
将Js代码按模块化分开,提高了代码的重用性;
seaJs的好处:
解决了文件的依赖
解决了变量名的冲突
seaJs的使用
1、定义模块
define(function(require,exports,module)){
require:引入一个模块
如:var _msg = require("msg");

exports:输出一个模块
如:exports.msg = function(){
alert("ok");
}

module:批量输出模块(很少用)
}
2、使用一个模块
seajs.use("模块名",function(mod){
//code
})
使用多个模块
seajs.use(["a","b",···],function(mod1,mod2···){})

效果:添加一个人的姓名,年龄和通讯方式
  框架:

技术分享

html代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>SeaJs Test</title>
 6     <script src="../js/sea.js"></script>
 7     <script>
 8         seajs.use("init",function(init){
 9             init.init();
10         })
11     </script>
12 </head>
13 <body>
14     <div class="main">
15         <h1>信息</h1>
16         <ul>
17             <li id="s1"></li>
18             <li id="s2"></li>
19             <li id="s3"></li>
20         </ul>
21     </div>
22 </body>
23 </html>
init.js代码:
 1 define(function(require,exports,module){
 2     var man = require("man");
 3     var css = require("../css/main.css");
 4 
 5     var $ = function(id){
 6         return document.getElementById(id);
 7     };
 8 
 9     exports.init = function(){
10         var s1 = $("s1");
11         var s2 = $("s2");
12         var s3 = $("s3");
13 
14         var name = man.getName();
15         var age = man.getAge();
16         var msg = man.say();
17 
18         s1.innerHTML = name;
19         s2.innerHTML = age;
20         s3.innerHTML = msg;
21 
22     }
23 })

 

man.js代码:
 1 define(function(require,exports,module){
 2     var msg = require("msg");
 3 
 4     var _name = "tom";
 5     var _age = "20";
 6 
 7     exports.myName = _name;
 8 
 9     exports.say = function(){
10         return msg.getMsg();
11     };
12 
13     exports.getName = function(){
14         return _name;
15     };
16 
17     exports.getAge = function(){
18         return _age;
19     }
20 })
msg.js代码:
 1 define(function(require,exports,module){
 2     var _msg = "not set msg!";
 3 
 4     exports.setMsg = function(msg){
 5         _msg = msg;
 6     }
 7     exports.getMsg = function(){
 8         return _msg;
 9     }
10 });

 
































以上是关于seaJs的简单应用的主要内容,如果未能解决你的问题,请参考以下文章

快速上手seajs——简单易用Seajs

seajs模块路径解析 简单总结

使用模块化管理工具seajs实现简单动画效果

seaJs模块化开发简单入门

eaJS 简单例子,理解seaJS

grunt与seajs结合应用