可复制的前后端分离开发模式D

WEB开发方式历史回顾◦问题与挑战◦迎接挑战组织结构上的前后端分离◦F2E&SDE◦改变的意义开发模式上的前后端分离◦合理的开发流程◦Yahoo!的分离开发经验◦全新的思想-可复制的前后端分离开发模式验证与实践如何降低招聘成本？如何提高项目质量？如何完善开发资源分配？如何提高企业的专业形象？如何为员工提供技能升级的空间？如何为员工提供更好的职业规划指引？F2E◦FrontEndEngineer◦泛指WEB前端开发SDE◦ServerDevelopEngineer◦泛指WEB后端开发组织结构TeamLeaderTechnicLeaderTeammember企业提高生产力提高项目品质降低招聘成本提升专业形象员工做自己想做的事具备成为领域内专家的基础获得更为清晰的职业规划路线明确的需求F2E前端变动的需求◦转换成明确的需求◦非紧急，重大变动的部分可以版本更新的方式进行处理◦制定适合的“需求更改”流程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}'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环境中取假数据“指令”在真实环境中取真实数据环境切换由开关控制业务数据格式◦需要由前后端共同约定{status:“SUCCESS|FAILURE”,message:“当前请求的情况资讯”,result:“返回值,可以是任何数据类型,比如String,Array,Object,需要前后端一起约定”}环境数据格式◦需要由前后端共同约定，后面的注释可以由后端同事补齐，用于后端在真实环境中取数据时可以明确数据出处（比如，来自Session或Cookie）。{rootpath:“/”,skinpath:“/resource/skin_default/”,jspath:“/resource/js/”,currentuser.cred:“U1U7EXG5”,/*数据出处*/currentuser.username:“CharlieDu”/*备注信息*/}前端模拟假数据文件结构表单数据约定ActionURLItems’NameSubmitMethod链接URL、参数约定所有这些约定最终需要形成“数据接口文档”DataInterfaceSpecificationXXXProjectVersion:0.1F2EOwner:CharlieDuSDEOwner:BoSong2010/10/09EasySeparateandCooperate它是一个简易的前后端分离框架基于可复制的前后端分离开发模式思想，JAVA+Freemarker的简单实现HTTPServerEasySCFramework前端环境真实环境实现接口BizDataEnvDataI18NI18NJS@easySC_bizDataname=starlistservice=home.star_listparams={articleId:-1}/Module:current-listmstar\WEB-INF\classes\[e-mail]