为什么使用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. //定义名为Start的构造函数对象
  5. function Start(container){
  6. this.container=$(container);
  7. }
  8. //对外提供接口
  9. module.exports=Start;
  10. //定义Start对象的原型方法
  11. Start.prototype.render=function(){
  12. this._init();
  13. this.container.css('border','5px solid #f00');
  14. };
  15. Start.prototype._init=function(){
  16. this.container.addClass('init');
  17. return this;
  18. }
  19. });

示例效果如下：

sea.js的模块化开发的更多相关文章

  1. 模块化开发（三）---通过node.js学习模块化开发

    由于改文章有点大,部分代码格式有点问题,编辑之后博客园莫名其妙推出,有问题可以留言沟通.   什么是Node? 它是一个在浏览器之外可以解析和执行javascript代码的运行环 境,或者说是一个运行 ...

  2. JS利用 Sea.js 实现模块化：拖拽、缩放及范围限制

    知识点总结: Sea.js的使用:define.export.seajs.use.require等方法:   参考:http://seajs.org/docs/ Sea.js与require.js的区 ...

  3. 关于require.js的模块化开发

      先是自己打了一些demo,然后回过头来看阮大神的博客,感觉很多莫名其妙的问题,瞬间解决了:很舒服,放上链接,希望对其他人也有帮助:     先是在html的末尾引入了require.js . da ...

  4. 【require.js】模块化开发

    一.Require.js及AMD Require.js:是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一. AMD(Asynchronous Module Definit ...

  5. Sea.js学习1——初识Sea.js

    Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单.极致的模块化开发体验. 使用 Sea.js,在书写文件时,需要遵守 CMD (Common Module Definition)模块定 ...

  6. 前端模块化开发的价值(seaJs)

    随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做 ...

  7. 模块化开发--sea.js

    当你的网站开发越来越复杂的时候,会经常遇到一下问题吗?1.冲突2.性能3.依赖如果在多人开发或者是复杂的开发过程中会经常遇到这些问 题,就可以用模块化开发来解决.以上问题是如何产生的?1.冲突:如果你 ...

  8. Sea.js提供简单、极致的模块化开发体验

    为什么使用 Sea.js ? Sea.js 追求简单.自然的代码书写和组织方式,具有以下核心特性: 简单友好的模块定义规范:Sea.js 遵循 CMD 规范,可以像 Node.js 一般书写模块代码. ...

  9. JS模块化开发：使用SeaJs高效构建页面

    一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...

随机推荐

  1. Xcode rename failed(修改类名失败)的解决办法

    1.前往文件夹~/Library/Developer/Xcode 2.删除Xcode文件夹下的DerivedData 3.等项目加载完成之后,即可rename

  2. Https---SSL协议

    ssl协议的起源和历史我就不再多说了,就是那个Netscape 网景公司开发的,它的作用主要是提供了一种安全传输方式,我们知道网上有很多的时候需要我们去输入用户名和密码,那么假设我们自己的电脑防病毒还 ...

  3. Intellij IDEA导入Github中的MAVEN多模块项目【保持项目样式】

    刚上手用IntelliJ IDEA导入github项目,我尝试了多种导入方式.因为我的有父子模块,导入后整个项目的格式就变了. 然后我多次尝试,找到了一个更好的导入方式,可以保持MAVEN项目的格式. ...

  4. mysql 完整约束

    一 介绍 约束条件与数据类型的宽度一样,都是可选参数 作用:用于保证数据的完整性和一致性主要分为: PRIMARY KEY (PK) 标识该字段为该表的主键,可以唯一的标识记录 FOREIGN KEY ...

  5. tableau学习笔记—1

    第一部分 第一章 数据可视化 1.1 用数据讲故事 1.2 数据不只是数字 1.3 在数据中寻找什么(关系.模式.异常) 第二章 Tableau概述 2.1 Tableau概述 2.2 产品简介 第三 ...

  6. bzoj 1607 [Usaco2008 Dec]Patting Heads 轻拍牛头——枚举倍数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1607 #include<iostream> #include<cstdio ...

  7. bzoj 3907 网格 bzoj2822 [AHOI2012]树屋阶梯——卡特兰数（阶乘高精度模板）

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3907 https://www.lydsy.com/JudgeOnline/problem.p ...

  8. GWT更改元素样式属性

    GWT有时候不像普通网页那样可以自由的添加CSS改变样式,所幸gwt提供了一些底层的方法,通过这些方法来实现DOM操作等.通过gwt部件的getElement()可以取得dom上的元素,这时就能对该元 ...

  9. HUD2102(基础bfs)

    A计划 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  10. ThreadPoolTaskExecutor的配置解释

    ThreadPoolTaskExecutor的配置在网上找了很多解释没找到,看了下ThreadPoolExecutor的配置,名字差不多,应该含义也差不多.只不过ThreadPoolTaskExecu ...