sea.js的模块化开发起步
2016-04-28 14:28
621 查看
为什么使用sea.js?
Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:
简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。
自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。
Sea.js 具备完善的测试用例,兼容所有主流浏览器:
Sea.js 可运行在 Mobile 端,包括 Hybrid 模式的 App 上。理论上,Sea.js 可以运行在任何浏览器引擎上。
参考文档:http://seajs.org/docs/
下面我用一个简单示例来开启sea.js的模块化开发之旅:
目录结构:
hello.html文档代码:
Sea.js 追求简单、自然的代码书写和组织方式,具有以下核心特性:
简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码。
自然直观的代码组织方式:依赖的自动加载、配置的简洁清晰,可以让我们更多地享受编码的乐趣。
Sea.js 还提供常用插件,非常有助于开发调试和性能优化,并具有丰富的可扩展接口。
兼容性
Sea.js 具备完善的测试用例,兼容所有主流浏览器:Chrome 3+ ✔ Firefox 2+ ✔ Safari 3.2+ ✔ Opera 10+ ✔ IE 5.5+ ✔
Sea.js 可运行在 Mobile 端,包括 Hybrid 模式的 App 上。理论上,Sea.js 可以运行在任何浏览器引擎上。
参考文档:http://seajs.org/docs/
下面我用一个简单示例来开启sea.js的模块化开发之旅:
目录结构:
hello.html文档代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试sea.js的API</title> <style> #container{ width:200px; height: 200px; margin: 0 auto; border: 1px solid #669991; } .init{ background-color: #ff6600; } </style> </head> <body> <div id="container"></div> <script src="../sea-modules/seajs/2.2.0/sea.js"></script> <script> // seajs 的简单配置 seajs.config({ // Sea.js 的基础路径 base:"../sea-modules/", // 设置别名,方便调用 alias:{ "jquery":"jquery/jquery/1.10.1/jquery.js" } }); //for 开发阶段 if(location.href.indexOf("?dev")>0){ //加载一个main.js模块 seajs.use("../static/hello/src/main"); } //for上线阶段 else{ //加载一个main.js模块 seajs.use("examples/hello/1.0.0/main"); } </script> </body> </html>main.js的代码:
//定义一个模块 define(function(require){ //获取start.js的接口 var Start=require('./start'); //生成Start的实例 var s=new Start('#container'); //调用Start的方法 s.render(); });start.js的代码:
define(function(require,exports,module){ //获取jQuery的接口 var $=require('jquery'); //定义名为Start的构造函数对象 function Start(container){ this.container=$(container); } //对外提供接口 module.exports=Start; //定义Start对象的原型方法 Start.prototype.render=function(){ this._init(); this.container.css('border','5px solid #f00'); }; Start.prototype._init=function(){ this.container.addClass('init'); return this; } });示例效果如下:
相关文章推荐
- 最最最重要重要的一件事:在JS中
- 用JS监听事件(函数封装)修改页面属性
- 关闭IE浏览器窗口时触发的动作js
- js实现图片向上播放(轮番滚动)
- JSON的故事
- javascript设计模式 门面模式
- 基于JavaScript 声明全局变量的三种方式详解
- 《高性能javascript》 领悟随笔之-------DOM编程篇
- JS运算符优先级规则
- js返回上一页并刷新的多种实现方法
- chome 调试 js禁用缓存
- javascript运行机制之执行顺序详解(修正原作者一处错误)
- js解析websocket二进制数据包
- js读取本地图片进行预览,上传服务器
- js定时器与事件函数处理机制
- 手动实现JavaScript中的bind函数
- 对特殊字符编码js与c#中的处理方法
- 从零开始学习ExtJs6系列教程三【登录Demo:Login】
- javascript&html5
- Extjs5 使用Charts