当前位置:首页 > 投稿 > 正文

雏凤清音——面向数据的前端编程方法

var?data?=?{ ? ??"list":?[ ? ??{ ? ? ? ??"id":?1, ? ? ? ??"name":?"我的分组1" ? ??}, ? ??{ ? ? ? ??"id":?2, ? ? ? ??"name":?"我的分组2" ? ??}, ? ??{ ? ? ? ??"id":?3, ? ? ? ??"name":?"我的分组3" ? ??}, ? ??{ ? ? ? ??"id":?4, ? ? ? ??"name":?"我的分组4" ? ??} ? ??] } 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); }

2. 下载测试程序并解压。?http://lite.googlecode.com/files/Example-20091219.zip

下载之后随便解压缩到一个目录里面吧。

3. 设置调试网站目录。

测试服务器就是为了测试方便而设计的,你只要把刚才解压缩的目标目录拖放到JSide浮层上,测试服务器自动切换网站目录。

4. 查看测试程序。

每次切换网站目录后,程序会提示您打开网站首页,你打开就是了。首页默认是一个文件列表。选择你看着顺眼的文件点击吧(*.s.js是一种用JavaScript编写的服务端小程序,可以在JSide测试服务器上运行)

5.修改程序代码。

在JSide浮层上右键,浏览文件,修改吧。

来源:http://www.baiduux.com/blog/2010/01/14/data_oriented_programing_in_web_frontend/

发表评论

最新文章

随机文章