seajs入门实例

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

seajs.config({
	base:'./sea-modules/',
	alias:{
	   "jquery":"jquery/jquery-1.12.4.min.js"
	}
});

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

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

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

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

或者

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

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

define(function(require,exports,module){
	
	function Service(){
		console.log("this is service module");
	}
	
	Service.prototype.hello = function(){
		console.log("this is hello service");
		return this;
	}
	module.exports = Service;
});

写法和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

<!doctype html>
<html lang="en">
   <head>
       <meta charset="UTF-8"/>
	   <title>seajs入门实例</title>   
   </head>
   <body>
       <div id="container"></div>
   </body>
   <script src="sea-modules/seajs/sea.js"></script>
   <script>
      seajs.config({
	    base:'./sea-modules/',
		alias:{
		   "jquery":"jquery/jquery-1.12.4.min.js"
		}
	  });
	  seajs.use("./static/hello/web.js")
   </script>
</html>

web.js

define(function(require){
	var $ = require("jquery");
	$("#container").html("hello,seajs");
	var service = require("./service")
	var s = new service();
	s.hello();
});

service.js

define(function(require,exports,module){
	
	function Service(){
		console.log("this is service module");
	}
	
	Service.prototype.hello = function(){
		console.log("this is hello service");
		return this;
	}
	module.exports = Service;
});

最终运行效果：

在这里插入图片描述

补充说明

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

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

改为如下即可：

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

压缩版本的jquery.min.js也是可以改的，如下所示：
在这里插入图片描述
至此，seajs入门实例就介绍完了，是不是很简单。seajs是一个很好的框架，体现了很多优秀的思想，比如异步加载机制，模块化编程思想。

完整的seajs入门实例：

最终运行效果：

补充说明

猜你喜欢