spm使用之三spm应用实例

spm 的init实际上是调用了grunt这个工具来实现一些交互式的提问和数据的获取.

看看npm就知道, npm有个命令叫init, 就是一样的交互式提问获取你要创建的nodejs的模块信息.

spm从这个角度一看就是抄袭npm的方式, 当然, 说抄袭难听了点, 叫借鉴吧, 也是, 秀才摸得, 我和尚难道摸不得?

spm init 这个命令, 实际上就是将 C:\Documents and Settings\Administrator\.spm\init\cmd\root 和 C:\Documents and Settings\Administrator\.spm\themes\cmd 文件夹下的文件, 通过在一些模板文件中替换掉一些在交互阶段得到的参数, 然后复制到你执行spm init 命令的模块目录里, 比如D:\projects\box 等等.

首先谈, 这个css和js引用的问题, 既然都已经用上seajs了, 那么最好还是到https://github.com/seajs/examples 下载几个例子下来学习.

解压缩 examples 到D:\Projects\. 然后进入D:\Projects\examples-master目录, 会发现如下目录结构:

.gitignore
app/
index.html
README.md
sea-modules/
static/

进入sea-modules, 有如下目录:

angular/
examples/
gallery/
jquery/
seajs/

再进入examples目录, 这里有hello, lucky等等seajs模块.

在这个目录下, 我们故伎重施, 还是重新创建box

md box
cd box
spm init
#挨个回答问题
...
#完了之后
spm doc watch 直接运行在本机8000端口

然后修改readme.md, 加入中文, 把文件转换为utf-8编码格式. 另外, js文件意思一样, 如果有中文, 都转换为utf-8编码格式.

好了, 下面就是应用的实例了.

实例从哪里来? 还是从  高富帅seajs使用示例及spm合并压缩工具露脸 http://www.zhangxinxu.com/wordpress/2012/07/seajs-node-nodejs-spm-npm/ 这篇文章中来吧.

因为作者个博客虽然介绍了怎么使用seajs, 但是没有同时介绍怎么使用spm来管理自己写的这个模块, 为了省事, 我把作者的这几个例子再演示一遍. 当然了, 东西还是放在我自己刚弄的box模块里. 我弄这个的主要目的是结合seajs来介绍spm的doc

1.半透明背景遮罩层

进入box模块, 打开src目录, 新建zhezhao.js, 名字就不叫overlay了, 因为overlay好像和seajs现有的一个模块overlay同名, 每次在调试的时候,我都怀疑seajs并没有加载我的overlay.js, 而是加载了seajs/还是aliceui?自己提供的overlay.js, 因为我在chrome调试的时候, 没有看到对我本地的overlay.js的http请求, 也许是没请求这个文件.

内容直接复制如下:

define(function(require, exports, module) {
  // 模块代码
});

然后再创建一个 elementCreate.js 的JavaScript文件，同样的套用，如下JavaScript代码:

/**
 * 创建元素
 */
 
define