我的前端之旅--SeaJs基础和spm编译工具运用[图文]

标签：seajs nodejs npm spm js

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>

</head>

<body>

</body>

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编译工具运用[图文]

标签：seajs nodejs npm spm js

原文：http://blog.csdn.net/blue_rem/article/details/41891573

更多开发分享请访问：http://www.javarecord.com/