探讨JS表现与数据分离_脚本技术_前端技术
您的位置： &
& 详细内容
首先，当时我简历是抄的，里面有一句&对表现与数据分离有一定理解&，然后面试官就针对这点开问了
PS：尼玛，那是抄的，我哪里知道他是干神马的......
为了帮助我展开思维，面试官出了一道题：
他有一个国家列表，现在要将国家列表放到A中，然后B可以由A选择，也可以有总列表选择 但是B中添加后，若是A中没有要动态为A增加这项。
问题出来了，我现在一看就知道面试官想问什么了......当时其实没有理解到啦......
现在来看，说这道题与表现与数据分离有关是没有问题的，却不一定让人很好的产生联想，所以这个问题的答案，还是需要各位继续挖掘
针对这个问题其实有几个实现方案，就算是初级入门的朋友也是能做的，但是要好好的回答这个题我们需要看到后面隐藏的意图
比如，现在是操作B时候需要A与之联动，如果现在出了一个C或者D呢？？？
var CountryList = function(opts) {
&&& this.list = opts.list
&&& this._events = {};
&&& this.root = opts.el
$('body');
&&& if (opts.events) {
&&&&&&& for (var k in opts.events) this.on(k, opts.events[k]);
&&& this.render();
&&& this.bindEvent();
&&& this.exec('onLoad')
CountryList.prototype = {
&&& render: function() {
&&&&&&& for (var i = 0,
&&&&&&& len = this.list. i & i++) {
&&&&&&&&&&& item = $('&span class=&item& id=&' + i + '&&' + this.list[i] + '&/span&');
&&&&&&&&&&& this.root.append(item);
&&& bindEvent: function() {
&&& add: function(name) {
&&&&&&& var item = $('&span class=&item& id=&' + this.list.length + '&&' + name + '&/span&');
&&&&&&& this.list.push(name);
&&&&&&& this.root.append(item);
&&&&&&& this.exec('onAdd', name, item);
&&& remove: function(name) {
&&&&&&& var index = this.list.indexOf(name);
&&&&&&& if (index != -1) {
&&&&&&&&&&& this.list.splice(index, 1);
&&&&&&&&&&& var item = this.root.find('#' + index);
&&&&&&&&&&& item.remove();
&&&&&&& this.exec('onRemove', name, item);
&&& on: function(type, fn) {
&&&&&&& if (!this._events[type]) {
&&&&&&&&&&& this._events[type] = [];
&&&&&&& this._events[type].push(fn);
&&& exec: function(type) {
&&&&&&& if (!this._events[type]) {
&&&&&&&&&&&
&&&&&&& var i = 0,
&&&&&&& l = this._events[type].
&&&&&&& if (!l) {
&&&&&&&&&&&
&&&&&&& var args = slice.call(arguments, 1);
&&&&&&& for (; i & i++) {
&&&&&&&&&&& this._events[type][i].apply(this, args);
&&& exist: function (name) {
&&&&&&& return this.list.indexOf(name) != -1;
因为本身比较晚了，加之今天工作量比较大，现在头脑有点浆糊，所以写的代码各位看看就好，不必认真，这个代码有何意义，有与表现与数据分离有什么关系呢？
其实这个代码本身就是实现了一个简单的队列类，在其内部有自建的事件机制，分别在三个点可以注册事件：
② 增加一项时
③ 删除一项时
于是，我就在几个点插入了自己的逻辑，我们特别来说一下b，我们为b注册了onload事件，并且onadd事件，在增加一项时会看看b中是否有，没有就增加了
这样做的话，我们就可以只关注b的数据了，而不必关心数据是拖过来，还是飞过来，还是爬过来了，我们这里的表现是什么呢？
什么是表现
我认为，表现就是增加数据的方式，这个题来说，是增加b项目的方式，我们题目中要求是&拖&，我嫌马上变成了&选&，这个增加数据的&表现&是多种多样的，比如说：
可以看到，我们在b中新增一项也会往a国家新增，这个也是一种&表现&
PS：不知道我这个样子理解表现是否正确
表现各种各样，但是各种各样的表现并不应该影响数据的维护，比如b国家居然增加了一项all国家没有的数据，难道all国家列表中不应该增加吗？
反过来说，我们a列表，b列表数据都最终来源于all，如果all的国家都被删除了那么ab国家的数据也是不应该存在了，而现在是ab，实际情况可能a-z
并且，数据消失的方法五花八门......
如果我们不是在数据上注册了事件的话，我们可能遇到以下情况：
① 拖的时候我们需要做相关逻辑准备
② 选的时候我们需要做相关逻辑
③ 增加b国家项目的方法变成使用select或者其他什么方法了，这个时候我们可能又要单独写逻辑了
所以我们现在要将各种&表现&给分离出来，只要操作了&数据&，比如增删，我就会执行不变的逻辑，数据处理的逻辑不以表现而变化
以上便是我对变现与数据分离的理解，理解若是有偏差，请各位指出
项目中可能
这种模式的编码可能用于哪些地方呢?
主要用于一对多的变化，特别是多个dom共享一个data，这个时候data变了，我们不同的dom也需要得到变化
比如，我现在ipad项目上有一个城市列表数据（在localstarage中），左右两边同时会有针对该数据的显示，这个时候我们就需要对该data做一次封装
并且在其改变时候注册事件，让哥哥dom（view）注册事件，在data改变时候注册了事件的dom就会得到变化，比如左边导致数据变化
数据一旦发生变化，会触发相关事件，然后右边dom的数据就变了，这样做非常好，通过数据联系左右两边，因为左右两边可能根本无法通讯
却因为数据联系起来了
其实关于这个的场景大同小异，另外一个常见的场景不那么明显，比如我们现在有一个商品，我们选择的数量不同，我们需要显示的折扣点不同，
同样我们的价钱当然会发生变化，这个变化看上去只是小区域的，但是总会有些莫名其妙的dom在页面的各个地方显示的相关的数据，一个不小心就会漏了
然后会有bug，这个情况下，就可以为个数相关的创建相关事件，当个数变化时候，其折扣相关的dom，价格相关的dom，或者其他会有一个联动关系
当然实际的业务可能比较复杂，是否应该这么干，值得这么干还得看情况
昨晚大概这个时候，我突然想到了半年多之前的这个问题，今天下班后继续对他进行了学习，时间不够学习程度有深有浅
若是文章有任何问题，请您留意，针对这一问题后面可能还会有更深一步的学习，接下来我们的重心还是nodejs，只不过最近时间蛮紧的。
( 14:05:08)
相关排行总榜君，已阅读到文档的结尾了呢~~
文档格式中
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
文档格式中内容与表现的分离与融合
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口后使用快捷导航没有帐号？
只需一步，快速开始
内容 结构 表现 行为的分离
UID128197在线时间 小时积分4332帖子离线17184 天注册时间
老话常谈的问题了，分离，从标准到国人重视那天起，就已经讨论了，但是停留在div+css xhtml+css 纯代码的分离，思想上流程上，到底如何分离？
看读读一篇老文章吧
一首古诗的分离
1.给你一首古诗，保存为毫无格式的一堆文字，你去理解它的内容，进行结构的处理。用word排版之后，他有了结构
2.这个结构其实包含了语义和表现
3.用html进行结构化，抛开一切的表现形式，只考虑语义
4.用CSS进行表现处理，包括html的默认表现，他拥有了视觉表现，这个表现体现出了结构化，也体现出了用户体验，用户体验中包含了交互的排版和视觉体验
5.如果加上行为，比如点击注释序号，缓缓跳转到注释内容。
再看看csszengarden
同样是上面的5个步骤，形成第一版本的csszengarden
而更多的模板提供者所做的工作是交互线稿+视觉设计。体现在网页上就是CSS
可以看出从编码角度来讲，
第一步，内容处理为结构，纯HTML的编写
第二步，结构处理为表现，纯CSS的编写
第三步，给表现加上行为。
从流程的角度来讲
第一步，策划文档
第二步，结构处理
第三步，交互设计(交互样式构建)
第四步，视觉设计(视觉样式构建)
第五步，样式构建
再逆向思维
如果没有csszengarden，设计师设计了几百张的设计稿，然后做成页面，HTML的结构会相同嘛？
类比，如果你的策划，给两个交互和视觉设计师处理，页面构建的结构会相同嘛？
答案是肯定的不会相同，为什么不会相同呢？
这是本次讨论的问题
UID385746在线时间 小时积分21帖子离线17184 天注册时间
新手上路, 积分 21, 距离下一级还需 29 积分
说是内容，其实觉得“数据”比较贴切。理想情况下，数据需要去重用，需要被格式化成不同的结构，再加以表现和行为。
目前来看，用XML来储存数据，然后 [XML + XSLT] -& (X)HTML，之后 [(X)HTML + CSS] -& Interface，最后 [Interface + JavaScript] -& Interactive Interface。但数据和结构相分离的工作可以放在后端，也可以放在前端（前端很好的例子就是Aether的Blog，呵呵，但目前搜索引擎方面是个问题），需要在具体项目中再做考虑。
CSSZenGarden的例子可以体现出CSS在表现层强大的能力，但是每个人对一篇文档的语义都会有不同理解，更别说ID和class的命名了。所以，在实际的项目中，结构上的完全统一应该是没办法实现的，毕竟人不是机器人。所以，觉得统一的是数据，数据可以用不同方式进行结构化之后变成不同的信息，因为最终用户需要的还是是信息。
UID128197在线时间 小时积分4332帖子离线17184 天注册时间
XML为中心的WEB架构，现在没有成型的案例，也就是说做不起来。
这个讨论不是什么学术啊，未来之类的猜测，只是针对现有条件，现有工作流来讨论的。
为什么那么多张的CSSzengarden设计稿进行页面制作的时候，结构代码不能一致，很简单，每个人的理解不同。
但是每个人的理解不同是因为什么:
1.每个人的理解都是对的，但是存在差异
2.有的人理解的不正确
一个团队，不能每个人的水平都相同，每个人的理解都正确，自然每个人的理解也不能一致。
那是不是现实就不能改变呢？
其实我想提出一个规范化的东东，把可能规范下来的东西规范下来，降低沟通成本，降低错误率，提高后来者的适应性等等
UID203435在线时间 小时积分2687帖子离线17184 天注册时间
银牌会员, 积分 2687, 距离下一级还需 313 积分
现在的确还只是代码分离
思想和流程都没有分离
UID350341在线时间 小时积分1191帖子离线17184 天注册时间
银牌会员, 积分 1191, 距离下一级还需 1809 积分
有人只是再炒作概念，其实并不是那么回事。我招聘 人员一般不要求这样，但是能懂得规范确实是个不小的进步
UID175344在线时间 小时积分2507帖子离线17184 天注册时间
银牌会员, 积分 2507, 距离下一级还需 493 积分
W3标准中对标签元素的语义已经解释的相当详细了,但是人对标准的理解是主观的,100个人看标准就有100份标准,只能用大量的示例来把大部分主观的标准缩小范围,真正要做到完全符合语义标准的时候,我又会想问,我们遵循的标准是否是正确的?我们遵循的又是谁的标准?
UID196345在线时间 小时积分194帖子离线17184 天注册时间
初级会员, 积分 194, 距离下一级还需 6 积分
技术是无止境的。。
哪个好用用哪个。。
UID285026在线时间 小时积分1999帖子离线17184 天注册时间
银牌会员, 积分 1999, 距离下一级还需 1001 积分
&每个人的理解都是对的，但是存在差异&
这就好比1题多解,简单快捷容易理解的方法是最好的.
&有的人理解的不正确&
这好比解题的过程是有问题的,答案却正确,这并不可取.
UID350411在线时间 小时积分1691帖子离线17184 天注册时间
银牌会员, 积分 1691, 距离下一级还需 1309 积分
举例说明那就更加好了
UID259068在线时间 小时积分551帖子离线17184 天注册时间
高级会员, 积分 551, 距离下一级还需 449 积分
行为层，表现层，结构层能够完完全全的分离？
UID33573在线时间 小时积分3607帖子离线17184 天注册时间
原帖由 [i]wondgergis 于
00:45 发表
行为层，表现层，结构层能够完完全全的分离？
原理上来说能做到。
不过个人感觉要做到这步需要的经验跟能力都要到达一个程度后才能正常去体现出来。
再做一个页面或者一个站的时候，应该从多方面去考虑，团队多次讨论，把握细节，理解页面中需要表达的含义。
UID226402在线时间 小时积分1299帖子离线17184 天注册时间
银牌会员, 积分 1299, 距离下一级还需 1701 积分
完完全全的分离成本会很高，有时候只是一个小细节，需要花多出几倍的精力来折腾。
举一个例子：
论坛下面的链接
清除 Cookies - 联系我们 - &&- Archiver&&- WAP
按照完全分离的思想，“-”不属于内容，我们应该这么写：
&li&&a href=&#&&清除 Cookies&/a&&/li&
&li&&a href=&#&&联系我们&/a&&/li&
&li&&a href=&#&&&/a&&/li&
&li&&a href=&#&&Archiver&/a&&/li&
&li&&a href=&#&&WAP&/a&&/li&
&a href=&#&&清除 Cookies&/a&&a href=&#&&联系我们&/a&&a href=&#&&&/a&&a href=&#&&Archiver&/a&&a href=&#&&WAP&/a&
中间的“-”可以用背景图来实现，这个大家应该都会做，这样一来，需要花的时间好精力肯定会比直接把“-”写到HTML里要多得多，如果项目时间紧张，相信很多人就直接偷工减料了。
UID338062在线时间 小时积分423帖子离线17184 天注册时间
中级会员, 积分 423, 距离下一级还需 77 积分
说实话，很多时候因为时间问题都理不了那么多了。。。
UID128197在线时间 小时积分4332帖子离线17184 天注册时间
回复 #13 marsidea 的帖子
- 符号是一种表现形式，但是又是一种数据格式，看交互怎么看待了，看做一个整体的尾部连接块，那就是存在意义的符号，就像你的电话号码
010-2321235 这样，这个 - 你就不能用背景吧
UID370034在线时间 小时积分375帖子离线17184 天注册时间
中级会员, 积分 375, 距离下一级还需 125 积分
原帖由 [i]marsidea 于
18:28 发表
完完全全的分离成本会很高，有时候只是一个小细节，需要花多出几倍的精力来折腾。
举一个例子：
论坛下面的链接
清除 Cookies - 联系我们 - &&- Archiver&&- WAP
按照完全分离的思想，“-” ...
呵呵，舍本逐末的做法了。
这个不是关键的功能 - -b
如果说这是美工设计的，或者是程序员添加的。完全可以跟他们商量一下 把 - 给去掉了。
这个是和人有关，和工作无关紧要的鸡毛蒜皮小事罢了。
吹毛求疵的做法，呵呵。
20/80法则，关键功能上不能有半点马虎了。
有时候做加法做累了，也可以做减法的了。不要死脑筋。
UID128197在线时间 小时积分4332帖子离线17184 天注册时间
说说我发起这个讨论的目的吧
1.流程优化
策划文档——结构——交互设计——视觉设计——CSS
这期间结构能否经得住考验？
1.结构的扩展性
2.交互线稿是否遵循WEB条件的规则
3.视觉设计是否考虑到WEB元素的呈现方式
需要一些约定俗成的规则，比如什么情况使用表格呈现，什么情况使用列表呈现。比如两列列表的序号如何排列
2.逆向思维下，由PSD到HTML有没有一些可以确定下来的结构规范。
csszengarden可以拥有N中表现和一个结构，是不是可以从视觉表现中抽象出某些视觉效果可以拥有固定的结构。
3.交互稿使用HTML的方式去呈现的优劣
1）效率会不会比图形的低
2）传达的交互理念，html是不是比html更容易传递，还可以避免图形化的交互稿不遵循WEB规则的情况
呵呵，是最近的一些零零散散的想法汇总的。
UID51676在线时间 小时积分11682帖子离线17184 天注册时间
回复 #13 marsidea 的帖子
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&head&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&title&任何支持CSS2的列表样式&/title&
&style type=&text/css&&
li{
& & & & display:
}
li+li:before{
& & & & content:&- &;
}
&/style&
&/head&
&body&
&ul&
&li&&a href=&#&&清除 Cookies&/a&&/li&
&li&&a href=&#&&联系我们&/a&&/li&
&li&&a href=&#&&&/a&&/li&
&li&&a href=&#&&Archiver&/a&&/li&
&li&&a href=&#&&WAP&/a&&/li&
&/ul&
&/body&
&/html&
复制代码
我没看出这样要花多得多的精力，并且在不久的将来（IE版本强制更新），相信你也会很愉快的这么写。
至于直接把“-”写到HTML里，greengnn阐明了一些基本逻辑，你也可以参考下[url=http://w3.org/]W3[url]的主导航。
我不否认现实的不如意——IE系列长时间的不思进取在某种程度上的延缓了WEB技术和先进思想的长足发展。这就像工作和生活中的种种不如意——但这些永远不应该成为影响自己做积极思考和正确判断的任何理由。
UID250085在线时间 小时积分2829帖子离线17184 天注册时间
银牌会员, 积分 2829, 距离下一级还需 171 积分
楼主既然想到需要一些约定俗成的规则来提高沟通效率，方便后来者，那何不抛砖引玉，列出一些你认为可以约定的规则，让大家提提意见
UID227282在线时间 小时积分1339帖子离线17184 天注册时间
银牌会员, 积分 1339, 距离下一级还需 1661 积分
回复 #18 zbm2001z 的帖子
&style type=&text/css&&
& & display:
li+li:before{
& & content:&- &;
可以实现&-&？？怎么我测试没效果，我用IE。
UID223173在线时间 小时积分1011帖子离线17184 天注册时间
银牌会员, 积分 1011, 距离下一级还需 1989 积分
理想与现实的差距
楼主的想法是非常好的，而且相信也是广大做前端的朋友们所希望看到的，但是在整个团队里面，管理层，或者单纯做UI设计而不懂W3C标准的人，他们是不希望如此的。
事实上现在国内的现状是绝大部分 创业公司是没有交互设计这一步的，这一步通常被忽视，直接让做视觉设计的顺手做个大概就行了，甚至有些做视觉设计的纯粹是艺术专业出生，连CSS是什么都不知道，更别提什么分离的思想了……我现在的团队，曾经在开会的时候，做视觉设计的设计师给我们提意见说，你们不要在FF下开发吧，不要老是用firebg去调试……&&面对这样的同事，你说我还能说什么呢，我是真的无语了……
事实上现在国内的这一行非常的不健康，策划文档这一步开始，问题就很严重，策划文档往往是由产品经理一个人埋头苦干确定之后，再走走形式的开会讨论，或者根本就不讨论，甚至有的连个像样的策划文档都没有，仅仅是个大体思路，然后就直接让所谓的“美工”做视觉图了……
UID77522在线时间 小时积分118帖子离线17184 天注册时间
初级会员, 积分 118, 距离下一级还需 82 积分
这样的讨论我很喜欢，可是由于保密原则，一些问题不好和大家交流。
只能说前端开发很苦，里外不是人。
UID404663在线时间 小时积分351帖子离线17184 天注册时间
中级会员, 积分 351, 距离下一级还需 149 积分
面对当前的“中国国情”，真正需要做“内容 结构 表现 行为”分离的有多少？
现实面前，经济价值最重要，除非客户、设计师、开发人员、管理者都能够足够的重视，都能够看的足够远，要实现这种如今看来有点吹毛求疵的“分离”，还是需要时间，过程是漫长的。
如楼上朋友讨论的“-”问题，各种解决办法都必然存在自己的优缺点，哪种是标准？ 现在的标准还可以如何改进？也许这正是我们需要努力的地方。
UID361258在线时间 小时积分1971帖子离线17184 天注册时间
银牌会员, 积分 1971, 距离下一级还需 1029 积分
感觉现在css需要改进不少。
现在的css还做不到完全胜任结构表现分离。她不是孙悟空。
等html 和 css都接近完美时候还差不多
UID60671在线时间 小时积分1393帖子离线17184 天注册时间
银牌会员, 积分 1393, 距离下一级还需 1607 积分
原帖由 [i]js135 于
19:26 发表
& & display:
li+li:before{
& & content:&- &;
可以实现&-&？？怎么我测试没效果，我用IE。
有 + 号的样式要IE7以上才支持...
我现在是美工和CSS一个人做...并没人做团队...我个人还是喜欢专门研究CSS和网站可用性...可用性是一项很贴近用户的事情....
UID428494在线时间 小时积分52帖子离线17184 天注册时间
初级会员, 积分 52, 距离下一级还需 148 积分
原帖由 [i]marsidea 于
18:28 发表
完完全全的分离成本会很高，有时候只是一个小细节，需要花多出几倍的精力来折腾。
举一个例子：
论坛下面的链接
清除 Cookies - 联系我们 - &&- Archiver&&- WAP
按照完全分离的思想，“-” ...
12楼的例子很形象生动，本来嘛，简单的东西有必要搞那么复杂吗？我觉得，在大方向上遵守规范的前提下，允许自己的自由发挥，所谓“百花齐放，百家争鸣”总比“千人一面”要好吧？
UID133191在线时间 小时积分505帖子离线17184 天注册时间
高级会员, 积分 505, 距离下一级还需 495 积分
学习中..话题不错...
UID66112在线时间 小时积分1642帖子离线17184 天注册时间
银牌会员, 积分 1642, 距离下一级还需 1358 积分
在没有发现css布局技术快速高效的途径之前可以不用。
Powered by