A. 淘宝首页的基础知识
有关淘宝首页的基础知识
很多人都用淘宝，但是对淘宝首页并不了解，我这里带来一位淘宝首页的设计师的讲解，希望可以让你对淘宝首页有一个基本的认识。
一、相关背景介绍
淘宝首页是淘宝的门面，承载着几乎淘系所有业务的入口，流量很大，量级单位为亿。近几年无线端崛起，业务重点开始向无线终端偏移(目前不能叫偏移，基本以无线为主了)，所以淘宝 PC 端首页的流量也有削减，不过即便如此，它的日均 PV 依然相当高。
淘宝首页一向是内部平台和技术的试验田，它一直在变化着。最新的框架和系统都会找淘宝首页试点，可以试想下，如果某一项需要推动的升级或者优化措施在淘宝首页已经上线，并且拿到了良好的数据和稳定性，其他业务还有什么理由不去尝试和更迭呢?同时，去年一年身在淘宝前端的技术架构组，自然而然也会主动去 push 一些实验性的内容到业务上。
淘系的站点页面包括首页、其他频道页和活动页等，这些页面并不都由淘宝前端一行一行的代码码出来，业务如此之多，这种玩法即便人数 double 也忙不过来。事实上，大多数页面都是依托内部的搭建平台——运营或者前端通过模块搭建的方式——构建的，而前端 focus 的重点在于搭建平台的建设自身以及模块的通用性和复用率的保障，当然，还有一些工程化的东西。
使用搭建平台搭建的页面，前端只需要考虑组成页面的原子模块的开发，整体的渲染由搭建平台提供的统一脚本全权负责。而在淘宝首页上，考虑到页面模块数量巨多，加上还有少量跨部门、跨团队的沟通，渲染模型略微不同。
二、淘宝首页的整体变迁
背景中提到，淘宝首页依托于内部搭建平台，它的变迁自然也是跟着搭建系统的变化而变化的。
1、PHP 下的淘宝首页
接手淘宝首页不久，便遇到了一年一度的改版，那时它还运行在 PHP 环境中。这里需要说明的是，淘宝首页的所有代码完全由前端掌控，前端不会直接跟数据库打交道，其数据来源分为两部分。
数据来源
一是运营填写的数据。 采用前端挖坑的形式，预留坑位让运营获取填写数据，
运营填写这些坑位就会产生这份 PHP 模板对应的数据，最后渲染出来就是一个完整的 HTML 片段(实时性渲染)。
旧版搭建系统中就是通过这种方式构造一个子模块。我描述得十分简单，但作为一个平台它需要考虑的东西还有很多，比如数据顺序的控制、定时发布、回滚机制、过滤机制、筛选机制、数据的同步、数据的更新、版本控制、权限控制、其他系统的引用等等。
二是后端或者个性化平台提供的数据。 不同的业务有不同的诉求。一些业务有自己的后端，他们要求使用自己业务产出的数据;有的业务希望用户看到的内容不一样，千人千面，期望接入算法;一些业务跟卖家直接打交道，期望使用招商数据;而有些业务期望采用运营从数据池筛选出来的数据……总之，淘宝首页需要对接形形色色的系统，接口繁多。后面会提到对动态数据源的整合。
并且这些系统对应的域名是不一样的，JSONP 格式自然也就成了首选。但一些特殊的系统，比如广告，它的渲染并不是一个简单的 JSONP 请求，可能它还要干预整个广告的渲染流程，比如加载他们的 JS，把渲染的控制权交过去。
页面的架构
上面介绍了数据的来源和子模块的结构，那么整个页面又是如何构成的呢?模块的搭建分为两种，一种是可视化搭建，运营或者前端可以将开发好的模块(或者模块库中选取的模块)拖拽到容器内，形成一个页面：
当然，上图也只是一个模型，作为一个系统需要考虑的问题还有很多很多，如页面的布局、多终端适配、模块的临时隐藏、位置调整、皮肤选择、模块的复制等等。
通过模块 id 将模块引入，并且添加一些类似 lazyload 的标记，方便控制渲染节奏和数据入口。源码搭建和模块搭建的区别在于，前者更易于控制模块的结构以及模块的渲染顺序。
动态数据源
首页面对一大堆接口和平台，对接几十个业务方，接口是个很大的问题，由于后台系统的差异，基本没有办法统一数据源的格式，一旦运营哪天心血来潮要换一个他自己觉得用的更爽的或者数据更好的系统，前后端估计又得沟通和对接几次。
平台具备数据源接入的能力，也就是说我们挖的坑不仅仅可以让运营填数据，还可以从各种数据源中直接导入数据，当然，这里需要进行一次数据字段的映射转换。
绑定之后，数据既可以同步输出，也可以异步输出，这些都是平台提供的能力。这个方案基本上解决了后端系统/接口变化的问题，并且减少了前后端之间的沟通成本。
不过这里需要注意的是，虽然页面上的接口都通过平台统一梳理了一次，这也意味着，页面所有的请求会先流经平台，然后分发到各个后端，平台的抗压能力要求很高。
2、PHP 到 Node 的变迁
淘宝首页日均请求的这个量级，不可能是十几二十台台服务器抗得住的，支撑它必须有一个服务集群。
每一个 CDN 节点上都具备 PHP 渲染的能力，当页面发布时，我们把该页面所有的模块和数据同步到全部 CDN 节点上，基本模式大概就是如此了。看起来还挺不错，但是经过一段时间的运维，很多安全、性能问题都慢慢浮现出来了：
性能问题。 每个 PHP 页面包含多个子模块，而子模块也有可能引用了其他的子模块，PHP 的 include 操作是存在消耗的，每一次引用都是一次磁盘 IO，一个渲染节点上跑了成千上万个类似淘宝首页的 PHP 页面，并发一高其效率可想而知。
推送机制问题。 文件同步是一种比较恶心的机制。首先，时间上没法控制，一个文件同步到所有的节点，快则几秒钟，慢的话耗时会超过一两分钟;并且同步过程还有可能失败，健康检测的成本也是相当高的。发布比较紧凑时，需要同步的文件也很多，很容易造成队列堆积，加剧同步差的体验。
实时性强需求问题。 文件在推送之前，还可能经过一些前置系统，发布链路越长，线上生效时间越慢，慢的时候大约五分钟才生效，这样的延时对于实时性要求很高(如秒杀)的需求来说是完全不能接受的。
当然，还有很多其他问题，如运维成本增高、安全风险增高、PHP 资深人才储备不足等等。所以 PHP 渲染容器的命运，就是，被干掉。
服务集群为 Cache CDN，它只有静态文件处理能力，没有 PHP/Node 的渲染能力，所以处理效率高，性能也好，抗压能力相当强，并且扛不住的时候还可以花钱买服务，拓展 Cache 集群。
用户访问时，Nginx 转到 Cache CDN，如果命中缓存则直接返回，没有命中便回源到源站服务器。源站服务器是具备模块渲染能力的 Node 服务，它可以做很多事情：
· 控制 Cache 响应头，通过 max-age 和 s-maxage 控制页面在客户端的缓存时间以及在 Cache 上的缓存时间，这个缓存时间可以根据需求随时做调整，比如大促的时候调长一些;
· 控制内外网环境，和 AB 测试状态;
· 融合前端相关的工具链，比如检测、压缩、过滤等等。
它的优势有很多，这里不一一列举了。这个模式中还添加了一层容灾，源站服务器每隔一段时间将数据推送到于 Cache 同机房的备份服务器，一点源站挂了，还能够自动容灾到备份数据上。
模式的变化不仅在运维上有了突破，CDN 被攻击时的安全风险也低了很多，同时也省却了 sync 所需的各种检测机制，每年节约成本也是百万以上，优势还是相当明显。
3、Node，不一样的模式
上面 PHP 模块中，我们只说了 HTML 和数据部分，用心的读者应该已经发现，CSS 和 JS 这些静态资源都没提到，那页面是如何渲染的呢?
旧版 PHP 页面中，我们是直接引入了一个 CSS 和一个 JS，淘宝这边采用的是 git 版本迭代发布，这些静态资源都是直接放在一个 git 仓库中。也就是这样：
每次发布完 git 文件，再修改 PHP 的.版本号，然后发布 PHP 代码。当然，也做了相关的优化，比如发布 git 时自动更新版本号等。
一个模块的 CSS/JS 和模板放在一起，CSS/JS 与页面其他模块的静态资源是相互独立的，目的就是希望单个模块也能够完整的跑起来，更加利于模块的复用。
而模块的挖坑，也从模板中独立了出来，采用 JSON Schema 的形式定义数据格式：
模块之间相互独立隔离，所以会存在一定程度的冗余，不过模块解偶带来的收益要比这点冗余要多得多。事实上，我们是通过一个仓库去管理单个模块的。页面的渲染就比较简单了，源站 Node 容器会将所有的 index.xtpl 合并成一个 page.xtpl，为减少页面请求，css 和 js 也会 combo 成一个文件。
任何模块的更新，页面都会有感知，下次进入系统时，就会提示是否需要升级模块和页面。
三、淘宝首页的性能优化
首页模块众多，如果一口气吐出来，DOM 数量必然超过 4k 个，其结果就是首屏时间极长。按照 TMS 的开发规范，每个 TMS 模块都包含一个 index.js 和 index.css，最后展示出来两个 combo 的 js 和 css。首页加载的时候也不会一口气执行所有 index.js，否则刚开始页面阻塞会十分严重。
页面的渲染逻辑
· 遍历所有 TMS 模块(包含一个 J_Mole 的钩子);
· 部分 TMS 模块无 JS 内容，但是加载了一个 index.js，为模块添加 tb-pass 的 class，用于跳过该模块 JS 的执行;
· 将页面分为两块，首屏为一块，非首屏整体为第二块，先将首屏模块加入到懒加载监控;
· 待首屏模块加载完成，或者用户处理了页面交互时(滚动、鼠标移动等)，将非首屏模块加入到懒加载监控;
· 处理一些特殊模块，它们会在进入视窗之前几百像素就开始加载;
· 监控滚动，按照以上逻辑，渲染模块;
· 部分模块即便是被执行了，也不一定渲染出来，因为它的优先级不高，在模块内部加了事件监听，比如等到 mouseover/onload 事件触发的时候再渲染这些内容。
代码的性能优化是一个精细活，如果你要在一个庞大的未经优化的页面上做性能优化，可能会面临一次重构代码。上面的文章提到的是页面内部的细节优化，但是在开发流程中做的规范化、标准化，以及线上访问通路中的各个环节优化还没有提及。
四、淘宝首页的稳定性保障
在大流量下，任何小问题都会被放大成大问题，所以开发环节遇到的任何偶发性问题都需要引起重视。不过很多偶发性问题在我们的测试环境中是找不到的，比如与地域相关的问题(如上海的某个 CDN 节点挂了)，用户属性问题(如 nickname 最后一个为字母 s 的用户页面天窗)，浏览器插件问题，运营商广告注入问题等等。
难以在上线之前把所有问题考虑周全，但是有两点是必须做好的：兜底容灾 + 监控预警。
1、兜底容灾机制
兜底容灾有两个层面的考虑：
· 异步接口请求错误，包括接口数据格式错误，接口请求超时等;
· 同步渲染，源站页面渲染出错。
异步接口请求，主要涉及到的是后台系统，对接系统较多，各个系统的稳定性和抗压能力各不相同，这方面的保障有多种方案。
每次数据请求都缓存到本地，并且为每个接口都提供一个硬兜底。还有一种方案是“重试”，请求一次不成功那就请求第二次。
对于同步渲染，它只需要页面模板和同步数据，两者中任一种存在错误，源站都会报错，此时回源返回的内容就是一个 error 页面，状态码为 5xx。这个错误不一定是开发者造成的，有可能是系统链路出现同步异常或者断路问题。
一旦源站任何异常，Nginx 都会转到与 Cache CDN 同机房的首页镜像上去，这个镜像内容就是淘宝首页的 HTML 备份源码。
2、监控预警机制
监控也有两个层面：
· 模块级别的监控，接口请求布点、模块天窗检测等;
· 页面的监控，在页面上添加特殊标记，定时回归所有 CDN 节点，查看特殊标记是否存在。
模块层面的监控，内容还是相当多的，监控的点越多越详细，到最后定位问题的效率就会越高，比如在一个稍微复杂的模块上，我会埋下这些监控：
· 接口请求格式错误、请求失败、请求超时，至少三个埋点;
· 硬兜底数据请求失败埋点;
· 模块 5s 内没有渲染完成统计埋点;
· 模块内链接和图片黑白名单匹配埋点。
其中部分监控还会自动处理明确的错误，比如 https 页面下出现了 http 的图片，会立即自动处理掉这些问题。
3、上线前的自动化检测
这属于淘宝整个工程化环境的一部分，前端自动化测试。一般会在上线之前处理这些问题：
· 检测 HTML 是否符合规范
· 检测 https 升级情况
· 检测链接合法性
· 检测静态资源合法性
· 检测 JavaScript 报错
· 检测页面加载时是否有弹出框
· 检测页面是否调用 console.*
· 页面 JS 内存记录
当然，也可以自己添加测试用例，比如检测接口数据格式、模块天窗问题等。自动化检测也可以设定定时回归，还是比较有保障的。
五、淘宝首页的敏捷措施
1、健康检查
页面模块众多，为了能够追踪页面上每一个小点的变化，我在请求、渲染的每一个环节都做了详细的统计。
一旦接口请求失败，或者接口走了容灾逻辑，或者模块渲染超过 5s，控制台都会有黄色警报，当然此时，也已经向服务器发送了警报统计。
2、接口 Hub
接口 Hub 是对数据请求的管理工具。
页面很多模块的渲染都需要一个以上的数据源，一旦运营反馈页面渲染数据异常，可以直接通过 Hub 找到数据，加速 Bug 定位效率。同时 Hub 也可以用来切换环境，将一个接口的请求切换到日常或者预发环境的接口之中，它是调试的利器。
3、快捷通道
我在页面脚本执行前后都放了一个快捷操作通道，一旦遇到紧急线上问题，比如样式错乱溢出、接口报错导致天窗等，可以通过快捷通道直接修改页面的 CSS 和 JS，两分钟内上线。
不过这类通道只适合紧急问题的修复，毕竟随意插入 JS 代码是存在很大风险的。
;B. 淘宝模版的模板来源
淘宝模板主要来自以下几个方面： 一、免费模板 很多电子商务提供商提供的网店系统（比如XpShop网店系统）都是可以换模板的，这类产品通过后台一键切换就可以达到更换网店风格的效果。这类公司为了增加系统的流行度和通用性，本身会组织人力针对产品开发一些免费的网店模板跟系统配合发布出去。其它一些模板设计爱好者，他们出于学习交流的目的，往往把自己的模板贡献出来给大家使用。这类模板由于是免费，在模板的装载速度方面，往往比不上系统官方提供的的商业模板。 二、买家与人共享的模板 网上的开店的用户一般装修了模板，但是他们往往会购买多套模板，对于不用的模板，他们往往会拿出来和大家分享。 三、专业公司提供的商业模板 有一些公司为了增加服务价值，往往会提供一些免费的模板，这些模板是包涵在其他的服务之中的，例如：像有照片网就是提供网络存储空间的网络服务商，通过使用免费模板来吸引顾客访问其网站。 这里建议开展电子商务的个人和企业，最好选择第三类模板，不仅高效、安全，同时也没有版权的纷争，而且有稳定的售后服务，出现问题，能及时得到维护。
C. 哪里去找淘宝详情页模板
您好，淘宝详情页你在发布宝贝的时候，
在选择产品类目的时候，
右边就可以看到模板，
但是这个是别人的模板，
并不适合你，
所以淘宝详情页建议还是自己弄，
望采纳，谢谢
D. 这种淘宝卖家店铺首页模板怎么弄的
可以直接在淘宝购买的，我现在用的是艺湾的，直接包年，有300多款模板可以随便用，比单独买一个省事很多。你可以参考一下
淘宝的模板分为描述模板，分类模板，公告模板，旺铺模板。其中除了旺铺模板外，其他的模板都是普通店铺可以用的。以上这些模板都可以在淘宝找到人购买，或者比如艺湾这类网站都有提供。如果希望自己动手也是可以完成的，只是要花费些时间
E. 如何评价淘宝 UED 的 Midway Framework 前后端分离
【贺师俊的回答(17票)】:
泻药。
1. 这系列文章写得很好。
【注意，熟悉我的同志应该知道，我极少给出“很好”的评价。】
2. 这系列文章以及其背后的实践重新树立了淘宝系前端工程水准的领先地位。
【在此之前的一段时间内，至少从外部来看，淘宝已经落后于狼系和企鹅系了。】
3. 这系列文章及其背后的实践也证明了nodejs对于前端来说不仅在工具链而且在架构层面的意义。
【注意，这系列文章中的思路其实并不新鲜，但是在淘宝这样规模而且业已非常成熟的产品中实施这样的转变，我认为是具有标志意义的。】
4. 具体细节上仍有许多改善空间，如此系列的第4篇《前后端分离的思考与实践（四）》在防御XSS时还是存在一些传统问题。这方面在参加杭JS的时候，我跟淘宝的herman同学有过沟通，具体就不在本问题展开了。因为这是局部问题，对整体架构影响不大。
5. 注意，以上评价的都是架构，或者说是思路。实施效果是不是好，我相信他们自己的说法。但Midway框架本身因为没有看到具体文档和代码，而且其开发的目的首要是满足淘宝的需求，因此其本身或其具体组件是否在普遍意义上适用和优秀，无法作出判断。
【徐飞的回答(19票)】:
早上看到贺老出马，也忍不住写了一篇来谈一下苏宁这样的公司对这方面的考虑。
近两年来，我一直在思考如何改进前端体系的开发模式，这里面最基础的一点就是前后端的分离。谈到前后端分离，也有一个误区，认为仅仅是以浏览器作分界，把这两部分的代码分离出来。但其实是，做这件事情的本意，是要解决开发模式的问题，也就是要分离前后端开发人员的职责。
针对不同类型的Web产品，这个分离方式是有所不同的。对于Web应用，因为它跟服务端的交互基本就是AJAX或者WebSocket接口，所以这个分离是天然的，整个前端基本都是静态HTML模板，JavaScript模块，以及CSS和相关静态资源，但是对于网购产品这样的形态，它的做法就不一样。
## 展示占主要部分的产品
网购产品的展示需求很重要，图片等资源载入非常多，但相对的操作却很少，基本只有搜索商品，加购物车，结算这样的环节。传统这样的产品，多半是这么个工作流程：
交互出高保真图，前端去切图，生成静态HTML加展示效果，然后，注意，他不是自己接着往下做，而是交给另外一群开发人员，把它转换成服务端模板，比如freemarker或者velocity之类，或者是smarty，为什么要这么做呢？因为这类产品讲究一个首屏优化，是首屏而不是首页，这就意味着对于首屏来说，经过的环节应当尽可能少，比如说，就不能先载入客户端模板，再AJAX一个数据，然后去渲染一下。这么做的性能肯定是不如服务端把HTML生成好，然后一次请求加载的。
这个过程肯定是有一些问题的，比如说，如果开发人员B在套模板的过程中，发现原先的静态HTML部分有问题，应该怎么办？大家知道，一个对HTML和CSS都很熟悉，同时又可以写业务逻辑的前端开发人员是很稀缺的，所以，多数情况下，这两边的技能是不同的，如果是简单的页面问题，这个开发人员可能自己也就解决了，如果他解决不了，怎么办？
如果B自己不改，把他已经搞成服务端模板的代码返回给前端人员A，A也没法下手，因为已经是服务端模板，A手里没有环境，改了之后不知道对不对，不能预览。那么，B把问题告诉A，A修改他的原始版本，然后再拿给B又怎样呢？这时候B又麻烦了，他要对比两次修改的部分，把自己前一阵的修改合并进去。
所以，不管怎么搞，这里面都很折腾。
Midway这个产品，他想要解决什么问题呢？既然说前端人员没法预览模板的原因是，后端在使用服务端模板，那么，我能不能找一种两边都可用的模板，你能在服务端渲染，我也能在客户端预览？服务端跟浏览器端同时都能运行的语言是什么？只有JavaScript。
所以，大家就往nodejs里面去发掘了，一个普通的JavaScript模板库，它在浏览器端也可以渲染，在nodejs端也可以输出成HTML，这时候，那些原来负责整合模板和逻辑的人员改用nodejs，是不是就解决这问题了？
想象一下这个场景多么美好：前端来决定某个模板是服务端渲染还是客户端渲染，当首屏的时候，就在nodejs里面生成HTML，不是首屏的时候，就AJAX过来在浏览器端渲染展示。
从技术方案上看，这么做很好了，工程上又带来另外一些问题，那就是对熟练JavaScript开发人员的需求量大增。对阿里这样的公司来说，前端有大几百人，别的公司只能仰望，所以他当然可以放手一搞，但对我们苏宁这样，前端人数不大的，就麻烦了。如果我们也引入这样的方案，就面临把很大一部分Java开发人员转化成JavaScript开发人员这么一个问题，这个事情短期内肯定是无法解决的，所以反过来会增加前端这边的压力。所以暂时还用不了阿里这样的方案，只能努力先提高人员水平再看情况。
服务端引入nodejs还有别的优势，比如说请求合并等等，这个也可以用其他方式变通解决，比如加一个专门的跟现有后端同构的Web服务器，在那边干这些事。
## 展示和业务逻辑较均衡的产品
对于另外一些场景，也有类似的问题，比如支付产品，展示相对没那么重，但是又算不上Web应用，它面临另外一种情况的前后端分离。这种场景下，前端的出静态HTML和DOM操作类的JavaScript，业务开发人员负责写后端，还有另外一部分业务逻辑的JS。
这里的问题是什么呢？是jQuery式代码造成的协作问题。比如说：
$(".okBtn").click(function() { $.ajax(url, data) .success(function(result) { $("someArea").html(_.template("tpl", result)); });});
因为前端人员的稀缺，所以他不可能帮你把业务逻辑写出来，所以说，这里面$.ajax往里的部分，要业务人员自己写。然后，数据得到之后，又要去处理界面部分。
很多场景下，处理界面远不是这么搞个模板放上去就完事的，所以业务开发人员感到很烦闷，为了这么一点小问题，反复去找前端的人来搞，很麻烦，自己搞又特别花时间，所以都很苦闷。
这同样是一种前后端的分离，只是这个分界线不在浏览器，而在于：是否写业务逻辑。对付这种场景，解决办法就是加强JavaScript代码的规划。现在流行那么多在前端做MV*的框架，不考虑Angular这类太重量级的，来看看Backbone这样的，它到底解决了什么问题？
很多人说，Backbone虽然小，但根本不解决问题。这句话有一定道理，但前提条件是你自己的JavaScript代码分层已经做得很好了。如果做得不好，它就可以协助你解决分层的问题。
刚才那段代码，它的问题在哪里呢，在于职责不清晰。一个函数只能做一件事，这是共识，但由于回调等方式，所以不经意就破坏了函数的单一性、完整性。我们试试来拆开它。
对于一个后端开发人员来说，他为什么常常害怕写前端代码？是因为JavaScript语言吗？其实不是，我们用来写业务逻辑的时候，只会使用JavaScript一个很小的子集，对于这个子集来说，它并不存在多大的学习困难，最麻烦的地方在于DOM、BOM等东西，对于一个后端开发人员来说，如果要求他在掌握服务端代码编写的同时，还要去学这些，那真是有些不容易，所以，我们来给他省点事。
现在我们的出发点是，把这段代码拆给两个不同的人写，一个人操作DOM，另外一个人只写逻辑，绝对不操作DOM。前面这个代码拆给前端维护，后面这个拆给业务开发人员。
最老圡的方式：
a.js
$(".okBtn").click(function() { b1(data);});function a1(result) { $("someArea").html(_.template("tpl", result));}
b.js
function b1(data) { $.ajax(url, data) .success(a1);}
现在大家是不是相安无事了？
如果这么做的话，AB双方要做很多约定，也就是说，这个过程仍然是一个螺旋链。比如说，A先写点击事件的绑定，然后想起来这里要调用一个请求，就去找B写b1方法。B在写b1的时候，又想到他要调用一个界面展示方法a1，然后又来找A写，来回也挺折腾。
况且，有这么一天，A在另外一个地方也想调用b1了，但是由于b1的回调已经写死了，比较蠢的办法就是在a1里面再判断，这是什么东西点击造成的，然后分别调用不同的回调。如果情况复杂，那这个代码写出来真是没法看。
如下：
a.js
var type = 0;$(".okBtn").click(function() { type = 1; b1(data);});$(".okBtn1").click(function() { type = 2; b1(data);});function a1(result) { if (type1) { $("someArea").html(_.template("tpl", result)); } else if (type2) { // ... } type = 0;}
b.js
function b1(data) { $.ajax(url, data) .success(a1);}
稍微好一些的办法是，在b1中，直接返回这个请求的promise，这样可以由调用方决定到底该干什么。
如下：
a.js
$(".okBtn").click(function() { b1(data).success(function(result) { $("someArea").html(_.template("tpl", result)); });});$(".okBtn1").click(function() { b1(data).success(function(result) { // ... });});
b.js
function b1(data) { return $.ajax(url, data);}
如果要对返回数据作统一处理，也可以很容易地在b1中，用promise重新封装了返回出来，只不过这样在a.js里面，直接调用的就不是success，而是then了。
注意到这样的代码还有问题，比如说大量的全局函数，不模块化，容易冲突。此外，没有一个地方可以缓存一些共享数据，比如说这么一个场景：
界面上两个块M和N，其中，M初始载入并加载数据，N在初始的时候不载入，而是在某个按钮点击的时候载入，而M和N中各有一个列表，数据来源于同一个服务端请求。
现在就有个问题，当N载入的时候，它的数据怎么来？比较老土的方式，肯定是载入N的时候，同时也再去请求一下数据，然后渲染到N上。
从一个角度看，如果说不重新请求，N的这个数据应当从哪里来？从另外一个角度看，如果重新请求了，发现数据跟之前的产生了变更，是否要同步给M，怎么同步给它？
我们看看类似Backbone这样的框架，它能提供怎样的机制呢？或者如果我们不用它，怎么自己把这个分层封装得更好一些？
首先，是建立一个数据模型，在它上面添加数据的缓存：
define("model", [], function() { var Model = { data: null, queryData : function(param, fromCache) { var defer = q.defer(); if (fromCache || this.data) { defer.resolve(this.data); } else { var self = this; this.ajax(url, param).success(function(result){ self.data = result; defer.resolve(result); }); } return defer.promise; } }; return Model;});
这么一来，我们在模型上作了数据的缓存，如果调用的时候加fromCache参数，就从缓存读取，否则就请求新的。为了在两种情况下，调用方接口能保持一致，把整个函数封装成promise，以便接着调用。这里的模型定义成单例了，假定是全局唯一的，可以根据需要调整成可实例化的。
这个时候，视图层就要封装DOM和事件的关联关系：
define("view", ["model"], function(Model) { function View(element) { this.element = element; this.element.selector(".okBtn").click(function() { var self = this; var fromCache = true; Model.queryData({}, false).then(function(result) { self.renderData(result); }); }); } View.prototype = { renderData: function(data) { this.element.selector("someArea").html(_.template("tpl", result)); } };});
这个时候，多个视图实例的情况下，数据也能够较好地利用。
这样，前端写这个View，后端写Model，可以作这么个分工。
这个只是很简陋的方式，在复杂场景下还有很多不足，在这里先不展开了。更复杂的场景也就是类似Web应用那种方式，稍后专门写一篇来展开。
## 小结
我们再来回顾前后端分离所要解决的问题，是分离前端和业务开发人员的职责，这个方案怎么定，是应当随着团队状况来确定的。比如阿里前端厉害，人多势众，他的前端就要往后推，去占领中间层。我们苏宁这样的公司，前端比较薄弱，只能在很多场景下，让出中间层，否则战线铺太广只能处处被动。
同一个中途岛，在不同的形势下，占还是不占，是很考验前端架构师的一个问题。
对阿里的这种实践，我们会持续围观，寻找并创造合适的出手时机。
【rank的回答(4票)】:
简单说下自己的看法。
前端不再继续“单纯”在 kissy 上下功夫，而可以考虑向后的延伸架构是一种前端的进步，这种前端架构将重定义阿里的前端工程师工作，很多互联网公司比阿里先行一步。
这个思路与与最早阿里很多前端没有碰后端（例如模板）有很大的关系，用 NodeJS 作中间层能解决现面临的问题，是一种不限于解决当前问题的长远解决方案。
具体是否能解决和解决得好，在于细节，不在新，而在过渡。如，如何过渡目前 NodeJS 与原来的数据交互，如何灰度过渡，工作量等。
平台化与接口化思路（后端数据接口以 Services 存在）让 amazon 收益非浅，现在后端平台化接口化在大公司趋势明显。
平台化需要更多更快的应用层开发选型，NodeJS 是不错的一种。NodeJS 虽然还是有些问题，但从信息面与我们自己的应用经验来看，已有慢慢成为后端 WebApplication 的一种很好的选型方案的趋势。
总的来说，是个趋势。
【Hex的回答(1票)】:
我认为这就是所谓的大前端开发模式。模式确实是好模式，但是真正实践起来，和后端工程师的沟通和协调也会遇到很多问题。
我做过的几个项目都是采用这种大前端的开发模式，前端基于Transformers框架+CodeIgniter组成大前端，这样确实可以很好的隔离前后端，项目可维护性大大提高。
【邓欣欣的回答(1票)】:
上周去杭州玩了下，和之前的阿里同事做了些技术交流，发现这一年，阿里的前端在流程改进上下了很大功夫； 题主所说的中途岛应该是 UDC 团队做的，应该说思路不是很新鲜，国外有 ebay 向 nodejs 的转型案例，国内之前也有网络音乐移动端的案例;
但对阿里前端来说，意义确是很重大，解决了合作流程中的一个很大问题：之前阿里的前端是只写静态 demo，写完给开发套模板，开发不太懂 html，漏写个标签，然后找前端调试，一来一去很折腾，是个必须干但又是个没啥技术含量的事； 中途岛可以很好的解决这类蛋疼事，但是请不要认为前端就因此会后端了，无非是之前浏览器用 ajax 请求接口，现在咱用 node http去请求呗，框架做得牛逼点，统一适配出前端的ajax 接口也不是不可能呀~~，想想嘛，为啥要用 node 呢？ 牛逼直接写 java 啊。。哈哈哈~
其他的 F2E 团队也做些很不错的流程改进工具，同样不是很新鲜，但对阿里前端都是比较有意义的工具：
def： 项目构建与发布工具，与阿里的 gitlab， scm 整合，各种 脚手架，build，combo，发布，一条命令搞定，确实很方便；
dip：数据接口平台，定义业务线前后端数据格式的一个内部公共平台，基于 json-schema，好像也可以给你提供 mock 接口；
uitest：前端持续集成平台；之前这东西我是边做边吐槽的，似乎刚上线，类似 jenkis 这些，提交或者发布代码时，先帮你跑一次测试用例；目前通用测试库比较少。
Trace：好像是叫这个名字吧，监控平台，这个比较早就有了，用来监控各个业务线页面的运行状况并搜集各种用户数据，如分辨率，UA
我看来 def 和 dip 对阿里前端的作用会更大些，uitest 估计作用一般，阿里前端是不注重代码质量的，测试用例也仅在几个重要的直接影响交易的业务线会写。
【许文敏的回答(0票)】:
确实不错，从职责上来区分前后端分离才是王道，nodejs将成为前端工程师的基础技能
【猎人豆豆的回答(0票)】:
不要把简单的问题搞复杂，对于淘宝这样规模的公司，有些牵一发而动全身的改动，最好是在权衡风险和收益后再决定，我们是技术的使用者，而不要被技术牵着鼻子走.
【罗正烨的回答(2票)】:
前面前端的大牛们都说了，我换个角度聊聊。
这么讲吧，阿里的前端为什么比其它公司走的远，是因为他们有很多前端，还有很多不用写大量业务逻辑的前端大牛。大牛的作用，就是折腾。阿里的前端工程师水平在自身领域实践上已经跟得上后端。
但这个架构所谓的分离，其实是把很多原来前端不需要做的事揽到了自己的手上，增加前端架构师的KPI，让前端做了更多的事，周报好写。因为nodejs和前端都是js，所以学习成本并不算高，但是对一个技术人员的要求是比原来更高了。
但是，他们团队有很多HC，有很多钱。。所以像我这种一个产品线只有一二个前端的，要是这么玩儿，招人跟不上不说，然后还可以把自己累死。
所以技术选型和架构这种事，还是要根据自己团队的能力和招人啊。
F. 淘宝网上的主页模板怎么做
淘宝网 旺铺模板 分很多种 不知道你说的是一下那种？
1.描述模板
2.店招模板
3.分类模板
4.促销区模板
5.公告模板
制作这些模板需要使用平面设置软件！
而且需要把制作好的模板转换成HTML源文件才可以使用！
G. 淘宝的宝贝详情页面的模板怎么制作，
做好图片到
DW软件做代码生成，填到详情页后台ok
H. 淘宝店铺什么是模板
模板就是一系列装饰模板素材等，让店铺装扮的更加专业大方美观，从而能够增加客户的购买欲，装修模板主要分为：店招模板、导航栏模块、轮播、右侧模板、自定义模板、宝贝推荐模板、 左侧模板、 宝贝描述模板和其他的功能模块。
I. 什么是淘宝SDK模板
目前所说的SDK模板主要是针对淘宝店铺装修的一种高级模板的统称，是有别于CSS模板的，基于淘宝提供给设计师一个sdk()，设计师在这个开发包上设计出的模板，就是淘宝Sdk高级模板。
SDK模版不足之处
1、高级模板呈现出来的界面，是由专业前端设计师设计的，卖家不能自由布局。
2、模板升级的时候，模板有时会部分初始化，初始化是什么意思呢？就是升级后有的放好图片和商品的地方，又变回了没装修时的样子！
3、有些情况下由于设计师的考虑不足，会导致在某些浏览器中页面模块变形、错乱等问题。卖家在使用新模板的时候需要注意做好当前数据备份，以免发生意外情况。
J. 淘宝模板如何使用
淘宝店铺想要在销售方面做到更好，那对于店铺装修来说是非常有必要的，其中淘宝模板对店铺设置来说是其中关键的重要因素之一，本身在淘宝上面的网店购物过程就是一个比较虚拟的过程，所以我们在开网店的时候更要注意直观感受。那么淘宝模板的使用方式是怎样的?下面鱼爪网小编和大家了解一下。
淘宝模版的使用方式是怎样的?
1、淘宝模版可以自行从网上下载，也可以自己设计，这里演示的模版来源于网络，淘宝店铺是专门版，基础版的用户可能不能实现某些功能。可以通过查看店铺装修里面左上角来获取自己店铺的版本。
2、使用PS打开下载来的模版，修改里面的图片，将自己产品的图片替换掉模版里的图片，然后使用切片工具对模版进去裁剪。
3、打开淘宝“卖家中心”里的“图片空间”，将之前切片的图片上传到图片空间，并将图片链接复制下来。
4、打开dreamweaver，使用插入图片打开之前切片的图片，在“设计页面”使用左下角的矩形热点工具在合适的位置绘制矩形框，在“代码页面”修改图片的地址为之前图片空间复制来的链接地址。然后复制代码。
5、进入“卖家中心”的“店铺装修”，将左边的“自定义模块"拉到右边，并添加代码。在dreamweaver那复制的代码前面添加下面的代码可以实现全屏效果。
6、贴好代码后，选择“使用编辑器”，返回到编辑模式，这个时候，整个宝贝模版就出现了。 注意：在编辑模式中，宝贝模版可能显示不正确，比如有走形，裂缝等等，这些都不要紧，在发布之后显示出来就不会这样。
7、关于文字输写比如现在我们要编辑宝贝描述，将鼠标点击宝贝展示下面的空白区域，将会出现光标，这个时候你就可以进行编辑写入了。其他如宝贝详情，等等也是如此编辑，依样画葫芦就可以。
以上是鱼爪网小编和大家分享淘宝模版的使用方式是怎样的相关内容，可见淘宝模板的使用方式非常简单，可以从模板上自行下载也可以自己设计，但是在这方面也需要有一定经验，才可以做到更好的效果。如果商家在这方面并不是特别精通，可以选择专门代理公司进行处理。有相关问题可以来鱼爪网咨询我们。