初识Sea.js

作者：TG 日期： 2016-07-08 字数： 4158 阅读： 3754

Seajs是一个遵循CMD规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。

官网：http://seajs.org

核心特性：

无论是中小型站点，还是大型复杂应用，使用 SeaJS，都可以让我们的工作变得更轻松愉悦。SeaJS 具有以下核心特性：

简单一致的模块格式。

依赖的自动管理。

脚本的异步并行加载。

丰富的插件。

友好的调试。

SeaJS 带来的最大好处是：提升代码的可维护性。上面的每一项特性，在使用文档中都会有详细阐述。如果一个网站的 JS 文件超过 3 个，就适合用 SeaJS 来组织和维护代码。涉及的 JS 文件越多，SeaJS 就越适合。

SeaJS 追求的是更简单、自然的代码书写和组织方式。

兼容性：

Sea.js兼容所有主流的浏览器：

Chrome 3+         ✔  
Firefox 2+        ✔  
Safari 3.2+       ✔  
Opera 10+         ✔  
IE 5.5+           ✔

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

sea.js的基本配置

在页面中使用seaJS和使用jQuery一样，需要引入，sea.js需要配置可选的两个参数：config（配置文件）、main（入口文件）。如下代码所示：

/*引入sea.js文件*/
<script src="seajs/sea.js" id="seajs"></script>   
/*引入配置文件，可选*/
<script src="seajs/js/config.js"></script>
<script> 
 // 加载入口模块
seajs.use("../seajs/js/main")   
</script>

使用js文件夹下面的play.js启动项，启动完毕执行该模块下的play方法。这里的目录必须是相对运行文件为准的路径。

config配置

seajs.config({   
  paths:{   
    'js':"../js/"   //这个路径是以sea.js文件为基础的
  },   
  alias:{   
    'jquery':  'js/jquery'   // jquery.js
    'play':'js/play'  //play.js
  },   
  debug:true  
});

入口模块

define(function(require){  
  // 通过 require 引入依赖play
  var play=require("play");  
  //调用play的play方法 
  play.play();  
});

sea.js 在下载完成后，会自动加载入口模块

play模块

define(function(require,exports,module){ 
  // 通过 require 引入依赖jquery
  var $=require('jquery');
   // 通过 exports 对外提供接口
  exports.play=function(){   
    $(document.body).append('<div>seaJS的play模块被正常加载。</div>');   
  }  
})

最后输出：

seaJS的play模块被正常加载。

Sea.js常用API参考

著作权归博主所有。转载请联系博主获得授权，并标注“博主名称”。

初识Sea.js

关注”全栈技术杂货铺“

目录