html从魔鬼拼图到行云流水

原创 2012年03月28日 04:55:40
虽然Html不是和互联网同时诞生,但如今它们的紧密关系,让人几乎一忽略了这段历史。Html有如此强的生命力力,应用如此之广,自从W3C宣布H已死之后,却又在别处开了花,Html 5的发展却又反过来,逼得W3C接受又继续发展。
然 后,自Html设计之出,就主要针对静态内容的表现,这也注定其天生缺陷。互联网已从起初的内容表现,发展到应用的平台,在应用程度领域上已经足以与桌面 程序抗衡一一你还在用Foxmail收邮件吗?甚至原本的內容发布应用本身,也趋于釆取动态生成的方式来实现,看看有多少CMS系统就清楚了。
然而,Html的天生缺陷,面向内容而不是面向逻辑,让我们生成Html的工作成了魔鬼拼图,用户在前台看到的完美梦幻界面,在后台却是成千上万的魔幻碎片。

是的,一个魔一个梦,一字之异,差之千里。

所 幸,业界一直致力变革。先期CSS 1,2,3,Javascript特别是JQuery,分别贡献于样式和行为的分离,这些都是碎片组成部分。因 而,HTML可以只关注于内容及其结构,纯粹化的很重要一部分。这里不作详敘,因为网络上有太多的文章和论敘,尽管很多的网站建设,连这些技术都没 应用好。
这里,我只想讲讲后CSS,jQuery时代的故事。
那怕只作内容的呈现,仍有很多的机会产生碎片。不变的内容和变化或说动态内 容交替出现,前者直接用HTMLTML代码,后者常常需要后台代码,变量的支持。两者是完全不同的领域范围,整合在一起,自然造成了不可理解的碎片拼盘。 就如同进程一样,切换进程是成本最高的开销,碎片的本质就是逻辑上下文的切换,无论开发者的书写还是阅读理解,都是高成本,最终成为开发壁磊。

解决方䅁就是,统一语境,至少大量减少切换频。


Asp,Net Web Form就是一个不错的尝试,HTML标记对象化,把不变内容HTML标记,统一到后台语境。一个个HTML标记都成为后台对象,变量填充自然在后台,以对象赋值的方式,统一的实施,跨越了语境的切换。这也是Web Form命名的含义,让网页像桌面一样一致编程。应该,说微软的这个技术方向还是比较成功的。至少,我就是在这个环境下,得进入Web行业,反过来,从后台的模型学习HTML前台DOM。
然而,Web Form的败笔却在架构方面,对象化HTML后,后台的处理反过来,全都以页面为中心概念,妄图忽略前端与后端的时间差(服务端控件?),真的把互联网当成了本地高速网了?

ASP MVC呼之即出,从1到3,4也在测试当中,发展相当之快。虽然,是后台的架构改变,对前端的影响也是巨大的。MVC结构不能再延用Web Form了,那是鸡同鸭讲。

历史总在绕圏圈,我们又回到ASP时代,用嵌入的变量拼凑HTML代码。

<span><%=Value%></span>

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

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


@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("没有记录!")



Entanglement Web App(六边拼图游戏)

对常常面对电脑工作的朋友们来说,一款能够让你们放松的游戏是必不可少的,今天为大家推荐一款度过休闲时光的小游戏。纠缠是gopherwood工作室为您做的六边拼图的益智游戏,试着使最长的路成为可能。旋转和...

拼图-- 中国版的Bootstrap

中国版的Bootstrap,优秀的跨屏响应式布局前端开发框架(CSS框架),国内前端框架先驱及领导者,能自动适应电脑、平板、手机等设备,让web前端开发更简单、快速、便捷。 如下附图是我通过...

一款html拼图游戏详解

本文是爱编程原创翻译,转载请看清文末的转载要求,谢谢合作! 游戏介绍 这篇文章是献给web游戏开发者用简单的开发工具开发一款游戏。此文介绍了用html、css、javascript只需...
  • syming
  • syming
  • 2014年09月10日 11:37
  • 441

速度挑战 - 2小时完成HTML5拼图小游戏

初学lufylegend.js之日,我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏,还写了篇博文来炫耀一下:HTML5小游戏《智力大拼图》发布,挑战你的思维风暴。不过当时初学游...

HTML5滑动的拼图游戏

摘要: HTML5有许多功能特性可以把多媒体整合到网页中。使用canvas元素可以在这个空白的画板上填充线条,载入图片文件,甚至动画效果。在这篇文章中,我将做一个滑动拼图的游戏用来展示HTML5 ca...

atitit.html5 拼图游戏的解决之道.

atitit.html5 拼图游戏的解决之道.   1. 拼图游戏的操作(点击法and 拖动法) 1 1. 支持键盘上、下、左、右键移动; 1 2. 支持点击空白模块中的上下左右箭头移动;...
  • attilax
  • attilax
  • 2014年07月05日 16:05
  • 2915

HTML5 App实战(6):拼图游戏

最近喜欢上玩拼图游戏,仔细想了一下,发现用“画app吧”开发拼图游戏其实非常简单。这里还是以FirefoxOS为例开发一个美女拼图游戏,“画app吧”是HTML5 app开发工具,所以这个拼图游戏是可...
  • absurd
  • absurd
  • 2013年09月06日 09:23
  • 4948

速度挑战 - 2小时完成HTML5拼图小游戏

初学lufylegend.js之日,我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏,还写了篇博文来炫耀一下:HTML5小游戏《智力大拼图》发布,挑战你的思维风暴。不过当时初学游...

速度挑战 - 2小时完成HTML5拼图小游戏

初学lufylegend.js之日,我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏,还写了篇博文来炫耀一下:HTML5小游戏《智力大拼图》发布,挑战你的思维风暴。不过当时初学游...

HTML5 九宫格拼图游戏

设计思路 根据上面的效果图来观察思考,我们要做的就是设置一个大 DIV 用来包裹里面的小 DIV,然后在里面设置 8 个小 DIV,从 1 开始给他们编号。右边设置两个按钮,点击开始的时候开始计...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html从魔鬼拼图到行云流水
举报原因:
原因补充:

(最多只允许输入30个字)