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

雏凤清音 —— 面向数据的前端编程方法 1 名词解释 桐花万里丹山路，雏凤清于老凤声 —— 唐 李商隐《韩冬郎既席为诗相送因成二绝》· 作为一种有别传统的前端编程方法，雏风名之。 面向数据的编程方法，避开繁琐的 ui代码，直接针对前端数据模型编程，你的程序就能更加清晰简单 。清音名之。 2 从实例开始 避免过于枯燥的陈述，我们从实例开始，我们以百度 WebIM 分组管理为例。 这里面，我们需要对用户分组列表执行：添加、删除、修改、保存、取消、排序等六种功能。 这算是一个比较常见的需求，那么，我们通常在前段实现这种功能，一般如何设计？多少代码？多 长时间？ 思考时间 ………………………. =================================================== 好了现在我们来展示一中简单的实现方式： 程序代码： 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) * .localeCompare(); }); 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) { = $(g_ + id).value; value.state = normal; } }); render(data); }, cancel: function(id) { each(data.list, function(value, i) { data.list[i].state = normal; }); render(d