Html从魔鬼拼图到行云流水

最新推荐文章于 2024-07-15 17:08:53 发布

weixin_34124577

最新推荐文章于 2024-07-15 17:08:53 发布

阅读量87

点赞数

文章标签：测试前端 javascript ViewUI

原文链接：https://my.oschina.net/wonner/blog/108617

版权

<h4>遥远的只有Html的年代</h4> 虽然Html不是和互联网同时诞生，但它们的紧密关系，让人几乎忽略了没有Html历史。Html有如此强的生命力力，应用如此之广，自从W3C宣布Html已死之后，却又在别处开了花，Html 5的强力发展却又反过来逼得W3C接受又继续发展。 然而，自Html设计之初，就主要针对静态内容的表现，这也注定其天生缺陷。互联网已从起初的内容表现，发展到应用的平台，在应用程度领域上已经足以与桌面程序抗衡---还在用Foxmail收邮件吗？甚至原本的內容发布应用本身，也趋于釆取动态生成的方式来实现，看看有多少CMS系统就清楚了。 然而，Html的天生缺陷，面向内容而不是面向逻辑，让我们生成Html的工作成了魔鬼拼图，用户在前台看到的完美梦幻界面，在后台却是成千上万的魔幻碎片。 是的，一个魔一个梦，一字之异，差之千里。 <h4>CSS和Javascript/jQuery的文明时代</h4> 所幸，业界一直致力变革。先期CSS 1，2，3，Javascript特别是JQuery，分别贡献于样式和行为的分离，这些都是碎片组成部分。因而，HTML可以只关注于内容及其结构，纯粹化的很重要一部分。这里不作详敘，因为网络上有太多的文章和论敘，尽管很多的网站建设，连这些技术都没应用好。 这里，我只想讲讲后CSS，jQuery时代的故事。 那怕只作内容的呈现，仍有很多的机会产生碎片。不变的内容和动态内容交替出现，前者直接用HTML代码，后者常常需要后台代码，变量的支持。两者是完全不同的领域范围，整合在一起，自然造成了不可理解的碎片拼盘。就如同进程一样，切换进程是成本最高的开销，碎片的本质就是逻辑上下文的切换，无论开发者的书写还是阅读理解，都是高成本，最终成为开发壁磊。 <h4>Web Form统一语境，前进一大步</h4> 解决方䅁就是，统一语境，至少大量减少切换频。 Asp.Net Web Form其实是一个不错的尝试，HTML标记对象化，把不变内容HTML标记，统一到后台语境。一个个HTML标记都成为后台对象，变量填充自然在后台，以对象赋值的方式，统一的实施，跨越了语境的切换。这也是Web Form命名的含义，让网页像桌面一样一致编程。应该，说微软的这个技术方向还是比较成功的。至少，我就是在这个环境下，得进入Web行业，反过来，从后台的模型学习前台DOM。 然而，Web Form的败笔却在架构方面，对象化HTML后，后台的处理反过来，全都以页面为中心概念，妄图忽略前端与后端的时间差(服务端控件?)，真的把互联网当成了本地高速网了? MVC ASP MVC呼之即出，从1到3，4也在测试当中，发展相当之快。虽然，是后台的架构改变，对前端的影响也是巨大的。MVC结构不能再延用Web Form了，那是鸡同鸭讲。 <h4>MVC又引入了碎片，后退一小步</h4> 历史总在绕圏圈，我们又回到ASP时代，用嵌入的变量拼凑HTML代码。 <div class="cnblogs_code"> <pre><span><%=Value%></span></pre> </div>

从一片空白开始，重新出发。很快，微软推出了HtmlHelper，一点一点，把碎片重新粘合起来。MVC3又推出了Razor视图引擎，让视图真正成为模板，当然后面仍有一个类在支持视图，但提供了更大的灵活性支持扩展，前文有详叙。而且，Razor在语法上也进一步减少碎片，不用结束符，不用加尖括号，智能识别环境变化，是HTML模式还是后台模式? 所有这些是解决本文开始所描述的碎片问题，代码碎片和思维的碎片。

<h4>最后的救世主Fluent Html</h4>

完了?等等，所有这些似乎只是再为我们最后的英雄出场作准备。真正让Html行云流水，<a href="http://lunaverse.wordpress.com/category/ms-mvc/fluenthtml/">Fluent Html</a>.

http://lunaverse.wordpress.com/category/ms-mvc/fluenthtml/ 看看生成表格的一段代码吧，一段代码胜过一千张图。

<div class="cnblogs_code"> <pre>@model IEnumerable<ExamDTO> @this.Grid(Model).Columns(c=> { c.For(x => x.Code).Named("代码"); c.For(x => x.Name).Named("名称"); c.For(x=>"删除").Named("操作"); }).Empty("没有记录！")</pre> </div>

转载于:https://my.oschina.net/wonner/blog/108617