可复制的前后端分离开发模式教案资料.ppt

可复制的前后端分离开发模式WEB开发方式历史回顾
问题与挑战
迎接挑战
组织结构上的前后端分离
F2E&SDE
改变的意义
开发模式上的前后端分离
合理的开发流程
Yahoo!的分离开发经验
全新的思想-可复制的前后端分离开发模式
验证与实践

WEB开发方式历史回顾组织结构开发流程(多项目)迎接挑战组织结构上的前后端分离F2E&SDE开发的组织结构重组推荐的内部组织结构企业
提高生产力
提高项目品质
降低招聘成本
提升专业形象

员工
做自己想做的事
具备成为领域内专家的基础
获得更为清晰的职业规划路线

开发模式上的前后端分离明确的需求变动的需求
转换成明确的需求
非紧急，重大变动的部分可以版本更新的方式进行处理
制定适合的“需求更改”流程
PHP
MapleSystem+PHP

存在的问题
在页面中找到要替换的假数据有点困难，需要“淡定”
经常弄丢HTML中的字符、引号、结束符等等
SDE表示“压力很大”
SDE套页后的页面拿到前端跑不起来
QA需要等到后端全部弄好后才能开始测试全新的思想可复制的前后端分离开发模式适合任何后端语言的分离开发模式思想核心引入JS的I18N资源文件
<@easySC.i18nJspath=“…/feed.js”/>
页面中调用该指令后，应该输出如下代码:
<scripttype=“text/javascript”src=“…/feed_en_US.js”></script>
<scripttype=“text/javascript”src=“…/feed.js”></script>

“en_US”应该由该指令自动识别客户端语言
如果站点允许用户选择“语言”，则以此为准页面中输出的I18N信息
<@easySC.i18nMsgkey=“feed.userinfo”arguments=“Charlie”/>
该指令应该从相应的i18n属性文件中取到key为”feed.userinfo”的值，如果支持参数形式，则可以将参数传递过去，支持多参数以数组形式的传递，如：arguments=”[\”a\”,\”b\”,\”c\”]”前端Mock环境时将只有一个模拟i18n文件（每种语言一个）

例如，i18n资源中有:feed.userinfo={0}&#39;sInfo
那么，调用该指令后应该输出:Charlie’sInfo业务数据的访问
<@easySC.bizDataname=“feed”service=“feed.feed_list”params=“{pageSize:10,pageIndex:0}”/>
“name”取到的数据将赋值给它，以便在后面可以通过它来访问取到的数据
“param”该service需要用到的参数
“service”在前端mock环境下，它会去读取对应的mockdata/biz/feed/feed_list.json这个文件，在真实环境中，它由后端对该指令接口的具体实现去提供真实数据，service和params将传递进去。通过AJAX访问业务数据
bizcall.ext [.do,.php,.asp(x)]
所有通过AJAX访问业务数据的请求都指向到同一个bizCall.ext,发送一个字段:
字段名: bizcall
字段值: {name:“feed”,service:“feed.feed_list”,params:{pageSize:10,pageIndex:0}}

对后端来讲,他们仍然可以使用easySC.bizData来处理,对前端来讲,他们的假数据不需要编写多份.
提示:前端对业务数据访问的AJAXCall可以封装为一个通用方法，如“bizCall”环境数据访问
<@easySC.envDataname=“username”key=“currentuser.username”/>
“key”在前端开发的mock环境中，应该匹配到前端模拟的环境假数据文件中的“currentuser.username”，在真实环境中，则由后端对该指令接口的具体实现去提供真实数据，key将传递进去。
“name”取到的对应KEY的返回值，如:“CharlieDu”，可以在后面的代码中使用“指令”，可以由任何语言进行实现

“指令”设计思想:

“指令”在前端mock环境中取假数据
“指令”在真实环境中取真实数据
环境切换由开关控制业务数据格式

需要由前后端共同约定环境数据格式

需要由前后端共同约定，后面的注释可以由后端同事补齐，用于后端在真实环境中取数据时可以明确数据出处（比如，来自Session或Cookie）。前端模拟假数据文件结构表单数据约定
ActionURL
Items’Name
SubmitMethod

链接URL、参数约定所