码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-04-18 16:52:18      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:

标签: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>

<title>demo</title>

</head>

<body>

 

</body>

 

  <script type="text/javascript"  src="js/sea-modules/seajs/sea.js"></script>

<script type="text/javascript"  src="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编译工具运用[图文]

标签:seajs   nodejs   npm   spm   js   

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

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

标签:

原文地址:http://www.cnblogs.com/mfc-itblog/p/5404817.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!