JavaScript从前端到后端,MVC-B架构的设计和探索 (一)
发布于 8 年前 作者 willwen 6796 次浏览 最后一次编辑是 4 年前

<p>大多数的程序开发者都会熟悉两个架构:MVC与C/S。从功能角度看,两者是完全不能相提并论的东西。</p>

<p><a href=“http://en.wikipedia.org/wiki/Model–view–controller”>MVC</a>是一种软件设计模式,把单个应用实现进行分割成为三块: <a href=“http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/ModelViewControllerDiagram2.svg/350px-ModelViewControllerDiagram2.svg.png”><img src=“http://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/ModelViewControllerDiagram2.svg/350px-ModelViewControllerDiagram2.svg.png” alt=“Model–view–controller” title="" /></a></p>

<ul> <li>Model通常理解为应用所需要使用到的数据层;</li> <li>View为表达层,即最终用户所能看到的东西;</li> <li>Controller为应用控制层,应用通过代码对数据层和表达层。</li> </ul>

<p>通过对应用功能的实现进行拆分,可以更好地对应用进行开发和维护。</p>

<p><a href=“http://en.wikipedia.org/wiki/Client-Server”>C/S</a>是一种应用在网络通讯中的实现架构,它改变了以往“愚蠢的客户端”的僵局,从而发展出<a href=“http://en.wikipedia.org/wiki/Rich_Internet_application”>RIA</a>(如<a href=“http://www.adobe.com/products/air.html”>Adobe Air</a>,<a href=“http://www.microsoft.com/silverlight/”>Silverlight</a>等)。</p>

<p><a href=“http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Client-server-model.svg/468px-Client-server-model.svg.png”><img src=“http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Client-server-model.svg/468px-Client-server-model.svg.png” alt=“C/S Model” title="" /></a></p>

<p>在C/S架构提出之前,我们所使用的客户端都不会“思考”,只会向“胖子”服务器发出请求,并等待响应。客户端当接收到服务器的响应以后,会直接把响应内容直接反映给用户。 所以基本上是用户与远在千里的服务器在交流,而不是用户与近在咫尺的客户端在交流。</p>

<p><strong>什么是MVC-B?</strong></p>

<p>MVC-B即 Model-view-controller on Bridge,更为简单的说,即为MVC与C/S的融合。 <a href=“http://web.jit.im/mvc-b.png”><img src=“http://web.jit.im/mvc-b.png” alt=“MVC-B” title="" /></a></p>

<p>通过一些约定规则对Client与Server中的MVC各部分相连接,让应用在网络中处理更灵活。因为有的客户端的硬配置并不能很好地支持MVC,那么则需要服务器来完成。相对的,如果由服务器来完成所有的MVC处理工作,将会耗费大量的资源来做不必要的工作,因为有大部分的客户端都能自己完成这些工作。 而MVC-B的核心价值就在于让MVC架构在客户端和服务器之间灵活地迁移,让客户端充分发挥其作用,让服务器腾出更多的资源来完成其他工作。</p>

<hr/>

<p>我们来看一下如何使用<a href=“http://web.jit.im/”>webjs</a>来实现MVC-B架构:</p>

<ol> <li>我们先来写一个用于识别客户端信息的中间件</li> </ol>

<p>我们只需要简单地对客户端发送的用户代理字符串(User-Agent String),进行分析,把我们所需要的信息获取就可以了。 我们需要获取以下信息: 浏览器名称,呈现引擎名称,浏览器版本,呈现引擎版本以及移动设备版本。</p>

<pre><code>… if (ua.indexOf(‘Chrome/’) !== -1) { … } … </code></pre>

<p>好的,我们已经好了一个用于简单识别客户端信息的<a href=“https://gist.github.com/raw/1735436/0ce45a627e9b6bb3b4ed15a4a95c167d585e7e55/clientinfo.js”>中间件</a>:</p>

<pre><code>var clientinfo = require(__dirname + ‘/clientinfo.js’); web.use(clientinfo()); web.get(‘info’, function (req, res) { res.render(‘info’, req.clientinfo); }); </code></pre>

<p>我们看一下效果: <img src=“http://i.minus.com/ib0xeTjXJHBBek.png” alt=“Client info” title="" /></p>

<p>大家可以看见我们这个中间件会给浏览器做出一个从1至4的评分,我们可以通过这个标准来进行权重开发。</p>

<p>恩,今天我们就先到这里,下一篇继续,谢谢阅读~</p>

4 回复

小问亲,求更多实例应用,求续集

而MVC-B的核心价值就在于让MVC架构在客户端和服务器之间灵活地迁移,让客户端充分发挥其作用,让服务器腾出更多的资源来完成其他工作。

期待续集

这样的中间件,为什么不放在客户端呢?? 即使服务端需要客户端ua信息,让客户端直接发送处理好的信息就是了~~
否则却让我觉得,客户端想知道自己的ua信息,还要把请求发到服务端,让服务端处理了告诉自己,这就是文中LZ提到C/S架构之前的情况啊~
而事实是,客户端肯定知道自己的ua信息,这样的处理请求没必要发往服务端,如果需要使用自己处理就是了,也就是后来提出的C/S架构优势–充分发挥客户端PC的处理能力!
纯对LZ给的这个例子发表下自己看法,关于LZ要阐述的MVC-B架构,期待LZ续集!!

哎,cnodejs.org 真是没什么要文章呀。

回到顶部