UNPKG

kero/docs/arch.md

Version:

3.95 kBMarkdownView Raw

1# Kero初衷
2
3Kero是希望基于NeoUI组件，快速实现数据绑定，提供完整前端解决方案。以下介绍前端发展，及流行的框架设计模式。
4
5
6
7## 浏览器格局
8
920世纪90年代，网景公司发布了Navigator浏览器，实现了内容的展示。为满足市场更多需求，网景仓促发布了：Javascript。
10
11浏览器的一时风靡，微软也很快推出自己的桌面浏览器Internet Exploer。凭借着承诺永久免费，率先支持CSS等新标准，IE迅速占领了市场，也宣告了网景浏览器的终结。
12
13开源方面的后起之秀随之也获得了强势的发展和极高的拥趸，以下为目前浏览器情况。
14
15![浏览器市场占有率](/assets/static/img/all/mainbrowser.png)
16
17
18
19## jQuery
20
21浏览器的纷争，对标准的实现也不尽相同，jQuery为我们实现了：
22
23* 解决跨浏览器兼容
24* DOM选择器
25* 链式表达式，让书写代码变得有趣
26* 简化AJAX操作
27* 生态完善，海量插件
28
29总体就是降低了前端的学习成本，提高了项目的效率。
30
31JavaScript 过于灵活，代码的组织过于零散，一旦需求变得复杂， JavaScript 代码将变得难以维护。特别是崇尚快速开发、快速试错的开发模式，臃肿、难以组织和维护的 JavaScript 代码成了一个需要重要解决的问题。
32
33
34
35## 设计模式
36
37设计模式常见的有MVC，MVP，MVVM。有关他们的介绍，引用阮一峰的[MVC，MVP 和 MVVM 的图示](http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html)：
38
39### MVC
40
41MVC模式的意思是，软件可以分成三个部分。
42
43![img](http://image.beekka.com/blog/2015/bg2015020104.png)
44
45> - 视图（View）：用户界面。
46> - 控制器（Controller）：业务逻辑
47> - 模型（Model）：数据保存
48
49各部分之间的通信方式如下。
50
51![img](http://image.beekka.com/blog/2015/bg2015020105.png)
52
53> 1. View 传送指令到 Controller
54> 2. Controller 完成业务逻辑后，要求 Model 改变状态
55> 3. Model 将新的数据发送到 View，用户得到反馈
56
57所有通信都是单向的。
58
59### 互动模式
60
61接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。
62
63![img](http://image.beekka.com/blog/2015/bg2015020106.png)
64
65另一种是直接通过controller接受指令。
66
67![img](http://image.beekka.com/blog/2015/bg2015020107.png)
68
69### 实例：Backbone
70
71实际项目往往采用更灵活的方式，以 [Backbone.js](http://documentcloud.github.com/backbone) 为例。
72
73![img](http://image.beekka.com/blog/2015/bg2015020108.png)
74
75\1. 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
76
77\2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
78
79\3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器） 。
80
81### MVP
82
83MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
84
85![img](http://image.beekka.com/blog/2015/bg2015020109.png)
86
87\1. 各部分之间的通信，都是双向的。
88
89\2. View 与 Model 不发生联系，都通过 Presenter 传递。
90
91\3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
92
93### MVVM
94
95MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。
96
97![img](http://image.beekka.com/blog/2015/bg2015020110.png)
98
99唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。[Angular](https://angularjs.org/) 和 [Ember](http://emberjs.com/) 都采用这种模式。
100
101
102
103参考链接
104
105[MVC，MVP 和 MVVM 的图示](http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html)
\No newline at end of file

1	`# Kero初衷`
2
3	`Kero是希望基于NeoUI组件，快速实现数据绑定，提供完整前端解决方案。以下介绍前端发展，及流行的框架设计模式。`
4
5
6
7	`## 浏览器格局`
8
9	`20世纪90年代，网景公司发布了Navigator浏览器，实现了内容的展示。为满足市场更多需求，网景仓促发布了：Javascript。`
10
11	`浏览器的一时风靡，微软也很快推出自己的桌面浏览器Internet Exploer。凭借着承诺永久免费，率先支持CSS等新标准，IE迅速占领了市场，也宣告了网景浏览器的终结。`
12
13	`开源方面的后起之秀随之也获得了强势的发展和极高的拥趸，以下为目前浏览器情况。`
14
15	`![浏览器市场占有率](/assets/static/img/all/mainbrowser.png)`
16
17
18
19	`## jQuery`
20
21	`浏览器的纷争，对标准的实现也不尽相同，jQuery为我们实现了：`
22
23	`* 解决跨浏览器兼容`
24	`* DOM选择器`
25	`* 链式表达式，让书写代码变得有趣`
26	`* 简化AJAX操作`
27	`* 生态完善，海量插件`
28
29	`总体就是降低了前端的学习成本，提高了项目的效率。`
30
31	`JavaScript 过于灵活，代码的组织过于零散，一旦需求变得复杂， JavaScript 代码将变得难以维护。特别是崇尚快速开发、快速试错的开发模式，臃肿、难以组织和维护的 JavaScript 代码成了一个需要重要解决的问题。`
32
33
34
35	`## 设计模式`
36
37	`设计模式常见的有MVC，MVP，MVVM。有关他们的介绍，引用阮一峰的[MVC，MVP 和 MVVM 的图示](http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html)：`
38
39	`### MVC`
40
41	`MVC模式的意思是，软件可以分成三个部分。`
42
43	`![img](http://image.beekka.com/blog/2015/bg2015020104.png)`
44
45	`> - 视图（View）：用户界面。`
46	`> - 控制器（Controller）：业务逻辑`
47	`> - 模型（Model）：数据保存`
48
49	`各部分之间的通信方式如下。`
50
51	`![img](http://image.beekka.com/blog/2015/bg2015020105.png)`
52
53	`> 1. View 传送指令到 Controller`
54	`> 2. Controller 完成业务逻辑后，要求 Model 改变状态`
55	`> 3. Model 将新的数据发送到 View，用户得到反馈`
56
57	`所有通信都是单向的。`
58
59	`### 互动模式`
60
61	`接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受指令，传递给 Controller。`
62
63	`![img](http://image.beekka.com/blog/2015/bg2015020106.png)`
64
65	`另一种是直接通过controller接受指令。`
66
67	`![img](http://image.beekka.com/blog/2015/bg2015020107.png)`
68
69	`### 实例：Backbone`
70
71	`实际项目往往采用更灵活的方式，以 [Backbone.js](http://documentcloud.github.com/backbone) 为例。`
72
73	`![img](http://image.beekka.com/blog/2015/bg2015020108.png)`
74
75	`\1. 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。`
76
77	`\2. 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。`
78
79	`\3. Controller 非常薄，只起到路由的作用，而 View 非常厚，业务逻辑都部署在 View。所以，Backbone 索性取消了 Controller，只保留一个 Router（路由器）。`
80
81	`### MVP`
82
83	`MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。`
84
85	`![img](http://image.beekka.com/blog/2015/bg2015020109.png)`
86
87	`\1. 各部分之间的通信，都是双向的。`
88
89	`\2. View 与 Model 不发生联系，都通过 Presenter 传递。`
90
91	`\3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。`
92
93	`### MVVM`
94
95	`MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。`
96
97	`![img](http://image.beekka.com/blog/2015/bg2015020110.png)`
98
99	`唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。[Angular](https://angularjs.org/) 和 [Ember](http://emberjs.com/) 都采用这种模式。`
100
101
102
103	`参考链接`
104
105	`[MVC，MVP 和 MVVM 的图示](http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html)`
\	No newline at end of file