UI分离引擎的设想

简介: 对于前端页面和后端代码的分离,ASP.NET WEBFORM和ASP.NET MVC都在不同方面做了努力。 在这里提出一些自己初步的设想,只是初步的设想,对各种质量特性并没有经过验证,就不放首页了。   我们的目的是:   1)产品或美工负责页面布局、样式以及基本的交互行为(不依赖业务逻辑的交互)。

对于前端页面和后端代码的分离,ASP.NET WEBFORM和ASP.NET MVC都在不同方面做了努力。

在这里提出一些自己初步的设想,只是初步的设想,对各种质量特性并没有经过验证,就不放首页了。

 

我们的目的是:

 

1)产品或美工负责页面布局、样式以及基本的交互行为(不依赖业务逻辑的交互)。

2)开发人员只负责数据的填充。

3)产品提供的html不需要引入代码进行二次包装,直接使用。

 

您可以觉得这就是模板的方式,模板的方式可以解决,但主要的问题是:

 

1)需要产品或美工熟悉标记。

2)不太能实现根据动态的逻辑来实现不同的数据呈现。

 

能不能反过来,产品在给出html+css+javascript之后,我们的开发人员只负责填充数据或是根据业务逻辑填充不同的数据?

 

我的设想如下:

1) 产品提供的html+css+javascript直接放在目录下用。

2) 由一个Handler来处理所有请求,比如list.shml,然后找到目录(配置为不可以直接访问)下的html。

3) 加载html到缓存中,解析DOM。

4) 开发人员对每一个页面提供一个cs文件,实现数据填充。

怎么进行数据填充呢?首先从数据库加载要填充的数据,然后指定数据填充到哪里。

比如 list 已经是一个产品集合,调用框架类似 list.Fill(func, func) 的方法填充数据,第一个参数传入一个方法指定填充的数据格式,比如p => p.Name,后面一个通过jquery选择器指定要填充的对象。框架维护要渲染的数据以及jquery代码两个数据集合,分别渲染到页面上。

也就是页面由三个部分构成:html模板 + json数据 + jquery代码。开发人员用c#代码写jquery代码和获取数据的代码,然后交给框架去把数据和填充行为放到页面上。

 

甚至,可以在项目中制作一个代码生成工具,每次编译自动根据html代码生成其中所有的id和class名等用于jquery定位,这样代码中选取器也不需要手动写,可以在编译的时候发现可能存在的javascript问题。

对于这种模式,还可以反过来,可以把html文件放在独立的服务器上,自动ajax请求shtml文件获取数据和填充脚本,然后执行脚本进行数据异步填充。

这样的话,产品写html/css/jquery,开发写c#的jquery和数据访问,大家甚至独自维护自己的静态和动态服务器。

 

您可能要说这不就相当于全ajax的页面吗,其实这么做的好处是,开发人员可以直接写了c#的数据访问代码后又直接写c#的js代码,由框架确保了这些脚本和数据的呈现,可以利用大量自动提示的特性,不会出现前后台不一致的现象(不需要根据json的格式写客户端的脚本文件,只需要在服务端根据c#对象的格式写代码,这和asp.net的控件方式有什么区别?其实理论上来说相当于dom+jquery版的控件操作和访问,好处是可以直接使用html)。

作者: lovecindywang
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
相关文章
|
存储 IDE 测试技术
【Airtest】UI自动化测试的数据分离实践
【Airtest】UI自动化测试的数据分离实践
243 0
|
前端开发 测试技术 C#
WPF MVVM UI分离之《交互与数据分离》
原文:WPF MVVM UI分离之《交互与数据分离》 在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架。 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下面的问题: 删除操作,假如需要先执行一部分数据的处理,然后删除界面列表中的子项,之后再执行其它数据的处理。
1059 0
|
前端开发 测试技术 C#
WPF MVVM UI分离之《交互与数据分离》
在我们使用WPF过程中,不可避免并且超级喜欢使用MVVM框架。 那么,使用MVVM的出发点是视觉与业务逻辑分离,即UI与数据分离 诸如下面的问题: 删除操作,假如需要先执行一部分数据的处理,然后删除界面列表中的子项,之后再执行其它数据的处理。
1511 0
|
JavaScript 前端开发
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.10 技巧:添加和分离元素
离元素除了把元素移至不同的位置外,还有一个重要的使用场景是需要对HTML树执行大量的操作。先分离元素再操作它时需要的系统资源较少。值得注意的是,detach()函数会保留所有和分离元素关联的jQuery数据(包括函数和对象)。
1380 0
|
缓存 JavaScript 前端开发
面向UI编程:ui.js 1.1 使用观察者模式完成组件之间数据流转,彻底分离组件之间的耦合,完成组件的高内聚
开头想明确一些概念,因为有些概念不明确会导致很多问题,比如你写这个框架为什么不去解决啥啥啥的问题,哎,心累。     什么是框架?   百度的解释:框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架。
1218 0
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
13 0
|
1月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
28 0
|
1月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
21 0
|
1月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
20 0

热门文章

最新文章