Seajs简介

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等 JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令 JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的 逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript 编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

更多介绍请参考官方主页：http://seajs.org/docs/。

目录规范

代码规范

模块编写

参照CMD规范。http://seajs.org/docs/#docs 文档的模块编写规范。

命名规范

1. 必须使用 Tab 键进行代码缩进，以节约代码大小(建议设置编辑器的tab为4个空格的宽度)
2. 接口风格

1. 其他建议风格，非必要

1. 所有语句结束后，必须使用 ; 号结束
2. 所有变量必须是有意义的英文，严厉禁止拼音
3. 变量允许使用公认英文缩写
4. 类命名必须是驼峰式
5. 常量必须所有单词大写，并且每个单词间加下划线
6. 枚举类型时，枚举的命名必须有意义，枚举与枚举成员必须以驼峰式
7. 常量和枚举必须在最前端定义，merge 时注意，必须把常量与枚举定义的文件放在文件列表的第一位
8. 变量内的简写单词不能全大写XmlDocument strHtml
9. "on"只能用作事件的命名
10. 函数开头必须是有意义的动词或动词短语
11. 私有类的变量属性成员 建议 使用混合式命名，并前面下下划线
12. 临时的全局变量放到一个全局的哈希表里，方便变量回收
13. 所有全局变量必须初始化，尽量少用全局变量
14. 大括号前面不能有换行符
15. 保留字以及特有的dom属性不能作为变量名

特殊命名约定

1. 前面加 "is" 的变量名应该为布尔值，亦可使用 "can" "has" "should"
2. 前面加 "str" 的变量名应该为字符串
3. 前面加 "arr" 的变量名应该为数组
4. 前面加 "num" 或 "count" 的变量名应该为数字
5. "o" 作为局部变量或参数，表示为Object
6. "e" 作为局部变量或参数，表示为Element
7. "evt" 作为局部变量或参数，表示为event
8. "err" 作为局部变量或参数，表示为error
9. 重复变量建议使用 "i", "j", "k" （依次类推）等名称的变量(全世界公认)
10. 能缩写的单词尽量缩写
11. 避免产生令人误解的布尔值 isNotNumber isNan
12. 处理错误的变量，必须在后面跟着 "Error"
13. 初始化用的函数 必须使用 "init" 开头，如果一个页面只有初始化可以单独使用 init()
14. 尽量做有意义的代码折行，不要让一行代码过长。(HTML 字符串除外)
15. 操作符 建议 使用空格隔开
16. 函数调用和方法 避免 使用空白
17. 逗号（,） 建议 使用空白隔开。
18. 不允许频繁使用 previousSibling 和 nextSibling

词法结构

1. 普通代码段应该看起来如下：

   while(!isDone){
         doSomething();
         isDone = moreToDo();
   }

2. if 语句应该看起来像这样：

   if(someCondition){
           statements;
   }elseif(someOtherCondition){
       statements;
   }else{
       statements;
   }

3. for 语句应该看起来像这样：

   for(initialization; condition; update){
           statements;
   }

4. while 语句应该看起来像这样：

   while(!isDone){
           doSomething();
       isDone = moreToDo();
   }

5. do ... while 语句应该看起来像这样：

   do{
           statements;
   }while(condition);

6. switch 语句应该看起来像这样：

   switch(condition){
   case ABC:
       statements;
       //  fallthrough
   case DEF:
       statements;
       break;
   default:
           statements;
       break;
   }

7. try ... catch 语句应该看起来像这样：

   try{
       statements;
   }catch(ex){
       statements;
   }finally{
       statements;
   }

8. 单行的 if - else，while 或者 for 语句也必须加入括号：

   if(condition){ statement;}
   while(condition){ statement;}
   for(intialization; condition; update){ statement;}

注释规范

具体的文档示例可以参考 https://github.com/senchalabs/jsduck/wiki

• @author ：作者
• @class ：类
• @deprecated：标记此方法属性或者类不赞成使用，在升级过渡的时候需兼容之前的API时特别有用。
• @example：给类或者方法添加一个代码范例，jsduck不仅会给代码着色，还能给代码生成一个代码编辑器，编辑代码后可实时预览，使用@example需要四个空格的缩进。
• @extends ：标记一个类继承自另一个类，生成后会有一个类型继承体系陈列在文档视图的右侧。
• @cfg ：构造器的配置项，并在其后跟随"{className}"，再跟随参数名。

范例：@cfg {String} fieldName配置项的描述。

• @return ：与@cfg 类似，标记一个函数成员调用过后的返回类型。

范例：@return {Number} 文字描述

• @param：与@cfg 类似，给一个函数成员标记其所需的参数类型和描述，如果参数类型为多种可以用"/"分割，如需要给参数进行更详细描述还能使用"[param.member]"描述符。

范例：@param {Number/String} fieldName

范例：@param {String[]} fieldName

范例： /**
* @cfg {Object} opt
* @cfg {Number} [opt.age]
* @cfg {Number} [opt.name=0]
*/

• @event ：标记一个事件，随后通常会跟随@param标签给事件回调函数声明参数的说明。
• @inheritdoc：在其后跟随Class#member，常用在子类覆盖父类成员后，子类注释块还需继续使用父类注释的情况下使用。
• @private ：将成员标记成私有，虽然也有@public 但如果不特殊标明即为公有。
• @protected ：将成员标记成受保护的。
• @static :将成员标记成静态的，静态成员也会在文档中进行分类展示。
• @img ：在文档注释中链接一张图片，让文档变得更具可读性。
• @link ：在文档注释中标记某个类或类成员的锚点。

 

一个示例项目

该示例项目SVN : http://192.168.1.101:801/svn/998597/FrontProjectExample

环境配置

第一步：安装文件下载

• Node.js http://nodejs.org/

第二步：执行安装

$ npm install spm -g

$ npm install spm-chaos-build -g

关于 spm 和 spm-chaos-build的详细介绍可以参考

https://github.com/spmjs/spm2

https://github.com/edokeh/spm-chaos-build

第三步：创建业务模块

3.1：创建js文件

    在js/apps/test/目录下创建module1.js内容为：

    

3.2：创建html文件

    在html/test/目录下创建module1.html内容为:

    

    注意红色框的修改（与js文件名和目录一致）。

    预览效果：

        

    此时要保证seajs-config.js的production配置属性为flase,如下图：

3.3：修改package.json

    修改js/apps目录下的package.json，修改如下红色框中的信息。

    

    

第四步：构建打包项目

    双击根目录下的build.bat,可完成自动打包。

    

    查看seajs-config.js文件

    

    自动生成seajs的map

    预览效果如下：

    

    请注意两者之间的区别。    

总结

1. 为什么要使用seajs

管理开发和打包的有效的管理规范。

1. Require是异步加载的。

   相信看完下面两篇文章，可以了解Require为什么是异步加载的了，如果你需要依赖加载的文件加载器，请选择In.js: http://project.benben.cc/In/。

https://github.com/seajs/seajs/issues/259

https://github.com/seajs/seajs/issues/260

1. Export的输出不能是函数返回值

https://github.com/seajs/seajs/issues/242

1. 外部js库或样式的调用方法

强烈建议使用In.js 在seajs.use之前把需要的JS库加载进来，使用In.js主要有两个原因

1. 能加载管理CSS文件
2. 加载CSS文件时不会出现多个css重复加载的问题（反面教材:DO.JS）

不建议使用库中自带的。Require模块进行加载 在模块中使用（do，labjs, in）进行加载，原因：

https://github.com/seajs/seajs/issues/993

1. 模块内的js和css是自动打包的

   前文已经演示过，使用 pm-chaos-build 进行打包的过程，详细请看：

   https://github.com/edokeh/spm-chaos-build-example

2. 按照注释规范书写，可以自动生成文档。

   https://github.com/senchalabs/jsduck

   这是一个可以把你的代码翻译成.Extjs 文档的好工具，但是前提要按照规则写代码。代码规则

   https://github.com/senchalabs/jsduck/wiki/Guide

3. 测试是有必要的

        http://llying.iteye.com/blog/258605

来自： http://cxc3214.blog.163.com/blog/static/23812806201310145015273/