mass Framework

mass Framework的贡献者列表(排名不分先后)：

abcd(1群) ,sapjax(2群) ,教主Franky(2群), 一三一四君(2B群), riophae

---

一个模块化，以大模块开发为目标，jQuery式的框架。里面涉及的HTML5新API数量，估计除了纯净的手机框架外，无人能敌。

mass Framework的模块化经过一年化调整与改良，大致分为四类：

1. 种子模块， mass.js，最精简的内核， 包含模块加载系统。
2. 补丁模块， lang_fix.js, css_fix.js, event_fix.js,主要是用于兼容旧式IE的，在chrome1+, FF4+, opera10+, safari4+是不会加载它们的。
3. 核心模块， 所有位于mass-Framework/src目录下，但不在其子目录下的JS文件， 提供框架的核心功能。
4. 外围模块， 位于mass-Framework/src/more的JS文件。

---

mass Framework的源码阅读顺序

都是位于src目录下，里面的子目录是外围模块。

mass.js -> lang.js -> lang_fix.js -> support.js -> class.js -> data.js -> query.js -> node.js -> css.js -> css_fix.js -> event.js -> event_fix.js -> fx.js -> ajax.js -> flow.js

mass Framework的优点：

1. 多库共存。
2. 多版本共存。
3. 模块系统，将不同业务的代码封存于不同的JS文件中，确保自治，加载时能自行处理依赖关系。(目前版本为v15)
4. 模板机制，提供format，hereDoc，tag, ejs（v9） 这四种级别的字符串拼接方法（后两个是用于生成HTML代码片断）。
5. 操作流，一种比异步列队（Deferred）更为强大的处理异步的机制，避免回调套嵌，将串行等待变成并行等待,一处合并，多处触发。
6. 强大的类工厂。（目前版本为v9）
7. AS3式的补帧动画系统， 还支持回放呢！
8. CSS3 transform2D支持， 您可以轻松旋转图片角度了。
9. 第五代选择器引擎Icarus，全面兼容CSS3高级伪类与jQuery自定义伪类的。
10. 支持事件代理，多级hook的事件系统。
11. lang_fix模块已经为您添加上ECMA262v5的绝对大多数新API的支持，因此可能痛快使用 String.prototype.trim, Array.prototype.forEach, Array.prototype.map,Array.prototype.filter, Array.prototype.reduce, Function.prototype.bind吧 。
12. lang模块的提供语言链对象相当于把underscore.js这个库整合进来，你能想到语言扩展都有了。
13. API 95%与jQuery神似，学习成本极低。

框架的使用：

点击上面的ZIP按钮将框架下载回来，然后解压取得src文件里面的JS文件，统统放到你的项目下，然后在页面上引用mass.js。

一个简单的例子

$.require("ready",function(){
/*待到domReady完成，执行回调*/
   $.log("将日志打印到页面上",true)
})

上面的代面相当于：

$.require("ready,node",function(){
/*待到domReady完成，并且在node.js模块加载完毕，执行回调*/
   $("<pre>将日志打印到页面上</pre>").appendTo("body")
})

我们在请求node.js时，会自动加载其依赖，如lang.js,support.js,class.js,query.js,data.js等等， IE下还会加载lang_fix.js，但你无需理会它是怎么处理，只需专注于你的业务逻辑就行了。

如果嫌麻烦，直接像jQuery那样，不过会把许多无用的部分都加载下来了。

$(function(){
  $("<pre>将日志打印到页面上</pre>").appendTo("body")
});

jQuery1.7最新的API它也支持了

$(function(){
 $("#dataTable tbody tr").on("click", function(event){
	alert($(this).text());
 });
});

相比于jQuery只限于DOM的操作，mass Framework提供一个语言链对象进行链式操作

$.require("ready,lang",function(){//对字符串进行链式操作
  $.lang("aaa_bbb").toLowerCase().capitalize().camelize().
  split("").forEach(function(){//转换为数组后继续“链”
    $.log(s);
  });
});

语言链对象为字符串，数字，对象，数组以及类数组对象的链式操作提供了丰富无比的API接口。

文档的使用：

还是刚才解压出来的文件夹，里面有个AspNet.exe服务器（需要微软的.net Framework支持），进去选doc目录就可以运行里面的示例了。

mass的JS文件合并

手动方式

1. 将模块加载模块mass.js里面的内容先复制到一个临时文件
2. 在其最后一行"})(this,this.document);" 与倒数第二行" $.exports("$"+postfix);"插入标识模块已加域的代码。 其代码如下：
   

       var module_value = {
           state:2
       };
       var list = "lang_fix,lang,support,class,data,query,node,css_fix,css,attr.event_fix"+
           "event,fx,flow,ajax".match($.rword);
       for(var i=0, module;module = list[i++];){
           mapper["@"+module] = module_value;
       }
   

   list里面的为要合并的模块名
3. 将其他模块里面的内容直接拷到上面的代码之下。

成功后，整个代码结构如下：

(function(global , DOC){
//这是最核心的模块加载模块
//XXXXXXXXXXX
 //然后加上这样一段
    var module_value = {
        state:2
    };
    var list = "lang_fix,lang,support,class,data,query,node,css_fix,css,attr.event_fix,event,fx,flow,ajax".match($.rword);
    for(var i=0, module;module = list[i++];){
        mapper["@"+module] = module_value;
    }
//然后把要合并的JS文件的内容直接抽取出来放在下面
   $.define("lang_fix", function(){
//XXXXXXXXXXXXXX
});
   $.define("lang", function(){
//XXXXXXXXXXXXXX
})
   dom.define("class", function(){
//XXXXXXXXXXXXXX
})
   $.define("data", function(){
//XXXXXXXXXXXXXX
})
   $.define("node", function(){
//XXXXXXXXXXXXXX
})
//....
})(this,this.document)

脚本方式

位于doc/public/文件夹有个merge.js， 它需要后端node.js的支持

BUG提交与插件的友情贡献。

大家在github注册后，就可以在https://github.com/RubyLouvre/mass-Framework/issues里面提交建议或BUG什么了。

如果是想贡献力量，可以点击最上面的Fork按钮，拷贝一份作为自己的版本，然后在里面修改代码，添加插件，写完后通知我，好让我合并到主干上。

by 司徒正美 （zhongqincheng）

2011.11.15

http://www.cnblogs.com/rubylouvre/