首页 > 代码库 > 我的前端之旅--SeaJs基础和spm编译工具运用[图文]
我的前端之旅--SeaJs基础和spm编译工具运用[图文]
1. 概述
本文章来源于本人在项目的实际应用中写下的记录。因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历。为此，我们编写本文档，通过图文并茂的方式来为大家讲解seajs和spm编译环境的搭建和基本使用方法。
2. 认识SEAJS
seajs是一种前端模块化加载框架,与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。
3. 下载Seajs和spm编译环境
1.首先需要本机安装Nodejs，nodejs也是目前比较流行的技术之一，至于nodejs，有兴趣的可以在www.nodejs.org 官网查看具体API。一般情况下安装好之后,是会默认安装好npm工具的，可以进入本机cmd键入npm -v 查看，正常是话会提示下列版本信息。
2.设置全局路径(可选，如不执行此步骤，默认安装会安装在appdata)：我的理解就是这个路径是你通过npm安装之后所以的东西存放的路径。建议安装好之后设置一下npm的全局变量，因为默认是在appdata里面的，可以将全局变量设置成自己想要的位置，具体方法：
首先在本地你安装路径下新建两个文件夹（你想要放下载文件的地方）：
在cmd命令：npm config set prefix "D:\Program Files\nodejs\node_global"
以及npm config set cache "D:\Program Files\nodejs\node_cache"
基本上全局路径就配置好了，以后安装的插件和工具都会放在这里面，我试了试 npm install jquery -g(-g 这个参数就是安装在全局);
命令执行完成之后，就会在刚刚global/node_modules目录里面自动生成jquery的文件夹和js文件。
3.安装需要的插件:
首先，我们需要使用seajs的东西,所以下载seajs：
如果在目录下有了，说明正常：
然后我们需要安装spm编译打包工具，这步我们推荐 npm install spm@2.x -g ，如果直接npm install spm默认使用最高版本3.X，在这个版本下我发现编译工具不能编译我写的JS（查了原因原来是3.X和2.X在写法上有一些区别,所以编译不成功），因之前接触的都是2.X版本的写法所以就绕道至2.x版本了。
到这步的时候,我们的spm编译工具就能用了。
4. Seajs怎么用
主要是代码外层有一些规则，具体写法和目前js书写方法一致，我就根据我们项目应用上来做一个demo，来一步一步说说怎么用的吧。
? 框架搭建
1.项目框架还是采用前端一般的文件夹路径，如下图：
2.把我们需要使用的seajs文件引入，，从第三步我们下载下来的module中拷贝过来就行的,如下图：
3.Seajs文件路径格式（分为模块和源文件即[sea-modules和static]），模块不需要我们写，但如果引用外部的JS则需要手动加入，具体结构件上图，在js文件夹下建立static文件夹,用来装源文件js，也就是我们写的js文件，我们也先建立demo文件夹用来区分不同的JS模块，在demo目录下需要有src文件夹,即源文件，和package.json，如下图：
4.编写我们需要的代码文件：
Src里面放我们写的js文件，我这里写的是demo.js,代码如下:
/**
*demo
*/
define(function(require,exports,module){
/**
* 构造函数
*/
function PolicyIntlAdd(paramA,paramB,paramC){
this.functionA();
}
/**
* 定义需要用到的方法
*/
/**
*demo
*/
define(function(require,exports,module){
/**
* 构造函数
*/
function Demo(paramA,paramB,paramC){
this.functionA();
}
/**
* 定义需要用到的方法
*/
Demo.prototype={
//初始化方法
functionA:function(){
alert(‘this is a demo!‘);
},
//提交方法
functionB:function(){
//to do songmeing...
}
};
module.exports=Demo;
});
我在里面写了一句alert方法打印出一些信息，packa.json里面内容：
{
"family": "demo",
"name": "demo",
"version": "1.0.0",
"description": "demo",
"author": "manager@bluesnowsoft.com",
"spm":
{
"alias":{
},
"output": ["demo.js"]
}
}
不要问我为什么这样写,我们将在第二弹给你想要的解释.
下面就是把我们写的js编译一次了，首先cmd进入src的目录运行spm build，如下图：
编译完成后，目录下会多一个dist文件夹：
在来我们就是要install我们编译的js文件了。
还是在cmd这个路径下，运行 spm install . -d ../../sea-modules/seajs,结果:
现在我们去js/sea-modules/seajs里面看看：
就多了demo这个模块了，再看看里面的东西：
现在我们就来写根目录下的demo.html，我的代码这样写的：
<html>
<head>
<title>demo</title>
</head>
<body>
</body>
<script type="text/javascript" src=http://www.mamicode.com/"js/sea-modules/seajs/sea.js"></script>
<script type="text/javascript" src=http://www.mamicode.com/"js/sea-modules/seajs/seajs-style.js"></script>
<script>
seajs.use([‘demo/demo/1.0.0/demo‘],function(Demo){
var demo = new Demo(null,null,null);
});
</script>
</html>
打开demo.html，运行结果为：
5. 结语
在本step by step中只简单介绍了SeaJs和他的初步应用,可能看似有些复杂，但是这种模块化的思想,对我们大型项目的前端是很有帮助的,我们将在下一季更加深入的介绍SeaJs,敬请期待。
我的前端之旅--SeaJs基础和spm编译工具运用[图文]