sea.js的模块化开发

为什么使用sea.js？

Sea.js 追求简单、自然的代码书写和组织方式，具有以下核心特性：

  • 简单友好的模块定义规范：Sea.js 遵循 CMD 规范，可以像Node.js 一般书写模块代码。
  • 自然直观的代码组织方式：依赖的自动加载、配置的简洁清晰，可以让我们更多地享受编码的乐趣。

Sea.js 还提供常用插件，非常有助于开发调试和性能优化，并具有丰富的可扩展接口。

兼容性

Sea.js 具备完善的测试用例，兼容所有主流浏览器：

  1. Chrome 3+         ✔  
  2. Firefox 2+        ✔  
  3. Safari 3.2+       ✔  
  4. Opera 10+         ✔  
  5. IE 5.5+           ✔  

Sea.js 可运行在 Mobile 端，包括 Hybrid 模式的 App 上。理论上，Sea.js 可以运行在任何浏览器引擎上。

 

下面我用一个简单示例来开启sea.js的模块化开发之旅：

目录结构：

hello.html文档代码：

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>测试sea.js的API</title>  
  6.     <style>  
  7.         #container{  
  8.             width:200px;  
  9.             height: 200px;  
  10.             margin: 0 auto;  
  11.             border: 1px solid #669991;  
  12.         }  
  13.         .init{  
  14.             background-color: #ff6600;  
  15.         }  
  16.     </style>  
  17. </head>  
  18. <body>  
  19. <div id="container"></div>  
  20. <script src="../sea-modules/seajs/2.2.0/sea.js"></script>  
  21. <script>  
  22.     // seajs 的简单配置  
  23.     seajs.config({  
  24.         // Sea.js 的基础路径  
  25.         base:"../sea-modules/",  
  26.         // 设置别名，方便调用  
  27.         alias:{  
  28.             "jquery":"jquery/jquery/1.10.1/jquery.js"  
  29.         }  
  30.     });  
  31.     //for 开发阶段  
  32.     if(location.href.indexOf("?dev")>0){  
  33.         //加载一个main.js模块  
  34.         seajs.use("../static/hello/src/main");  
  35.     }  
  36.     //for上线阶段  
  37.     else{  
  38.         //加载一个main.js模块  
  39.         seajs.use("examples/hello/1.0.0/main");  
  40.     }  
  41. </script>  
  42. </body>  
  43. </html>  

main.js的代码：

  1. //定义一个模块  
  2. define(function(require){  
  3.     //获取start.js的接口  
  4.     var Start=require('./start');  
  5.     //生成Start的实例  
  6.     var s=new Start('#container');  
  7.     //调用Start的方法  
  8.     s.render();  
  9. });  

start.js的代码：

  1. define(function(require,exports,module){  
  2.     //获取jQuery的接口  
  3.     var $=require('jquery');  
  4.   
  5.     //定义名为Start的构造函数对象  
  6.     function Start(container){  
  7.         this.container=$(container);  
  8.     }  
  9.     //对外提供接口  
  10.     module.exports=Start;  
  11.     //定义Start对象的原型方法  
  12.     Start.prototype.render=function(){  
  13.         this._init();  
  14.         this.container.css('border','5px solid #f00');  
  15.     };  
  16.     Start.prototype._init=function(){  
  17.         this.container.addClass('init');  
  18.         return this;  
  19.     }  
  20. });  

示例效果如下：

 

posted @ 2017-09-14 10:57  小叮当88  阅读(253)  评论(0)  编辑  收藏  举报