- MVC的本质不是分
- MVC的初衷并不是分工合作
- 分不是目标,不合理的分法更容易导致沟通成本的上升
- 以数据为中心:去繁就简,返朴归真
- 大乱需大治:表现层没有上下文,一切修改从源头出发
- 前端MVC到底该怎么分
- {HTML (M)+ CSS (V)} + JS(C)
- JSON(M) + (HTML+CSS)(V)+JS(C)
- 什么是模板引擎
- 模板引擎的本质就是以一种以更加简单高效利于维护的方式帮我们完成拼接字符串的工作。
- 源代码接近目标代码。
- 源代码一般独立存在。
2
问渠哪能清如许 为有源头活水来
——初识 Lite XML
- Lite 是什么?
- 缩写自List Template
- 以JSON格式中间指令存在(可以类比于JVM上的字节码)
- 利于代码迁移(Java,JS,Python,Php…)
- 利于性能优化(http://templatetest.googlecode.com/ )
- Lite XML是什么?
- 一种以XML方式存在的Lite源代码(可以类比于JVM之java源代码)
- 利于设计更高效的语法规则(因XML与目标代码HTML的近亲关系)
- 其他特别之处
- 表达式基于JavaScript运算规则。
- 前后端、跨语言统一模版语法。
- Lite XML能带来什么?
- 保障输出合法性(减少XSS漏洞的发生)
- 降低学习成本(统一的模版语法)。
- 提高编码效率(通用工具支持)。
- 培养严谨的编程习惯(严谨的语法结构)。
- 方便代码复用利于后期维护(碎片包含/组织、格式化安全…)。
3
满堂花醉三千客 一剑霜寒十四州
——语法亮点
- XML Lite 基础语法的亮点
- 善解人意的XML。
- XML属性自动处理,XML文本自动编码。
- 空循环处理。
- 查询没有数据?请走for标记之后的else节点。
- 文档片段包含。
- 受不了大量只有一行代码的零碎模版文件?组织在一起吧,我支持!
- 更多:http://code.google.com/p/lite/wiki/Syntactic_sugar_of_XML_Lite
- 善解人意的XML。
- SiteMesh功能确实不错
- 内置编译期间的SiteMesh支持
- 通过装饰模式简化页面开发
- 更多:http://code.google.com/p/lite/wiki/XML_Lite_PageMesh
- 自动表单VS 表单标记库
- 标记库最大的弊端是不能横向扩展。
- XML Lite默认的解析实现中,可以支持T型扩展。
- HTML Form标记库杀手之:AutoForm:
http://code.google.com/p/lite/wiki/XML_Lite_Auto_Form
4
避繁就简 道法自然
——标记语法
- 标记语法的设计原则是,参考标准,避繁就简
- 形式上近似JSTL。 但有所简化
- 如JSTL的forEach标签还可以重定义对列表的起始位置,而Lite这些功能都迁移到表达式中,通过函数实现。简化控制逻辑。
- 控制语法上也近似JS,Java类编程语言
- 事实上吧Lite中间代码从新翻译成JS并非难事,1.0A中已支持该功能
- 形式上近似JSTL。 但有所简化
- 最基本的标记有那些呢?
- if
- test
- for
- var、item、status?
- else
- test
- var
- name、value
- include (编译期实现)
- Path、xpath、var
- 在线测试
- if
- 如何看待:大道甚夷,而民好径
- Lite核心指令相对简单稳定。
- 我们可以通过自定义组建支持,但是不推荐。
- 建议通过函数实现更复杂的功能,如上面所说的列表位置问题
5
有之以为利 无之以为用
——使用方法(Java版)
- 我们只做最需要的
- 短小精悍,Lite XML大小只有区区100k,相对其他模板实现,非常之轻。
- TemplateEngine是一个默认实现。
- Lite XML没有提供复杂的配置支持。
- 如何与Webwork(Struts2)集成。
- 提供必要的扩展
- 扩展EL默认上下文
- 全局函数、变量
- 扩展指定类型的成员方法
- 扩展EL默认上下文
-
- 扩展解析模块
- 在解析过程采用pipline模式组合节点解析器
- 任何节点解析器都可以作用于所有类型的节点,以支持横向扩展
- 节点解析器命中之后,输出编译指令,即可退出,完成纵向扩展。
- 解析过程中支持直接对运行模板默认全局变量集合扩展(内部扩展)
- 扩展解析模块
-
- 扩展运行时模版插件(不推荐)
- 运行时插件,可以以类似jsp tag lib的方式工作,甚至可以通过代理程序复用jsp tag。
- 扩展运行时模版插件(不推荐)
-
- 扩展编译期模版插件(不推荐)
- 编译期插件允许某个插件在模板初始时直接控制默认全局变量集合。
- 扩展编译期模版插件(不推荐)
6
道隐无形 上德若谷
——自动表单功能(Java版)
- 表现形式
- 沿用html标准,无需新语法,降低学习成本。
- 根据服务端数据反向推断的方式自动初始化表单。
- 一切在悄然之间按您的期待的方式自动完成
- 处理逻辑
- input 若未指定value属性,其值会自动从上下文获取
- checkbox选中状态也可以根据上下文自动初始化
- select,option如是
7
为学日益 为道日损
——内置SiteMesh功能(Java版)
- 装饰配置的全局定义
- 通过全局定义装饰规则管理布局和共享展现修饰
- 方便全局统一修改
- 简化主体内容
- 兼容SiteMesh定义语法
- 基本兼容SiteMesh的定义规则
8
生而不有 功成而弗居
——使用方法(JS版)
- 开发和调试期间
- 源代码独立存在,独立编辑环境
- 支持XSD自动语法提示
- 修改后立即生效
- 无需手工处理,一切自动完成
- 与JSI,JSA集成,自动导出优化。
- 在上线时,可以将模版导出成直接的js代码,抛弃解析模块,提高运行效率。
- 也可以导出成json中间指令。并设计一个运行时砂箱机制,保证模版中脚本安全(防止脚本攻击)。
9
蓬山此去无多路 青鸟殷勤为看探
——事件绑定技巧(JS版)
- 传统网页的事件链接方式
- addEventListener,attachEvent
- οnclick=???
- 基于模版的链接方式
- ${action.onclick()}
- ${action.showMessage(‘title’,’content’)}
10
五行通天地 八卦定乾坤
——指令设计参考
- Lite指令的表现方式
- 数值,字符串,数组,三种基本类型组合
- 可通过表达式自身解析程序解析这种中间代码
- 可以通过JSON格式的存储方式跨平台迁移
- 表达式指令设计
- 数据指令分以下五种类别
- 变量类型
- 常量类型
- 延迟节点
- 新数组节点
- 新键值集合节点
- 数据指令分以下五种类别
-
- 运算指令分按优先级分九重 (九组二十三条指令)。
- 操作符指令分三段:
000 1000 1
组内编号 | 优先级编号 | 操作元素个数标记
- 操作符指令分三段:
- 运算指令分按优先级分九重 (九组二十三条指令)。
-
- 表达式解析过程和内部表示方法
- 将函数调用,参数合并,集合维护都表示为普通运算符。
- 逆波兰式单栈运算。
- 表达式解析过程和内部表示方法
11
五行通天地 八卦定乾坤
——指令设计参考
- 模版指令设计
- 天地定位:
- 乾卦对应数字为:111=7;
- 对应的模版指令为:ADDON(插件扩展)。
- 坤卦对应数字为:000=0;
- 对应的指令为:EL表达式
- 天地定位:
-
- 山泽相离:
- 艮卦对应数字为:001=1;指令为:if 。
- 兑卦对应数字为:110=6;指令为:else 。
- 山泽相离:
-
- 雷风相薄:
- 震卦对应数字为:100=4;
指令为:XML属性表达式 XML_TEXT 。 - 巽卦对应数字为:011=3;
指令为:ML文本表达式 XML_ATTR 。
- 震卦对应数字为:100=4;
- 雷风相薄:
-
- 水火不融:
- 离对应数字为:101=5;指令为:for。
- 坎对应数字为:010=2;指令为:break 。
- 水火不融: