Taobao FED

归档: 2012

复杂表单应用解耦,淘宝机票订单实践

背景在 Web 应用中,复杂表单这类 Web 应用富交互元素多,业务逻辑复杂,犬牙交错,且需求变化频繁。及容易成为晦涩和幽暗之地,也经常是各种代码坏味道的来源。针对这种典型的复杂应用,本文以淘宝机票订单为例提出一种架构模式梳理和消化表单带来的复杂性。 模块和组件划分解决复杂表单的的第一步,划分模块。 概念上,为了复用和解耦方便,应将模块按照功能的内聚程度进行划分。强相关,频繁沟通和交互的功能应

构建前端 DSL

目前在传统的软件开发领域 DSL 已经比较普遍,特别是 Martin Fowler 的突出贡献。而在前端领域尚较少涉及,而如果在前端开发中合理使用 DSL 同样也可以有效得减少代码数量,提高可读性。一个常见的应用场景即是前端模板的构建,从本质上看模板也是一个微型语言,因此可以从 DSL 的角度着手,使用工具快速构建一个适合于特定前端框架的模板引擎。本文将以 KISSY XTemplate 为例介

基于有限状态机的交互组件设计与实现

有限状态机(FSM)(维基百科)是设计和实现事件驱动程序内复杂行为组织原则的有力工具。 早在 2007 年,IBM 的工程师就提出在在 JavaScript 中使用有限状态机来实现组件的方法,原文地址如下: 《JavaScript 中的有限状态机》 现在结合 KISSY 等现代 JS 库和框架提供的强大的自定义事件的功能,我们可以利用有限状态机设计出代码层次清晰,结构优雅的前端交互组件。 今天,

Juicer – 一个 JavaScript 模板引擎的实现和优化

让我们从一段代码说起,假设有一段这样的 JSON 数据: 1234var json = { name: '流火', blog: 'ued.taobao.org'}; 我们需要根据这段 JSON 生成这样的 HTML 代码: 1流火 (blog: ued.taobao.org) 传统的 JavaScript 代码一定是这个样子: 12var html;html = '' + j