大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)

时间:2023-12-18 22:06:38

一、拉近我们的距离

我想,很多人会问,如今IE6还占据颇多份额的中国,html5、css3是否还很遥远?我会很直接告诉他们:其实就在你的眼前.我们来看两个图:

大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)

                            (图一:2013 4月左右,全球浏览器情况)

分析:全球浏览器中6.22+23.08=40%的浏览器不支持html5+css3

大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)

                           (图二:国内浏览器份额图)

分析:大概有60%的浏览器在国内不支持html5+css3

这是否就意味着,我们需要等待?我在给大家看一幅图,大家或许就知道出路在哪里了.

大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)

说明:用户再次用小于IE9的IE允许时,直接启动平台工具(本质上为webkit,谷歌内核;启动原理activex)

问题解决了,可能你会说不完美,因为需要下载,但你回头想想会为你节省很多成本.而且可以体验到html5、css3前沿技术的绝对优势.

二、如何解耦

1)提出现行问题

  目前而言ASP.NET的主流开发模式:webform、mvc.而如前我所论述的,似乎都不尽完美?真心用过MVC的人就知道如下的情况:

  虽然MVC让开发从原来的 webform中解脱出来,解决了:层次清晰逻辑、UI的隔离、服务端控件的一些瑕疵等诸多问题,但是MVC的弱点同时也存在.在MVC中我们的Model时常变动,我们必须手动创建Model类和Model的变动修改.同时相对于Model的Action控制操作,也需要一定程度上的变动.(因实体框架等生成的实体(Model)是无法满足现行逻辑需求的).

  其次因为实际开发中没有银弹,只有平衡点.V,C之间的逻辑紧密,然而实际的前台实现和效果需求是变化莫测的, 更加导致美工决定VC的局面,从而VC的重用性很低很低.如果一个页面存在多个视图,那么其逻辑就相对不易(我们需要维护多个VC组,我们需要处理VC组 的一定逻辑次序,构造不同的Model).

2)解决方案

为了解决上述问题,我将再后续文章中详细讲解如何利用angularjs解耦、如何利用新的设计模式(jpvl)来解耦.

  这里我简单介绍一下两者存在的意义和原理;

1)angularjs

  是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好。数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定是的代码更少,你可以专注于你的应用。

特点一:前端的解耦能力
  当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View。这是一个手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。
特点二:模板
  在AngularJS中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容。
  HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。
  我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化,不是字符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令,甚至开发可重用的组件。
特性三:MVC
特性四:依赖注入(Dependency Injection,即DI)
特性五:Directives(指令)

2)JPVL设计模式

大话ASP.NET开发(第一章 html5+css3+解耦问题的探讨)

1)JVPL(json-视图-处理器--加载器),如上图所示.如果我要视图重用我只要载入所需视图和加载器即可.var 新的视图=get("加载器","视图"); 且Moon.net架构会接着脚本引擎帮助我们生成后台所需代码.

2)整个JVPL模式建立建立在Ajax的机制上,它具有Ajax所有的优缺点.(但我认为Ajax的优点>>缺点,且我们可以
通过手段解决这些缺点).正如有人说Ajax不安全,因为暴露了系统服务接口,这完全废话,难道纯的form提交就没有暴露?这些都是门外汉说的话,因为
根本的权限机制都没有建立.接着说,正如前面文章提到的视图数据的加载.如果我前台的逻辑变动系统的逻辑变动,这是Moon.Web会辅助我们生产新的后台代码. 如果一个页面存在多个视图,那么这多个视图的加载,我们通过加载器直接调度即可.因为脚本引擎的存在,它会帮助我们生成后台代码和数据分配及数据转
发.Moon.NET中最为精华的部分就是脚本引擎.它也是我们提高开发效率的关键.

3)在我们的开发中,前端展现的标准是由策划及美工定的,所以作为一个开发者还是架构师必须紧密结合实际进行架构或开发.这样才能提高开发效率.
Moon.Web主要对复杂的UI控件诸如:编辑器,分页,异步文件上传...等控件进行了封装且提供了美工可控制接口.因为MVC的控件方法也是一样
的.