中国领先的IT技术网站
51CTO旗下网站
参考淘宝团队实践：一个简单粗暴的前后端分离方案
本文是我刚刚参加完一个项目后所写，记录一下整个过程遇到的问题及处理方式，其他的一些细碎点如表单异步提交什么的，不是本文重点，不写了。这是我第一次实践前后端完全分离的项目，整个前端全由我来设计、开发。2周时间，凭着这套方案，项目按期开发完成，而且还提前完成了，预留出一天多的时间测试了一遍。
作者：吕大豹来源：吕大豹的博客| 10:08
刚刚参加完一个项目，背景：后端是用java，后端服务已经开发的差不多了，现在要通过web的方式对外提供服务，也就是B/S架构。后端专注做业务逻辑，不想在后端做页面渲染的事情，只向前端提供数据接口。于是协商后打算将前后端完全分离，页面上的所有数据都通过ajax向后端取，页面渲染的事情完全由前端来做。另外还有一个紧急的情况，项目要紧急上线，整个web站点的开发时间只有两周，两周啊！于是在这样的背景下，决定开始一次前后端完全分离的尝试。
之前开发都是同步渲染和异步渲染混搭的，有些东西可以有后端PHP帮你编译好，如通用的页面模板，后端传回的页面参数等。提前预感到这次完全分离可能会遇到一些困难，但是项目上线要紧，也不能深入搞架构，于是打算就用jQuery+handlebars，jQuery来完成页面逻辑和DOM操作，用handlebars来完成页面渲染，这个方案是如此的简单粗暴，但好处能最稳妥的保证项目按期完成。其实前后端分离并不是一件容易的工作，这么做会有诸多不完善之处，后面再谈。
浅谈前后端分离
所谓的前后端分离，到底是分离什么呢？其实就是页面的渲染工作，之前是后端渲染好页面，交给前端来显示，分离后前端需要自己拼装html代码，然后再显示。前端来管理页面的渲染有很多好处，比如减少网络请求量，制作单页面应用等。事情听起来简单，但这么一分离又会牵扯到很多问题，比如：
& 资源的按需加载。尤其是在单页应用中。
&页面展现逻辑。分离让前端的逻辑陡增，需要有一个良好的前端架构，如mvc模式。
&数据校验。因为页面数据都是从后端请求来的，必须校验要展示的数据是否合法，避免xss或其他安全问题。
&短暂白屏。因为页面不是同步渲染的，在请求数据完毕之前，页面是白屏的，体验很不好。
&代码的复用。众多的模板、逻辑模块需要良好组织实现可复用。
&路由控制。无刷新的前端体验同时毁掉了浏览器的后退按钮，前端视图需要有一套路由机制。
&SEO。服务端不再返回页面，前端根据不同的逻辑呈现不同的视图（并非页面），要对搜索引擎友好需要做很多额外的工作。
以上每一个问题都够棘手，要处理好需要有设计精良又符合实际项目的方案。现在已经有很多框架可以帮我们做这些事情，Backbone, EmberJS, KnockoutJS, AngularJS, React, avalon等等，利用它们可以架构起一个富前端。但框架毕竟是框架，要利用到实际项目中，还是需要有自己的设计，框架并不能解决所有的问题。
之前也有看过淘宝团队的实践，利用nodejs做一个中间层，处理页面渲染、路由控制、SEO等事情，将前后端的分界线进行了重新定义。个人感觉这应该是一个正确的方向，有点颠覆的感觉，前端走向工程化，将变成真正的全栈式大前端。不知现在这种架构是否在淘宝全面铺开，真有点期待看看效果。
以上的框架，还有淘宝的实践，毕竟都是大牛之作，我这个小辈也只是参考学习过，未能在实际项目中使用。低头看看自己现在手头的项目，1个前端，2周时间，要完成一个完整的web项目，还是用最稳妥最低级的方式来搞吧~
项目整体并不是一个单页应用，但有些模块需要做成局部的单页操作，像这种需要分步完成的操作，只需局部加载子页面即可。
因此，一个模块有一个主html页面，初始只有一些基本的骨架，有一个名字相同的js文件，该模块逻辑都在此js文件中，有一个名字相同的css文件，该模块的所有样式都定义在此js文件中。
需要异步加载的子页面，像上图中每个步骤的页面，我都使用jQuery的$.load()方法来加载，此方法能在页面某个容器中加载内容，并可指定回调函数，使用起来很方便。被异步加载的子页面我都用_开头，如_step1.html，用于做区分。
为了确保浏览器的前进后退按钮可用，我使用了hash来做路由标记，页面地址如：publish.html#step2。有个缺陷是hash并不会发送给服务器，所以SEO就废了。事实上使用history API也可以更优雅的解决问题，但需要考虑兼容性，还有额外工作要做，考虑时间因素，退而求其次，况且本项目也无需做SEO。或者像淘宝的方案那样，nodejs层与浏览器层统一路由，SEO问题可以迎刃而解。但又明显不在本人的实力范围之内，汗--！
除了用$.load异步加载的子页面，剩余的局部页面就是用handlebars提供的模板渲染了，我使用了handlebars的预编译功能，不得不说很强大，一来节约了页面加载阶段所需的编译时间（编译handlebars模板），二来编译后的模板（js文件）方便复用。
接下来就是前端逻辑如何组织，因为没有用mv*框架，所以只能靠自己来写一个便于开发的结构。如上面所述，每个模块有一个主js文件，文件内容结构如下：
var&publish&=&{ &&&&&&&&&&&&init&:&function(){ &&&&&&&&&&&this.renderData(param); &&&&&&&&&&&this.initListeners(); &&&&&&}, &&&&&&&&&&&&renderData&:&function(param){ &&&&&&&&&&&&&&&&&}, &&&&&&&&&&&&initListeners&:&function(){ &&&&&&&&&&&$(document.body).delegates({ &&&&&&&&&&&&&&&&'.btn'&:&function(){ &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}, &&&&&&&&&&&&&&&&'.btn2'&:&function(){ &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&}, &&&&&&&&&&&&&&&&'.checkbox'&:&{ &&&&&&&&&&&&&&&&&&&&&'change'&:&function(){ &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&} &&&&&&&&&&&&&&&&} &&&&&&&&&&&}); &&&&&&} &}&
每个模块给一个命名空间，所有的方法都挂在上面，js文件中只做函数的定义，不立即执行任何东西，然后在html文件中调用入口方法:publish.init()。业务逻辑都封装到函数中，如上面的renderData，然后供其他地方调用。页面的事件监听器统一都注册在body元素上，用事件代理来完成，为了避免写太多的on、click之类代码，为jQuery扩展了一个delegates方法，用来以配置的方式统一绑定监听器，用法如上所示。把delegates定义的代码也放出来吧：
&$.fn.delegates&=&function(configs)&{ &&&&&&el&=&$(this[0]); &&&&&&for&(var&name&in&configs)&{ &&&&&&&&&&&var&value&=&configs[name]; &&&&&&&&&&&if&(typeof&value&==&'function')&{ &&&&&&&&&&&&&&&&var&obj&=&{}; &&&&&&&&&&&&&&&&obj.click&=& &&&&&&&&&&&&&&&&value&=& &&&&&&&&&&&}; &&&&&&&&&&&for&(var&type&in&value)&{ &&&&&&&&&&&&&&&&el.delegate(name,&type,&value[type]); &&&&&&&&&&&} &&&&&&} &&&&&&return&this; &}&
基本的结构就是这样，没有什么新技术，只是把现有的东西做了一下组合。但工作到此还远远没有结束，在实际应用中还会有一些东西需要处理，下面来详细说说：
公共头部底部的引用
这是一个比较棘手的问题，一般通用的头部和底部会放一些公共的代码，如页面外层结构html代码，站点使用的库如jQuery、handlebars，站点通用js和css文件。在传统的开发中，通常是写一个单独的文件如head.html，在其他页面中用后端代码如include语句引入，由此来进行复用。
现在前后端分离后，无法依靠后端来给你渲染，所以得在前端做了。既然用了handlebars，很容易想到把公用部分写成一个模板，然后预编译出来，生成一个header.js文件，然后在其他页面引用。然而在实际操作中发现了一个问题，handlebars是静态模板，编译后生成的字符串通过innerHTML的方式插入到页面，在一般的模板中这样是没问题的。现在有个问题是header中有一些&script&标签，外链着要使用的库，通过innerHTML插入&scirpt&标签，浏览器并不会发送请求加载对应的js文件，所以就出问题了。
搜索、尝试了多种方法后，最终的方案定为：用document.write()将编译结果写到页面，这样&script&标签能够正常加载。所以每个页面使用头部的代码就变成这样：
&script&src=&static/js/tpl/head.js&&&/script& &&&&&&&div&id=&header&& &&&&&&&&&&&&script&src=&static/js/includeHead.js&&&/script& &&&&&&&/div&&
includeHead.js中的代码如下：
function&includeHead(){ &&&&&&var&header&=&document.getElementById('header'); &&&&&&var&compileHead&=&Handlebars.templates['head']; &&&&&&var&head&=&compileHead({}); &&&&&&document.write(head); &} &includeHead();&
看着是有点别扭，不过为了实现功能，目前也就只能这样了。
如上面所述，jQuery的$.load()方法可以满足加载子页面的需求，现在需要解决的问题是，不管用户刷新页面还是前进后退，我们都得根据hash值来渲染对应的视图，其实就是路由控制。这个时候就需要监听hashchange事件了，我定义了一个loadPage方法用来加载子页面，然后绑定监听器如下：
window.onhashchange&=&this.loadP&
在loadPage方法中，根据hash的值来调用$.load()方法，子页面的初始化工作，在$.load()的回调函数中指定。
这样做还有一个便捷之处，我们切换视图不必手动调loadPage方法，只需要修改页面的hash就可以了，hash发生变化被监听到，自动加载对应的子页面。例如，点击下一步进入步骤二：
'.next'&:&function(){ &&&&&&&&&location.href&=&'#step2'; &}&
如此便实现了一个简单的路由控制，由于不是整站单页面，也没有多级路由，这样完全可以满足需求。至于SEO，就只能呵呵了，正好项目也不需要做SEO，否则此方法得作罢。
另外想说的一点就是页面的缓存，异步加载来的内容可以存在localStorage中，也可以放在页面上进行显隐控制，这样用户在频繁切换视图的时候无需再次请求，回到上一步的时候之前填好的表单数据也不会消失，体验会非常好。
页面间参数传递
有时候我们需要给访问的页面传参数，比如访问一个设备的详细信息页，要把设备id给传过去，detail.html?id=1，这样detail页面可以根据id去请求对应的数据。传统由后端渲染的页面，url中的参数会发送到服务端，服务端接收后可以再渲染到页面上供js使用。我们现在不行了，请求页面压根不跟后端打交道，但这个参数是必不可少的，所以需要前端有一套传递参数的机制。
其实非常简单，通过location.href可以拿到当前的url地址，然后进行字符串匹配，把参数提取出来就可以了。看上去挺土鳖的，但工作起来良好，另外也有考虑过用cookie来传递，感觉有点麻烦。
由于这些参数通常是写在&a&标签上的，而&a&标签又是根据动态数据渲染出来的（因为是动态参数），我们不可能在页面渲染完后，用js修改所有&a&标签的href值，给它追加一个参数。怎么办呢？这时候handlebars就派上用场了，我们可以使用handlebars万能的helper，在渲染页面的时候直接查询url中的参数，然后输出在编译好的代码中。我在handlebars中注册了一个helper，如下：
Handlebars.registerHelper('param',&function(key,&options){ &&&&&var&url&=&location.href.replace(/^[^?=]*\?/ig,&'').split('#')[0]; &&&&&var&json&=&{}; &&&&&url.replace(/(^|&)([^&=]+)=([^&]*)/g,&function&(a,&b,&key&,&value){ &&&&&&&&&try&{ &&&&&&&&&&&&&key&=&decodeURIComponent(key); &&&&&&&&&}&catch(e)&{} &&&&&&&&&&try&{ &&&&&&&&&&&&&value&=&decodeURIComponent(value); &&&&&&&&&}&catch(e)&{} &&&&&&&&&&if&(!(key&in&json))&{ &&&&&&&&&&&&&json[key]&=&/\[\]$/.test(key)&?&[value]&:& &&&&&&&&&} &&&&&&&&&else&if&(json[key]&instanceof&Array)&{ &&&&&&&&&&&&&json[key].push(value); &&&&&&&&&} &&&&&&&&&else&{ &&&&&&&&&&&&&json[key]&=&[json[key],&value]; &&&&&&&&&} &&&&&}); &&&&&return&key&?&json[key]&:& &});&
这个名为param的helper可以输出你所要查询的参数值，然后可以直接写在模板中，如：
&a&href=&detail.html?id={{param&id}}&&设备详细信息&/a&&
这样就方便多了！但是这么做有没有问题呢？其实是有些不完美的，如果你考虑&性能&二字的话。一个url中参数的值是固定的，而你每次使用这个helper都会计算一遍，白白做了多余的事情。如果handlebars可以在模板中定义常量就好了，可惜我找遍文档没发现有这个功能。只能为了方便牺牲性能了，也正印证了我标题中所说的&简单粗暴&，呵呵。
数据的校验和处理
由于数据是由后端传来的，有很多不确定性，数据可能不合法，或者结构有错，或者直接是空的。因此前端有必要对数据做一个合法性的校验。借助handlebars，可以很方便的进行数据校验。没错，就是利用helper。handlebars内置的helper如if、each都支持else语句，出错信息可以在else中输出。如果需要个性化的校验，我们可以自己定义helper来完成，关于如何自定义helper，我之前研究了下，写过一篇文章：/lvdabao/p/handlebars_helper.html。总之自定义helper很强大，可以完成你所需的任何逻辑。
数据的格式化，如日期、数字等，也可以通过helper来完成。
另外一方面，前端还应对数据进行html转义，避免xss，由于handlebars已经给做了html转义，所以我们可以直接忽略此项了。
本文是我刚刚参加完一个项目后所写，记录一下整个过程遇到的问题及处理方式，其他的一些细碎点如表单异步提交什么的，不是本文重点，不写了。这是我第一次实践前后端完全分离的项目，整个前端全由我来设计、开发。2周时间，凭着这套方案，项目按期开发完成，而且还提前完成了，预留出一天多的时间测试了一遍。
虽然开发任务是完成了，但是回头看一下整个方案，并不是很优雅也没有什么技术含量，文章开头提到的几个问题都没有解决。所以命题为简单粗暴的方案，都是为了赶工期啊。
最后，如果给我再来一次的机会，并且时间充足，我一定要尝试用mv*方案来搞一下，或angular，或avalon。
原文出自：【编辑推荐】【责任编辑： TEL：（010）】
大家都在看猜你喜欢
热点热点热点热点热点
24H热文一周话题本月最赞
讲师：1人学习过
讲师：24人学习过
讲师：0人学习过
精选博文论坛热帖下载排行
Visual C++ 6.0是Microsoft公司的Visual Studio开发组件中最强大的编程工具，利用它可以开发出高性能的应用程序。本书由浅入深，从基础到实...
订阅51CTO邮刊<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&淘宝招React专家 yuanyan.cao@
这哪是恶作剧，这叫引起公关事件！
这哪是恶作剧，这叫引起公关事件！
当阿里在努力从某岗位工程师的定位到全栈工程师转变时，腾讯还在讨论重构岗位，呜呼哀哉！&br&&br&腾讯不是所有业务都有重构的，但很多业务都有，因为已经不在企鹅了，只是听说现在基本上不怎么招重构了，能力好的重构也走的差不多了，呜呼哀哉！&br&&br&从业务性质来看重构岗位存在的合理性？别忘了企鹅也搞过电商，阿里也搞社交，所以业务性质是主导原因吗？况且业务战场是会变的，而重构岗位因为非常像是写代码的设计，成为了最无法应变变化的岗位，我们不能拿少数能力好的来评价重构，【大部分优秀的人放任何一个岗位都能成为优秀的那一位，但公司设置了一个场景受限定位模糊的岗位一定是会限制普遍的同学】。
当阿里在努力从某岗位工程师的定位到全栈工程师转变时，腾讯还在讨论重构岗位，呜呼哀哉！ 腾讯不是所有业务都有重构的，但很多业务都有，因为已经不在企鹅了，只是听说现在基本上不怎么招重构了，能力好的重构也走的差不多了，呜呼哀哉！ 从业务性质来看重…
离职是因为winter，不能说更多了！淘宝的技术场景一个闪总可能还远不够，招前端专家，高级高级，React体系专家优先，就酱！私聊优先！
离职是因为winter，不能说更多了！淘宝的技术场景一个闪总可能还远不够，招前端专家，高级高级，React体系专家优先，就酱！私聊优先！
1. css是不纯粹的样式描述，不认为有必要实现本不应该是css职责的功能&br&&br&2. 实现类似css3程度复杂度太高，性能上是个问题&br&&br&3. RN毕竟不是浏览器，只是借鉴web标准
1. css是不纯粹的样式描述，不认为有必要实现本不应该是css职责的功能 2. 实现类似css3程度复杂度太高，性能上是个问题 3. RN毕竟不是浏览器，只是借鉴web标准
泻药！&br&首先，不要把客户端UI开发等同与客户端开发&br&其次，技术判断上类RN会成为未来1-5年客户端UI开发的主流之一，不亚于H5模式。
泻药！ 首先，不要把客户端UI开发等同与客户端开发 其次，技术判断上类RN会成为未来1-5年客户端UI开发的主流之一，不亚于H5模式。
Google的同学估计笑了，炒冷饭，前端对文件大小的关注应该降降温了
Google的同学估计笑了，炒冷饭，前端对文件大小的关注应该降降温了
泻药：&br&1. 从技术本身纬度去思考问题，简直就是自寻死路，因为存在即合理；&br&2. 考虑以动态的眼光看技术，试着把自己放到3年后，3年后哪个仓库的代码提交频率依旧很活跃？能持续保持活跃的原因是多方面的，jQuery仓库现在还非常活跃，当然不是因为纯技术纬度的jQuery就比其他类似的库好；&br&3. 所以这是关于社区的事情，哪个社区你更看好？目前来说React的确是优势明显，也算是ReactNative强力助攻吧；&br&4. 同样无关技术：作为亚洲第二的淘宝前端团队，我们用React组件标准，不完全统计阿里一半以上的团队都有在重度使用React；&br&&br&以上观点仅代表个人。。。！
泻药： 1. 从技术本身纬度去思考问题，简直就是自寻死路，因为存在即合理； 2. 考虑以动态的眼光看技术，试着把自己放到3年后，3年后哪个仓库的代码提交频率依旧很活跃？能持续保持活跃的原因是多方面的，jQuery仓库现在还非常活跃，当然不是因为纯技术纬度…
看回复，有点偏题，简单回答下：&br&1. 手淘与淘宝是并列的两个部门，阿里是多元化的平台，技术也是&br&2. 阿里内部有多数前端团队是坚持走社区路线（坚持React社区的体系），小部分团队（比如手淘Weex）是走轮子路线，我想能做自己的轮子这是能力的体现&br&3. 那关于淘宝会怎么走，淘宝会走Fork路线，既结合社区，也有自己的技术孵化
看回复，有点偏题，简单回答下： 1. 手淘与淘宝是并列的两个部门，阿里是多元化的平台，技术也是 2. 阿里内部有多数前端团队是坚持走社区路线（坚持React社区的体系），小部分团队（比如手淘Weex）是走轮子路线，我想能做自己的轮子这是能力的体现 3. 那关…
换个视角来看问题，如果问题主体是前端的未来，那与Angular关系不是特别大，与React关系大点。
&br&&br&建议大家认真想下，别只看字数长回答，大部分有想法有远见的人没那么多时间来编辑巨长无比的答案！
换个视角来看问题，如果问题主体是前端的未来，那与Angular关系不是特别大，与React关系大点。 建议大家认真想下，别只看字数长回答，大部分有想法有远见的人没那么多时间来编辑巨长无比的答案！
1. 历史经验上Vue与Angular这类MV*本身不具有模式上的大创新，只能说流行，但很难到达React的程度。&br&&br&2. 另外谁具有持续的主动创新能力，目前看到像Vue在追随React/Angular社区的感觉太浓了，这也与社区的活跃程度不在一个数量级有关。&br&&br&3. 看国内外商业化公司大部分在用React与迁移到React的过程，反向则未有看见。
1. 历史经验上Vue与Angular这类MV*本身不具有模式上的大创新，只能说流行，但很难到达React的程度。 2. 另外谁具有持续的主动创新能力，目前看到像Vue在追随React/Angular社区的感觉太浓了，这也与社区的活跃程度不在一个数量级有关。 3. 看国内外商业化公…
可以，但很难。&br&&br&利益相关性，淘宝前端下的Node.js业务应该是国内最大的Node集群，至今我们还在努力完善企业级架构。
可以，但很难。 利益相关性，淘宝前端下的Node.js业务应该是国内最大的Node集群，至今我们还在努力完善企业级架构。
曾经阿里有两个比较会写技术博客的人，一个走了
曾经阿里有两个比较会写技术博客的人，一个走了
泻药，简单给大家汇报下吧，淘宝前端团队里在PC与无线Web都有比较完整的应用：&br&&br&1.
&a data-hash=&111caaf35c7ba23b0f0848& href=&///people/111caaf35c7ba23b0f0848& class=&member_mention& data-editable=&true& data-title=&@梧忌& data-tip=&p$b$111caaf35c7ba23b0f0848& data-hovercard=&p$b$111caaf35c7ba23b0f0848&&@梧忌&/a& 同学基于React+KISSY重构的已买到页面&br&2.
&a data-hash=&d04fb180da503f298c9154& href=&///people/d04fb180da503f298c9154& class=&member_mention& data-editable=&true& data-title=&@九十& data-tip=&p$b$d04fb180da503f298c9154& data-hovercard=&p$b$d04fb180da503f298c9154&&@九十&/a& 同学基于React+KISSY实现的淘宝懂我新业务&br&3.
&a data-hash=&ef8c2a14c5acfdd6b8554222ddcc2cba& href=&///people/ef8c2a14c5acfdd6b8554222ddcc2cba& class=&member_mention& data-editable=&true& data-title=&@七念& data-tip=&p$b$ef8c2a14c5acfdd6b8554222ddcc2cba& data-hovercard=&p$b$ef8c2a14c5acfdd6b8554222ddcc2cba&&@七念&/a& 同学基于React+KISSY实现知了业务&br&4. @自寒 在无线端基于React实现的交易链路&br&....&br&&br&另外我自己抽空也写过些开源的基于React的组件：&br&1. &a href=&///?target=https%3A///yuanyan/boron& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&yuanyan/boron · GitHub&i class=&icon-external&&&/i&&/a&
451 Stars&br&2. &a href=&///?target=https%3A///yuanyan/halogen& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&yuanyan/halogen · GitHub&i class=&icon-external&&&/i&&/a& 403 Stars&br&3. &a href=&///?target=https%3A///yuanyan/react-timesheet& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&yuanyan/react-timesheet · GitHub&i class=&icon-external&&&/i&&/a& 44 Stars&br&...&br&&br&------&br&所以你问哪里有，不用找蓝翔，来淘宝就有
泻药，简单给大家汇报下吧，淘宝前端团队里在PC与无线Web都有比较完整的应用： 1.
同学基于React+KISSY重构的已买到页面 2.
同学基于React+KISSY实现的淘宝懂我新业务 3.
同学基于React+KISSY实现知了业务 4. @自寒 在无线端基于React实…
淘宝核心业务已经前后端分离的：&br&1. 淘宝详情页，如下面几个已经迁移的淘宝垂直类目商品&br&&a href=&///?target=http%3A//item./item.htm%3Fid%3D& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&item./item&/span&&span class=&invisible&&.htm?id=&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A//item./item.htm%3Fid%3D& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&item.&/span&&span class=&invisible&&/item.htm?id=&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&2. 淘宝收藏夹&br&3. 我的淘宝&br&。。。&br&今年会有更多业务进行架构改造。
淘宝核心业务已经前后端分离的： 1. 淘宝详情页，如下面几个已经迁移的淘宝垂直类目商品
2. 淘宝收藏夹 3. 我的淘宝 。。。 今年会有更多业务进行架构改造。
更新于2月3日：关于我们的最新动态，我们把React跑在了其他Native的实现，让React在无线不仅是ReactNative，就像我之前说的React更是一种模式：&br&&img src=&/ba5f60d5bf82ac5d1c9c7f059a7af3a7_b.png& data-rawwidth=&576& data-rawheight=&435& class=&origin_image zh-lightbox-thumb& width=&576& data-original=&/ba5f60d5bf82ac5d1c9c7f059a7af3a7_r.png&&------------------&br&对React的理解，认为&u&React是一种架构模式&/u&，无论是内建的DOM、Native还是React Canvas都是的一种基于React模式的具体实现，当我们评价React Native还是评价React Canvas，都是React生态想象空间的一种表现。&br&&br&&u&React提出重新思考UI开发过程，其实不是面向浏览器，而是所有的前端，因为对前端开发而言我们需要涉及的领域已经开始包括了Web与Native。&/u&&br&&br&这里也分享淘宝基于React正在进行中的一些实践，是我认为能戳中极客们的G点让大家为了亢奋的事情。&br&&br&&blockquote&&b&React Web端&/b&&/blockquote&&br&团队里最早使用React的线上产品: &b&知了&/b&，前端是React+KISSY, 后端是淘宝基于Node.js解决方案Midway，这是完全由前端主导的项目，在前端，通过React极大的方便了富交互页面的构建，同时也轻松的解决了页面内业务组件状态同步等问题。&br&&img src=&/6a4f9a10a8e26cda7fbc_b.jpg& data-rawwidth=&1360& data-rawheight=&769& class=&origin_image zh-lightbox-thumb& width=&1360& data-original=&/6a4f9a10a8e26cda7fbc_r.jpg&&&br&&b&淘宝懂我&/b&，我们在面向用户的创新业务里毫无悬念的引入了React，不是为了技术而技术，而是基于React的开发过程，促使大家一切都是以组件的思考模式，这的确让业务也变的更加清晰，开发效率提升，维护成本降低，发现React的确改变之前曾经非常困扰我们的事情。淘宝懂我的入口在“我的淘宝”里，大家可以去围观: &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&淘宝网 - 淘！我喜欢&i class=&icon-external&&&/i&&/a&。&br&&img src=&/3c6fa4605ecb614cb3519eed222fd22a_b.jpg& data-rawwidth=&1258& data-rawheight=&811& class=&origin_image zh-lightbox-thumb& width=&1258& data-original=&/3c6fa4605ecb614cb3519eed222fd22a_r.jpg&&&br&&blockquote&&b&React Native端&/b&&/blockquote&&br&F8大会当天，React Native终于正式开源了，这着实让人兴奋了一把，因为我们知道React Native即将&b&成为在手机端上必不可少的开发模式之一&/b&。因为已经有React的开发经验，稍微过目下文档，很自然就能过渡到React Native的开发。笔者稍微努力了下，复刻了下手机淘宝的首页，不到个把小时我这个菜鸟就差不多完成了大体的样子，让人惊讶于React Native这套技术方案的生产力。&br&&img src=&/4d33b1d7b67f77202eda_b.jpg& data-rawwidth=&375& data-rawheight=&689& class=&content_image& width=&375&&&br&而且React Native开发与Web几乎一致的开发与调试体验，也更让我惊艳，这效率上差距可见一斑。&br&&br&&img src=&/0b25a3c3cf87fc131f3b8f_b.jpg& data-rawwidth=&1450& data-rawheight=&774& class=&origin_image zh-lightbox-thumb& width=&1450& data-original=&/0b25a3c3cf87fc131f3b8f_r.jpg&&&br&&br&但是，Android版本还未开源，React Native只支持iOS7+平台，而在淘宝移动业务里依旧需要支持iOS6平台，所以在iOS6与Android平台上只能暂时继续跑H5页面，在技术上我们很快就确定将React Native代码转为H5版本，做到大家梦寐以求 Write once, run everywhere，就如大家在微博&a href=&///?target=http%3A////CcFmN3nwp& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&http://&/span&&span class=&visible&&//Cc&/span&&span class=&invisible&&FmN3nwp&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&上看到的，我们就做了一个简单的DEMO，基本确定这个方向的可行性。&br&&img src=&/8327cbfc8ae5ad6a63ecd6_b.jpg& data-rawwidth=&625& data-rawheight=&585& class=&origin_image zh-lightbox-thumb& width=&625& data-original=&/8327cbfc8ae5ad6a63ecd6_r.jpg&&&br&兴奋的同时，一个无法回避的事实，对Web前端来说这是一个全新的领域，就是一个大坑，需要我们去填平，填平这些坑的就是我们配套的基础设施。如图这是淘宝基于React的已经完成或正在进行中相关领域，当这些基础设施相对完善时，就是React Native爆发的时候，而我们现在做的事将是未来的肩膀。&img src=&/ac88f13096_b.jpg& data-rawwidth=&685& data-rawheight=&657& class=&origin_image zh-lightbox-thumb& width=&685& data-original=&/ac88f13096_r.jpg&&&br&&br&&br&&br&&br&&br&结束语：&u&Web是未来，Native是当下，而我们在未来与当下之间。&/u&
更新于2月3日：关于我们的最新动态，我们把React跑在了其他Native的实现，让React在无线不仅是ReactNative，就像我之前说的React更是一种模式： ------------------ 对React的理解，认为React是一种架构模式，无论是内建的DOM、Native还是React Canvas都是…
三者用途稍有不同，按依赖关系调整下顺序：&br&1. createClass，如其名就是创建React组件对应的类，描述你将要创建组件的各种行为，其中只有当组件被渲染时需要输出的内容的render接口是必须实现的，其他都是可选：&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&kd&&var&/span& &span class=&nx&&Hello&/span& &span class=&o&&=&/span& &span class=&nx&&React&/span&&span class=&p&&.&/span&&span class=&nx&&createClass&/span&&span class=&p&&({&/span&
&span class=&nx&&render&/span&&span class=&o&&:&/span& &span class=&kd&&function&/span&&span class=&p&&()&/span& &span class=&p&&{&/span&
&span class=&k&&return&/span& &span class=&o&&&&/span&&span class=&nx&&div&/span&&span class=&o&&&&/span&&span class=&nx&&Hello&/span& &span class=&nx&&Taobao&/span&&span class=&p&&,&/span& &span class=&nx&&Hello&/span& &span class=&nx&&UED&/span&&span class=&o&&&&/span&&span class=&err&&/div&;&/span&
&span class=&p&&}&/span&
&span class=&p&&});&/span&
&/code&&/pre&&/div&&br&2. createElement，创建React组件实例，支持type，config，children三个参数：&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&nx&&ReactElement&/span&&span class=&p&&.&/span&&span class=&nx&&createElement&/span& &span class=&o&&=&/span& &span class=&kd&&function&/span&&span class=&p&&(&/span&&span class=&nx&&type&/span&&span class=&p&&,&/span& &span class=&nx&&config&/span&&span class=&p&&,&/span& &span class=&nx&&children&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&p&&...&/span&
&span class=&p&&}&/span&
&/code&&/pre&&/div&如我们在jsx中描述的 & Hello /& ，编译后就是 React.createElement(Hello)&br&&br&3. createFactory，通过工厂方法创建React组件实例，在js里要实现工厂方法只需创建一个带type参数的createElement的绑定函数：&br&&div class=&highlight&&&pre&&code class=&language-js&&&span class=&nx&&ReactElement&/span&&span class=&p&&.&/span&&span class=&nx&&createFactory&/span& &span class=&o&&=&/span& &span class=&kd&&function&/span&&span class=&p&&(&/span&&span class=&nx&&type&/span&&span class=&p&&)&/span& &span class=&p&&{&/span&
&span class=&kd&&var&/span& &span class=&nx&&factory&/span& &span class=&o&&=&/span& &span class=&nx&&ReactElement&/span&&span class=&p&&.&/span&&span class=&nx&&createElement&/span&&span class=&p&&.&/span&&span class=&nx&&bind&/span&&span class=&p&&(&/span&&span class=&kc&&null&/span&&span class=&p&&,&/span& &span class=&nx&&type&/span&&span class=&p&&);&/span&
&span class=&k&&return&/span& &span class=&nx&&factory&/span&&span class=&p&&;&/span&
&span class=&p&&};&/span&
&/code&&/pre&&/div&创建模式目的是隔离与简化创建组件的过程，模式的东西自然是可用可不用，如果需要批量创建某个组件时，可以通过工厂方法来实现：&br&&div class=&highlight&&&pre&&code class=&language-text&&var h = React.createFactory(Hello);
&/code&&/pre&&/div&
三者用途稍有不同，按依赖关系调整下顺序： 1. createClass，如其名就是创建React组件对应的类，描述你将要创建组件的各种行为，其中只有当组件被渲染时需要输出的内容的render接口是必须实现的，其他都是可选： var Hello = React.createClass({
render: …
不在这里讨论各种技术细节，只从流行度的趋势来评价，我认为React.js是下一个流行中的jQuery：&br&1. React.js的定位使其具有很多可在当下就可以实时的想象空间，想象让世界更美好&br&2. 会有更多的人成为布道推广React.js技术栈的一员，让更多人收益于React.js带来的价值
不在这里讨论各种技术细节，只从流行度的趋势来评价，我认为React.js是下一个流行中的jQuery： 1. React.js的定位使其具有很多可在当下就可以实时的想象空间，想象让世界更美好 2. 会有更多的人成为布道推广React.js技术栈的一员，让更多人收益于React.js带…
&b&-&/b&&br&&b&大标题：能被传承的习惯都是好习惯！&/b&&br&那问题来了，怎么&b&传承&/b&？&br&&b&又是另一个大命题：自动化工具与code review保障质量。&/b&&br&&br&工具相关的名词比如：eslint、jshint，这些工具已经预定义的一些规则，推荐使用eslint，因为比较容易扩展自定义规则。&br&&br&code review相关的，建立一种review的文化，这个关键可能在人与团队，在国内环境赞无可持续的最佳实践，我所在的淘宝基础业务组也在尝试与推广可落地的方案中。&br&&br&嗯，跑题的答案。
- 大标题：能被传承的习惯都是好习惯！ 那问题来了，怎么传承？ 又是另一个大命题：自动化工具与code review保障质量。 工具相关的名词比如：eslint、jshint，这些工具已经预定义的一些规则，推荐使用eslint，因为比较容易扩展自定义规则。 code review相关…
Null&br&补充 不可错过的React.js&br&补充
题目是被修改了还是弯楼了？以下我的回答请忽略吧&br&--------------------------------------------------------&br&讲些比较靠谱的，也是我比较看好的一些Web技术：&br&1. SVG与CSS3动画技术未来有更多可能性，产品化能力强&br&2. 国内Node.js技术栈刚开始在企业市场起步，A公司今年最热的前端领域技术，但爆发期还未到来，估计等到我们团队的亿级PV业务完整迁移到Node.js上时还需2年（补充 已确定大概在2015年全部迁移到Node集群，还是大步的向前走了，愿上帝祝福我们吧）&br&3. 移动Web技术方案，趋势，不必多说&br&4. 无障碍Web&br&---------------补充--------&br&5. TV端Web，写上这个原因很简单，国内几乎是空白
补充 Null 补充 不可错过的React.js 补充 题目是被修改了还是弯楼了？以下我的回答请忽略吧 -------------------------------------------------------- 讲些比较靠谱的，也是我比较看好的一些Web技术： 1. SVG与CSS3动画技…
我们来比较下吧：&br&一个传统ERP工程师只能搞成一套只兼容IE的ERP&br&一个当代前端工程师能搞成一套富交互界面漂亮兼容好的ERP
我们来比较下吧： 一个传统ERP工程师只能搞成一套只兼容IE的ERP 一个当代前端工程师能搞成一套富交互界面漂亮兼容好的ERP
已有帐号？
无法登录？
社交帐号登录