回顾一下web

回顾一下web

从一个做过GUI角度的人来看一下web
1.GUI布局
GUI的界面是win form，是一个有大小的form，控件是根据坐标放在这个form上的。

但web没有这个坐标概念。web是一个stream，而且由于浏览器大小可以改变，所有这些都变了，传统的GUI的控件布局是不变的，除非你代码做了控制，但对于web，元素的位置改变本身浏览器有若干处理，且目前的新的框架bootstraps等都对不同大小的浏览器做了一些自适应。这个都是不同。

2.客户端服务器
传统的GUI的 C/S模式，服务和客户端之间走的是数据，不影响客户端的界面，如果GUI是本地的，那么服务器就没有了。但是web，天生就是有web server和client browser。这里有一个计算量的概念，是server去计算还是client去计算。所有对于js，这里要区别是server side还是client side。一个html的内容展示，是client只是拿到数据展示，还是拿到数据之后根据规则条件，view也变化？

3.client的组成
对于web，客户端是html，js，css。css是为了让你好看，包括一些潜在的方便，比如一键所有图片都变成灰色。html是布局元素组成，包括新的协议中的一些特别的特型，比如h5包含视频播放元素，可以直接播放视频，否则你还必须调用第三方的activex。整个h5的页面，borwser解析为一个DOM。通过这个结构化也页面元素，你可以通过js来控制一切的一切。

jquery无非有一个库，你不用那么复杂的select一个元素，然后说这个元素的颜色，动作，action或者别的。

vue、react、angualr等是一个框架，你在这个框架内来做。这里

4.mvc
mvc框架是有点年代的框架。通过这个框架希望能够把业务逻辑，流程，view分开。页面上一个textbox的内容，你觉得如果这个是一个view，且textbox的输入数据是否需要和后端总是同步？我的理解是需要的，否则你需要后面一个进程维护这个offline的脏数据是否和后端的服务器数据同步。
这里还有另外一点，我们是否可以让一个web 提供界面，然后一个web 提供数据（比如soa）。其实这样是可以的，且目前我们的client side的js越来越强大，慢慢变成一个rich client，那么这个client除了界面端和用户交互外，还是可以接入第三方的数据，从而完成用户输入后端交互的功能呢。
目前SPA，single page appliction，类似于GUI单一页面，功能在一个页面完成，需要全局刷新，只是局部ajax的异步获取数据，然后把DOM修改刷新，这个是一个很好的思路和用户的体验。为了达成这个目的，采用虚拟DOM的方式，发现那里需要rander，那么哪个模块就去刷新一下。这里强调的是，这个UI和数据的修改是两个不同的方式。如果UI基本上是不动的，那么数据的修改双向绑定和修改，应该是程序内部固话的方式来做，开发者不需要考虑脏数据等数据同步的问题。
在传统的做页面动画，比如图片走马灯等，这些应该是属于UI方面的代码控制，不是control的控制。从代码的角度而言，这个应该区分。也就是并非是css归css，html归html。而是应该按照View的是View，control是control的方式来区分。view由于数据方面的变化产生不同的view，应该是view内部的组件的特型，不应该是外部control的问题。

5.业务模型
业务模型很重要，我们在开发的时候，学习新的开发语言，可能只是在看开发语言的框架是什么，但没有考虑我们的业务模型和框架，网上有很多2048的代码，但你知道这个东西的代码量么？这个东西的业务框架是什么？我们抽象出来的么给block，棋盘，得分等这个模型是怎么样的，如果不清楚这个那么你也会觉得额很累。
2048的模型。
从业务流程上是
new game -> 允许上下左右按键，然后方框内的数字合并，合并的规则是，如果是上，那么上的方向上数字累加，注意这里不需要考虑递归的方式，也就是不考虑2222一下子变成8，而是2222->44->8的过程，另外优先考虑最顶上数据累加。这个都是业务逻辑

score是，棋盘上所有数据累加的数据，这个游戏结束的判定是的当棋盘上的block出现2048时，游戏结束。

另外在每次按键之后，在棋盘上随时出现2个位置的block，他们的数字分别都是2

当棋盘上没有空余的block，且没有任意两个block的数字相同，那么就是game over。

动画，界面啥的都是css或者图片之类的。上面是业务流程，分装为不同的模块然后来做。包括定位