首页 专题 H5案例 前端导航 UI框架

初识Sea.js

阅读 543 评论 0
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参考


关注”全栈技术杂货铺“

全栈技术杂货铺