• Stars
    star
    654
  • Rank 68,870 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 13 years ago
  • Updated over 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

一个模块化,面向大规模开发的javascript框架

mass Framework

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

abcd(1群) ,Alucelx(1群), 带刀(1群),sapjax(2群) ,教主Franky(2群), 一三一四君(2B群), riophae,
soom(5群),Hodor(5群),小叶(3群,904591031)


一个模块化,以大模块开发为目标,jQuery式的框架。里面优先应用了大量HTML5新API,估计除了个别手机专属框架外,没有像它如此大范围应用了。这一来可以大大减少框架的体积,二来大幅提高运行效率。

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

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

mass Framework的源码阅读顺序

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

mass.js -> lang.js(lang_fix.js) -> class.js -> flow.js -> data.js -> support.js -> query.js ->
node.js(node_fix.js) -> css.js(css_fix.js) -> attr.js(attr_fix.js) -> event.js(event_fix.js) -> fx.js -> ajax.js(ajax_fix.js)

lang, class, flow, data专注于语言层面,query, node, css, attr, event, fx, ajax专注于DOM层面。


mass Framework的文档:

它大部分文档已经转移到newland.js项目之下,我们可以在这里访问得到它!

mass Framework的优点:

  1. 多库共存。
  2. 多版本共存。
  3. 高度模块化,使用AMD规范的加载系统,实现并行加载,按需加载,自行处理依赖,有利于调试与最小化资源调度。(目前版本为v21)
  4. flow提供自定义事件机制,$.Observer是一般化的观察者模块,
    $.Flow, 是其强化版, 专注于流程控制与从多处获取数据,解耦回调嵌套,减少等待时间,实现多路监听,一处归化;
  5. 强大的类工厂。(目前版本为v11)
  6. AS3式的补帧动画系统,支持回放,旋转,暂停!
  7. 第五代选择器引擎Icarus,全面兼容CSS3高级伪类与jQuery自定义伪类的。
  8. 与jQuery完全兼容的事件系统,强大的事件系统机制能轻松处理动态添加的节点的事件监听问题,此外还内置对滚轮事件的支持。
  9. lang_fix模块已经为您修复了旧式IE的语言BUG,与添加上ECMA262v5的绝对大多数新API的支持与,因此痛快使用 String.prototype.trim, Array.prototype.forEach, Array.prototype.map,Array.prototype.filter, Array.prototype.reduce, Function.prototype.bind吧。
  10. ajax模块支持XMLHTTPRequest2.0绝对大多数功能,能在旧式IE下上传下载二进制数据。
  11. lang模块的提供语言链对象相当于把underscore.js这个库整合进来,你能想到语言扩展都有了。
  12. API 95%与jQuery神似,学习成本极低。
  13. 全中文注释与大量参考链接与版本变更日志,绝对对你提高JS水平的好教程。

框架的使用:

点击上面的ZIP按钮将框架下载回来,解压,运行里面的Sws.exe服务器。

一个简单的例子

require("ready,node",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对基本数据类型提供了大量的工具方法,甚至连es6的候选方法你都能找到。它们分别挂在$.String, $.Array, $.Number, $.Object之下。

多库共存

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>多库共存</title>
        <script>
            var $ = {
                toString:function(){
                    return "[object jQuery]"
                }
            };//假设这是已存在的库
        </script>
        <script type="text/javascript" src="../mass.js" charset="UTF-8"></script>
        <script>
            //mass的命名空间将自动改为$+它当前的版本号
            $1.require("lang",function(){
                $1.log($+"")//[object jQuery]
            })
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;/body&gt;

</html>

写个框架,将自己过往的积累都沉淀下来,等到回头去看时,发现之前攻克的每一个知识点,都乖巧地排在框架里,
在你需要的时候,可以快速派上用场。这种感觉就像在组织自己的军团一样,军团中有驯服得很好的,也有个性还很浮躁的刺儿头。
你慢慢将这支军团由一盘散沙驯练成精锐部队,这感觉真好。
                                                     ——真阿当
	以前的程序员们,经常会为了做一个数据处理程序而自己开发一门编程语言。
	比如Charls Moore在美国国家天文台,做射电望远镜数据提取程序,开发了Forth。有的为了给自己写的书排版漂亮些,
	写了TeX。近的说,有人为了做网站写了Rails 和 Django。想想都不好意思称自己是程序员了。												 

JS文件的合并

使用combo.js

node.exe combo

JS文件的压缩

使用compiler.jar( GCC,需要有JAVA运行环境)

java -jar compiler.jar --js mass_merge.js --js_output_file mass_min.js
java -jar compiler.jar --js avalon.js --js_output_file avalon_min.js

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

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

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

by 司徒正美 (zhongqincheng)

2011.11.15

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

如何贡献自己的力量

首先你总得有自己的github帐号吧,注册一个,非常简单,只需用户名,邮箱,密码,邮箱只是用来找回密码的,不做验证。因此注册后立即能用!比如我现在新注册一个叫JsLouvre的示范帐号。

然后搜索我的项目——mass Framework

第一个就是,点击进入项目,然后点上方的Fork按钮,这就拷贝一份我的项目的副本作为你自己的项目

创建成功!

接着就是修改代码了,这要在自己发现真的存在漏洞或有什么改进之处才要动手啊!不能想改就改。要通读你要改的那一部分,必要时通读全框架。因此新手们最好找国内高手的框架进行学习, 一来中文注释比较亲切,二来也方便接下来的交流。通常我们在clone git到本地进行修改的,这又涉及另外一些工具与命令的学习。不过,github完全允许你在线上进行修改,提交,合并。

比如你发现data模块的注释与mass模块的不一样,要统一合并,将函数外的注释移到里头。(更有意义的方式是,打开http://www.jshint.com/,就能发现许多小问题。

变成编辑状态,不过不太好用。大家有条件一定要学学如何使用TortoiseGit或Sublime Text 2下载github项目到本地,进行修改,提交,pull request啊!

请认真写下你的修改日志,方便原框架作者查阅。

修改成功后的样子:

接着下来一步非常重要,就是提交你的修改给原作者。点击上方的pull request按钮!

红色区域为原作者的项目,你要贡献的目标;亮蓝色区域为你的项目;黑色处填写标题与必须描述;点击右下方绿区域的按扭进行提交!



接着下来就是框架作者的事儿了,我会在自己的项目看到你们的提交。万一以后你们有幸被别人贡献代码,也做这活儿。

点击中间那个大大的pull request(2)的按钮到另一页面,中间有个被鲜绿色高亮的merge pull request按钮。作者查看你的修改,觉得可以就点它进行合并。

最后你们就会在原项目上看到自己贡献的代码!


如何让自己的项目与原作者的项目保持同步!

我经常看到许多人,只会fork一次,提交过一次修改就不知怎么办了!因此原框架作者是非常勤奋的,一天会提交N次,一个星期后许多文件都改动过了,而那些代码贡献者不可能一个个跟着修改。 因此我们还是用到上方的pull request按钮。

这次是把自己的项目放到左边,原框架作者放到右边,在选择过程中,你会发现原框架作者有许多贡献者的。这里我希望大家一定要浏览Commits与Files Changed进行学习!这也是github最大的价值所在!把握别人对代码的改进,最能提高我们编码水平。这里面会涉及大量的编码技巧!

补上必要说明,然后点击下方send pull request按钮。

很快你就看到评论区最下方有个鲜绿色高亮的按钮,继续点就是。

继续让你确认,没问题就继续点!

这样就同步成功!!!!!!

More Repositories

1

avalon

an elegant efficient express mvvm framework
JavaScript
5,798
star
2

anu

the React16-compat library with hooks
JavaScript
3,184
star
3

mobileHack

这里收集了许多移动端上遇到的各种坑
2,904
star
4

avalon.oniui

基于avalon的组件库
JavaScript
415
star
5

newland

node.js 全栈式MVC framework
JavaScript
368
star
6

jsbook

一些章节
JavaScript
275
star
7

fetch-polyfill

fetch polyfill which supports all mainstream browsers, even IE6, IE7, IE8.....
JavaScript
150
star
8

mmRouter

avalon的三柱臣之一( 路由,动画,AJAX)
JavaScript
119
star
9

algorithmbook

没有经过整理的知识才是徒然浪费时间,伤透脑筋!
HTML
110
star
10

jsx-parser

a lightweight jsx parser
JavaScript
97
star
11

agate

灵活易用的nodejs后端框架
JavaScript
74
star
12

mmDeferred

一个完全遵循Promise/A+规范的Deferred 库
JavaScript
46
star
13

object-defineproperty-ie8

fix ie8 Object.defineProperty
JavaScript
46
star
14

mmRequest

avalon王之三柱臣 之一
JavaScript
43
star
15

avalon.bootstrap

基于avalon的bootstrap
JavaScript
40
star
16

avalon.test

专门用于放置avalon的单元测试
JavaScript
32
star
17

create-anu-app

anujs的官方脚手架
JavaScript
28
star
18

myless

我的CSS研究,重点看issue
CSS
28
star
19

mmAnimate

avalon的三柱臣之一( 路由,动画,AJAX)
JavaScript
26
star
20

avalon-server-render-example

avalon2+koa2的后端渲染例子
JavaScript
26
star
21

hfs

height level file system
JavaScript
20
star
22

fastui

一个基于react native的UI库
Objective-C
20
star
23

anu-ie8-example

anu运行在IE8的例子
JavaScript
18
star
24

mmTemplate

我的前后端通用模板,既可以自动变成jQuery插件,也可以单独为一个前端模板,亦可以是独立的node.js模板
JavaScript
13
star
25

node-avalon

在后端渲染avalon
JavaScript
12
star
26

mmDux

avalon的redux
JavaScript
10
star
27

quickdemo

快应用的例子
JavaScript
10
star
28

ms-pager

avalon2的分页插件
JavaScript
9
star
29

mmDialog

一个基于jQuery的弹出层
JavaScript
9
star
30

def.js

一个ruby风格的类工厂
JavaScript
9
star
31

avalon.pilotui

基于avalon的Pilot UI库
JavaScript
8
star
32

winjs

微软的winjs 1.0,我将它肢解了,方便研究
JavaScript
8
star
33

cpp

算法学习
C++
7
star
34

IE6-7-namespace-html5

通过命名空间方式支持HTML5,CSS能正常呈现,JS里也能用选择器选择得到
6
star
35

tx-todolist

课件相关
JavaScript
6
star
36

cygni

一个react同构框架
6
star
37

oni.accordion

oniui2的风手琴组件
JavaScript
5
star
38

oni.button

avalon.oniui2 button and buttonset component
JavaScript
4
star
39

ms-modal

JavaScript
4
star
40

mass-ui

mass Framework 的UI库
JavaScript
4
star
41

avalon.docgen

avalon.oniui的注释文档生成器
JavaScript
4
star
42

bloghighlighter

highlight
3
star
43

detectPositionFixed

检测浏览器对position fixed的支持
JavaScript
3
star
44

EventTarget

一个支持优先级排序的自定义事件系统
JavaScript
3
star
45

JS.Class

一个mootools式的类工厂
JavaScript
3
star
46

mmMenu

一个多级菜单
JavaScript
3
star
47

gitbook

JavaScript
3
star
48

mass-mobile

运行于手机端的版本
JavaScript
2
star
49

object-create-ie8

Object.create polyfill
JavaScript
2
star
50

bootstrap_comment

bootstrap2.2.3 JS部分的注解
JavaScript
2
star
51

polyline

曲线图
2
star
52

radarChart

雷达图
JavaScript
1
star
53

babel-preset-avalon

avalon专门的babel编译包
JavaScript
1
star
54

ms-tabs

avalon2的切换卡
JavaScript
1
star
55

mass-effect-examples

mass framework 动画特效的例子
JavaScript
1
star
56

anu.todolist

anujs结合redux, immutable.js的例子
CSS
1
star
57

custom-select

自定义 select 元素的样式,兼容 IE10+,Webkit,Firefox
1
star
58

pm2

用来学习pm2
1
star
59

mass-loader

模块加载器 19基于iframe,兼容性与可靠性最强
JavaScript
1
star
60

fixZIndex

处理IE的z-index BUG
JavaScript
1
star
61

TypingNinja

一个打字游戏
JavaScript
1
star
62

bgiframe

IE6专用的iframe 垫片
JavaScript
1
star
63

cssPointerEvents

检测浏览器对pointerEvents 的支持
JavaScript
1
star
64

anu-cli

创建小程序
1
star
65

fixed_position

专门放置与position fixed的有关实验
JavaScript
1
star