seajs入门实例

在2014年初，接触过seajs，用来做过项目，当时配合jquery,mustache等做页面，上手之后，因为格式相对简单，写法也比较固定，开发中基本就是在调试用它写出来的组件或者工具方法，很少会去关注seajs本身的api，这就是和其他框架不同的地方。
  seajs是玉伯出品，是模块化编程思想的完美体现，本身遵循cmd规范，但是可以像node一样去编码。
  seajs经常配合jquery和其他模板框架一起使用，它本身并不是一个复杂的三方框架，没有很多丰富的api以及丰富的组件，如果和jquery一起使用，需要做如下配置，这里的配置，是代码层面的配置：

1 seajs.config({
2 base:'./sea-modules/',
3 alias:{
4 "jquery":"jquery/jquery-1.12.4.min.js"
5 }
6 });

 

这配置，很容易理解：base指定公共库文件根路径,alias指定三方库别名，当我们使用三方库时，可以直接引用别名，无需通过相对路径或者绝对路径。如下所示：

1 var $ = require("jquery");
2 $("#container").html("hello,seajs");

 

需要运行我们自定义的方法或者组件，我们可以通过如下方法：

1 seajs.use("./static/hello/web.js")

或者

1 seajs.use("./static/hello/service.js",function(service){
2 service.hello();
3 });

我们来看看让seajs能够调用的模块或者组件的写法：

 1 define(function(require,exports,module){
 2 
 3 function Service(){
 4 console.log("this is service module");
 5 }
 6 
 7 Service.prototype.hello = function(){
 8 console.log("this is hello service");
 9 return this;
10 }
11 module.exports = Service;
12 });

 

  写法和nodejs几乎一模一样，通过define关键字定义一个模块。然后在模块体内通过module.exports向外暴露整个模块，或者通过exports.xxx向外暴露一个方法。
  seajs.config,seajs.use,define,exports,require,module这些关键字就构成了seajs的主要语法和api，相对angularjs,vue,react等，简单太多了。
  如果你指望seajs能替代vue，或者jquery，那么你就错了。seajs提供了模块化编程思想，seajs不是一个大而全的前端框架。

完整的seajs入门实例：
seajs.html

 1 
 2 
 3 
 4 
 5  
 6 
 7 
 8 

 9 
10 
11 
20 

 

web.js

1 define(function(require){
2 var $ = require("jquery");
3 $("#container").html("hello,seajs");
4 var service = require("./service")
5 var s = new service();
6 s.hello();
7 });

 

service.js

 1 define(function(require,exports,module){
 2 
 3 function Service(){
 4 console.log("this is service module");
 5 }
 6 
 7 Service.prototype.hello = function(){
 8 console.log("this is hello service");
 9 return this;
10 }
11 module.exports = Service;
12 });

 

最终运行效果：

补充说明
这里需要说明一点，如果引用jquery报错$ is not a function，那么需要修改一个地方，jquery也支持模块化编程，但是它默认只支持amd规范，所以需要将jquery源码改变一下，或者直接使用seajs提供的jquery版本。

1 if (typeof define === "function" && (define.amd)) {
2 define( "jquery", [], function() {
3 return jQuery;
4 });
5 }

 

改为如下即可：

1 if (typeof define === "function" && (define.amd || define.cmd)) {
2 define( "jquery", [], function() {
3 return jQuery;
4 });
5 }

 

压缩版本的jquery.min.js也是可以改的，如下所示：

 

 

至此，seajs入门实例就介绍完了，是不是很简单。seajs是一个很好的框架，体现了很多优秀的思想，比如异步加载机制，模块化编程思想。