Taobao FED

分类:Web开发

已买到的宝贝前端组件化探索

随着已买到的宝贝组件化全网回归完成,项目开发工作终于告一段落了,接下来便是 Beta ,灰度发布。我也终于有了时间来总结一下整个项目。 同学们普遍对 PC 业务如何进行组件化感兴趣,在此就把我在项目中的思考过程,积累的经验写出来与大家分享。 先来介绍一下已买到的宝贝这个业务: 已买到的宝贝是全网(淘宝/天猫)买家进行订单相关操作的平台(订单相关的操作如:取消订单,确认收货,订单搜索等),承载了全

淘宝首页兜底容灾方案

淘宝首页是淘宝的一个大流量入口,平均每天的 PV 量达到一亿。而页面上的数据很多都是通过接口调用,不同的接口对应着不同的系统,每个系统的稳定性是不太一样的。 一、兜底容灾的必要性一个日均承载一亿流量的网页,会经常出现哪些问题呢? 某个接口挂了,前端拿不到数据或者拿到的数据不够,页面展示就会出问题,出现空白或者某个模块直接天窗。 用户因为网络问题或者安装了某些插件,导致页面广告、接口请求挂掉,从

try catch 对代码运行的性能影响

起因要捕获 JavaScript 代码中的异常一般会采用 try catch,不过 try catch 的使用是否是对代码性能产生影响呢?答案是肯定有的,但是有多少不得而知。 淘宝前端线上脚本错误的捕获方法: 1234567window.JSTracker = window.JSTracker || [];try{ //your code}catch(e){ J

说说最近 Google Safe Browsing 引发页面加载阻塞的问题

背景一个礼拜前,在退款维权的业务中,发现这样一个问题: 在某些 Firefox 浏览器中,表单的 butterfly 加载阻塞导致功能异常了。 一开始,我们以为是即将发布的修改点导致的问题。 但再三确认本次的修改点后,确定只是改了文案啊! 这…… 因此,我们首先怀疑是否线上已经有问题? 经过测试发现,果然,确实是个线上问题。 经过并不算麻烦的自测后,发现问题还不小: 影响范围:所有 Firefo

一种基于匹配回朔的 CSS3 选择器引擎实现

介绍CSS 选择器是一种应用于 DOM 节点查找场景的特定微型语法,本质上和正则表达式一样都是一种模式匹配语言,灵活使用可以方便得获取指定位置的节点集合。 目前 W3C 推荐标准为 Selectors Level 3,在 IE9 + 以及 Firefox,Chrome,mobile 等浏览器上原生有基本一致的实现,而在 IE 下则需要使用 JavaScript 模拟实现,本文介绍一种基于匹配回朔

模块化高扩展性的前端框架 KISSY

本文为 2013 年 3 月程序员杂志同名文章的完整版。 介绍伴随着淘宝的快速发展,诞生已三年多的 KISSY 也取得了巨大的成长。目前应用于阿里集团的多个业务团队,特别是淘宝,天猫,一淘的绝大多数业务都采用了 KISSY, 满足了从前台的 web page 到后台的 web app 再到移动端应用(起步阶段)的广泛需求。 在阿里集团以外也有不少公司和个人使用 KISSY,交流旺旺群成员已将近千

谈谈 jQuery 中的防冲突(noConflict)机制

许多的 JS 框架类库都选择使用 $ 符号作为函数或变量名,jQuery 是其中最为典型的一个。在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保证整个类库完整性的坚强后盾。 jQuery 的 API 设计充分考虑了多框架之间的引用冲突,我们可以使用 jQuery.noConflict 方法来轻松实现控制权的

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

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

构建前端 DSL

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

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

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