名词解释:
桐花万里丹山路,雏凤清于老凤声——唐·李商隐《韩冬郎既席为诗相送因成二绝》
作为一种有别传统的前端编程方法,雏风名之。
面向数据的编程方法,避开繁琐的ui代码,直接针对前端数据模型编程,你的程序就能更加清晰简单。清音名之。
从实例开始:
避免过于枯燥的陈述,我们从实例开始,我们以百度 WebIM分组管理为例。
这里面,我们需要对用户分组列表执行:添加、删除、修改、保存、取消、排序等六种功能。
这算是一个比较常见的需求,那么,我们通常在前段实现这种功能,一般如何设计?多少代码?多长时间?
思考时间............................
===================================================
好了现在我们来展示一中简单的实现方式:
var data = {
"list" : [
{"id" : 1,"name" : "我的分组1"},
{"id" : 2,"name" : "我的分组2"},
{"id" : 3,"name" : "我的分组3"},
{"id" : 4,"name" : "我的分组4"},
{"id" : 5,"name" : "我的分组5"},
{"id" : 6,"name" : "我的分组6"} ]
}
var action = {
sort:function(list, inc){
$("sort").className = inc?"down":"up";
list.sort(function(a, b){
return (inc?1:-1)*a.name.localeCompare(b.name);
});
render(data);
},
create : function(name){
data.list.push({id: +new Date(),name: name});
render(data);
},
edit : function(id){
each(data.list, function(value, i){
data.list[i].state = value.id == id ? "edit" : "normal";
});
render(data);
},
del : function(id){
each(data.list, function(value, i){
if(value.id == id){
data.list.splice(i,1);
}
})
render(data);
},
save : function(id){
each(data.list, function(value, i){
if(value.id == id){
value.name = $("g_" + id).value;
value.state = "normal";
}
});
render(data);
},
cancel : function(id){
each(data.list, function(value, i){
data.list[i].state = "normal";
});
render(data);
}
}
function $(id){
return document.getElementById(id);
}
function each(obj, fn){
for (var i = 0; i < obj.length; i++) {
fn.call(obj[i], obj[i], i);
}
}
function render(data){
$("container").innerHTML = teamList(data);
}
模板代码:
<c:client id="teamList">
<c:for items="${list}" var="item">
<div class="${item.state}">
<c:if test="${item.state == 'edit'}">
<div class="cell1">
<input id="g_${item.id}" value="${item.name}" />
</div>
<div class="cell2">
<button onclick="action.submit(${item.id})">
提交
</button>
</div>
<div class="cell3">
<button onclick="action.cancel(${item.id})">
取消
</button>
</div>
</c:if>
<c:else>
<div class="cell1">${item.name}</div>
<div class="cell2">
<img src="images/edit.gif"
onclick="action.edit(${item.id})" />
</div>
<div class="cell3">
<img src="images/delete.gif"
onclick="action.del(${item.id})" />
</div>
</c:else>
</div>
</c:for>
</c:client>
以传统的编程方法不同,我们没有直接操作html,或者说文档对象模型,而是抽象出一个更加简单的数据模型--一个JavaScript 数组对象。
我们所有的操作都是从这个简单的原始数据开始,数据模型被修改后,调用模板渲染函数,重新前端局部刷新展现UI。操作即可完成。
这种方法能给我们简化多少代码呢?大家可以去翻翻那些比较出名的JavaScript图书,里面通常会花一个小节的篇幅去讲解一个话题,那就是表格排序。
对照这里的表格排序,7行代码,需要一个章节去解释吗?
核心思想:
* 一切从源头开始
传统的编程方法有一个问题,那就是他修改的对象是文档对象模型,但是,当您的程序足够复杂的时候,这种文档对象模型往往不够简单,有太多冗余,或者夹杂着
太多的静态展示逻辑,我们控制它非常麻烦。好了,我们没有必要迁就文档对象模型,我们要设计更加简单的没有冗余的前端模型。
一切从源头开始,不仅是为了操作上更加简单,更重要的一点是,避免数据不一致和错误累加的危害。
如果是传统的文档数据模型,不仅他本身带有大量冗余。我们前段操作代码也容易有大量的冗余。如上例,传统的方法中,初次展现的分组列表和后来编辑,添加的
分组,可能生成方法都不一样,分布在不同的代码中,一单涉及到展现风格的修改,都得多次同步编辑,这在编程上的大忌。而我们上面介绍的方法中,我们只有一
处展现逻辑,那就是完整覆盖。
仍外,传统方法是对UI做增量的修改操作,但是加加减减的多了,难免不出点小问题,而且,这种问题只能被累加起来,但是在我们新的编程方法中,因为我们每次都是整体覆盖,这样就不会有错误累加的问题了。
* 表现层没有上下文
既然我们有自己的数据模型,就不要随便在文档对象模型上保留任何状态了,任何修改,都反映到数据模型中去吧,状态改变了,同步数据模型,再从数据模型开始,完全覆盖前端展示。
性能的问题
上例中的联系人分组管理,能承受多大的数据呢?
我们得先解释一下我们的统计方法。
人的视觉停留时间是0.1秒,或者说100毫秒。也就是说,100毫秒间隔人类是无法感知的。而我们的网页操作。是一种延迟,不是间隔,人类能感知的时间延迟有多少呢?我们没有权威的数据,一般认为是300毫秒。300毫秒内的延迟,我们是无法感知的。
那么300毫秒内,我们能渲染多少数据呢?IE8,FF3(不打开Firebug,打开firebug能渲染400次)上能支持1000条左右,Chrome上能支持3000次左右。
另外,在某些情况下,面向数据的编程方法,性能可能还具有一定的优势。比如,百度工具栏widget列表的设计中,我们一次装载了较多的widget数
据,但是我们每次只展示一小部分,这样,面向数据边车呢个方法中DOM节点明显比传统方式少一个数量级。要知道,DOM节点是非常消耗内存的。。。。
说点不足
动画,对,我们不应该采用这种方式做网页动画,因为动画的刷性要求太高,模板这种重头开始的方式不再适用。
所以,真要使用js动画效果的时候,你还是应脚本库去辅助。
同时提一点个人看法,用户体验的提高并不是动画这样吸引 眼球的效果。更多考虑应该是让用户操作更方便,不要被扣分。
如何体验?
* 运行JSide调试服务器。
http://www.xidea.org/webstart/JSide.jnlp
一个webstart程序,JSide 启动之后会在窗口右侧出现一个彩色的浮层(无边框窗口,如果是Java6u10+,这个窗口会透明显示)
* 下载测试程序并解压。
http://lite.googlecode.com/files/Example-20091219.zip
下载之后随便解压缩到一个目录里面吧。
* 设置调试网站目录。
测试服务器就是为了测试方便而设计的,你只要把刚才解压缩的目标目录拖放到JSide浮层上,测试服务器自动切换网站目录。
* 查看测试程序。
每次切换网站目录后,程序会提示您打开网站首页,你打开就是了。首页默认是一个文件列表。选择你看着顺眼的文件点击吧(*.s.js是一种用JavaScript编写的服务端小程序,可以在JSide测试服务器上运行)
* 修改程序代码。
在JSide浮层上右键,浏览文件,修改吧。
- 大小: 23 KB
分享到:
相关推荐
语音处理---检测语音和清音 语音处理 - 使用语音信号的过零率和能量检测浊音和清音 示例:原始演讲 浊音 清音
数字语音处理,包括参数法求频谱和直接法,还有加汉明窗的帧提取,并求清音和浊音
(Sublime Text 3) 3.3103 流风清音中文优化版,可支持32位和64位。内含多个插件,可一件注册生成右键快捷方式。
行业资料-电子功用-可屏蔽电磁干扰的高清音视频连接器
浊音/清音判定用于控制接收端激励函数的形式,一般说来,浊音比较好表示,清音在本质上是随机的,鉴于这个特点,时域语音信号的零交点计数在浊音/清音分类上有很大作用。混和的浊音和清音激励已经研究出了一些成果。...
用matlab实现对语音信号的短时分析,包括清音和浊音的判决,基音周期的估计,实验报告。
可以直接用于MATLAB中的.txt语音片段,清音片段
日语学习者必备望采纳
提取短时能量,短时过零率,清音/浊音自相关函数
端点检测算法实现,使用短时能量和过零率区分浊音或清音,从而识别语音的开始与结束。
分别将一帧清音信号与一帧浊音信号进行自相关,并比较结果,以作检测基音周期。
我自己的显卡 是公版 r9 390x 刚买的是后动不动就94度电脑自动关机或者花屏,蓝屏等情况,开游戏风扇转速高还是温度也高,后来我自己想办法吧核心频率调整950hz,显卡风扇开游戏的时候的转速高达80% 显卡稳定了 不...
日语50音表 罗马字表 清音 浊音 半浊音 中文发音
日语清音五十音图.doc
中考语文满分作文传递历史的清音
日语清音表,给你提供准确好记忆的方法······相信对日语起初学习有帮助·····
基于matlab软件,的语音清音帧和浊音帧进行线性分析。
针对语音增强算法中传统的小波阈值法的局限性,提出一种基于可调Q-...对含有高斯白噪声和有色噪声的语音进行仿真实验,结果表明:与目前许多经典的去噪方法相比,该方法在去噪效果和提高语音可懂度方面均有一定的改善。
首先,针对语音清音部分往往包含有许多类似噪声的高频成分的特点,对其直接进行小波阈值去噪很可能误除了这些高频成分,造成失真,因此有必要先对语音进行清浊音分离。其次,通过对不同小波函数、阈值选取规则以及...
(1)使用录音软件或者Matab函数,分别采集一段浊音和清音语音信号(是 ...(3)利用上述基音提取的三种方法(任选两种方法)的编程流程图(图6-1、 图6-2和图6-3)编制浊音语音基音提取的matab程序。