zoukankan      html  css  js  c++  java

  • 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.             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. });  

    示例效果如下：
  • 相关阅读:
    Postman模拟后端服务（mock server）
    Fiddler常用的几个功能
    Postman常用的几个功能
    Postman常用功能详解，常用请求方法
    sql小技巧
    postman接口数据关联
    postman批量发送多个请求
    sql去重查询语句
    pytho接口自动化-session
    charles抓包使用教程
  • 原文地址：https://www.cnblogs.com/dwj88/p/7519552.html
Copyright © 2011-2022 走看看