Model, View, 浏览器端模板

这里的内容, 与其说帖子, 更应该是说是对一堆问题我勾勒的一个试探... 简单使用的模板我用 CoffeeScript 裸写, 稍微复杂些我用 Lilyturf 把方便拼接的 JSON 转成 HTML 实际场景中我接触到的是 Handlebars. 但这花了我很长时间去学习理解其方式

原先我理解的页面渲染是用 jQuery 对 DOM 树进行元素操作, 达到需要但 DOM 操作的麻烦在于 DOM 操作后要考虑大量的状态, 需要绑的事件不断增多于是理解了 Backbone 的 MVC 和 Delegate 带来的好处, 简化状态 MVC 中从 Model 取出数据状态, 直接通过模板更新到 View 上, 状态就很清晰了

MVC 实际使用中, 在前端显得不够强大. 当页面存在复杂交互时, 还是需要裸的 DOM 操作这样可能导致 DOM 操作代码继续混进 MVC 的框架当中写更多的模板应对更多 View 的方案不可行, 因为有刷新的麻烦刷新一方面要考虑前端渲染的性能, 另一方面刷新时用户体验并不好

MVC 从 Model 到 View 中间需要一些逻辑操作, 将数据的结构变成 HTML 的内容明确的例子是 if for 语句判断数据采用不同的模板, 这是显然需要逻辑来处理的这有多种不同的方案, 第一种是嵌入 JS 代码的方案, 用 JS 的逻辑完成 View 的渲染这样的方案可能造成的结果是 JS 代码和模板各种参杂, 模板并不纯粹

对这个问题, 我遇到了 Logicless template 这样的说法, 明确的比如 Mustache Mustache 的数据, 判断数据自身的状态, 通过判断是否有值, 是否是数组, 自动生成模板这样就少了嵌入代码判断, 导致模板本身参杂过多代码的问题, 这个方案在处理数据时需要增加些额外的操作, 比如事先做些判断保存为数据

还是有问题, View 的渲染, 很多都是重复的事件和操作绑定等等操作, 重复的接着想到, 其实所有修改都是在数据上, 如果数据更新时 View 自动完成渲染多好甚至当数据都有对应的 View, 其实用命令行直接操作数据就是操作 View 了 Twitter 上有人提醒那是 MVVM, 也就是 AngularJS 和 Knockout 使用的方案 AngularJS 当中 Model 和 View 双向绑定.. 我大致就理解到了这里

有模板就有模板重用的问题, 以及模块的嵌套和重用.. 这些目前没想明白.

update:

关于数据自动对应渲染 View, 拿 DOM 对象作为一个例子, 因为数据就对应了界面我在想是否有更简单的形式, 通过操作这个数据结构, 界面自动改变需要考虑的是, 更好的样式继承, 因为现在的 CSS 就冗长, 可能要新定义作用域之类的同时动画也应该作为一条属性, 系统自动管理, 否则系统维护的状态就超多再有点击, 拖拽, 输入这些操作都应该能直接在数据结构上模拟

再远以及数据与数据绑定, 在 Tangle, Elm, Reactive 中有体现这要花更多时间去学习了

coffee-js / languages

Model, View, 浏览器端模板 #62