前言
我还在携程的做业务的时候，每个看似简单的移动页面背后往往会隐藏5个以上的数据请求，其中最过复杂的当属机票与酒店的订单填写业务代码
这里先看看比较“简单”的机票代码：
然后看看稍微复杂的酒店业务逻辑：
机票一个页面的代码量达到了5000行代码，而酒店的代码竟然超过了8000行，这里还不包括模板（html）文件！！！
然后初略看了机票的代码，就该页面可能发生的接口请求有19个之多！！！而酒店的的交互DOM事件基本多到了令人发指的地步：
当然，机票团队的交互DOM事件已经多到了我笔记本不能截图了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
events: { 'click .js_check_invoice_type': 'checkInvoiceType', //切换发票类型 'click .flight-hxtipshd': 'huiXuanDesc', //惠选说明 'click .js_ListReload': 'hideNetError', 'click #js_return': 'backAction', //返回列表页 'click div[data-rbtType]': 'showRebate', //插烂返现说明 'click #paybtn .j_btn': 'beforePayAction', //提交订单 //flightDetailsStore, passengerQueryStore, mdStore, postAddressStorage, userStore, flightDeliveryStore 'click .flight-loginbtn2': 'bookLogin', //登录 'input #linkTel': 'setContact', //保存用户输入的联系人 'click #addPassenger .flight-labq': 'readmeAction',//姓名帮助 'click .jsDelivery': 'selDelivery', //选择配送方式 'click #jsViewCoupons': 'viewCoupons', //查看消费券使用说明 //flightDetailsStore // 'click .j_refundPolicy': 'fanBoxAction', //查看返现信息 //'click .flight-bkinfo-tgq .f-r': 'tgBoxAction', //查看退改签 'click .js_del_tab': 'showDelListUI', //配送方式 // 'click .js_del_cost .flight-psf i': 'selectPaymentType', // 选择快递费用方式 'click #js_addrList': 'AddrListAction', //选择地址 'click #date-picker': 'calendarAction', //取票日期 //airportDeliveryStore 'click #done-address': 'zqinairselect', //取票柜台 'click #selectCity': 'selectCityAction', //选择城市 'click #date-zqtime': 'showZqTimeUI', //取票时间 //airportDeliveryStore 'click #jsinsure': 'viewInsure', //保险说明 'click #js_invoice_title': 'inTitleChangeWrp', //发票抬头更改 // userStore, flightOrderInfoInviceStore, flightOrderStore //don't move outside 'click #js_invoice_title_div': 'inTitleChangeWrp', 'click .flight-icon-arrrht': 'showinTitleList', //‘+’号，跳转发票抬头列表 //userStore, invoiceURLStore 'focusin #linkTel': 'telInput', 'focusout #linkTel': 'telInputFinish', 'touchstart input': 'touchStartAction', // 处理Android手机上点击不灵敏问题 'click #package .flight-arrrht': 'packageSelect', 'focusin input': 'hideErrorTips', 'click #dist_text_div': 'hideErrorTips', 'click .j_PackageNotice': 'toggletips', 'click .j_AnnouncementNotice': 'toggleNotice', 'click #travalPackageDesc': 'forwardToTravalPackage', //don't move into child modules 'click #airInsureDesc': 'showAirInsureDesc', 'click #paybtn': 'orderDetailAction',//价格明细 'click .J_retriveVerifyCodeBtn': 'getVerifyCode', 'click .J_toPay': 'toPayAction', 'click .J_closeVerifyCode': 'closeVerifyCodePopup', 'keyup .J_verifyCodePopup input': 'setToPayBtnStatus', 'click .js_flight_seat': 'selectRecommendCabin', // 选择推荐仓位 'click .j_changeFlight': 'changeFlightAction', // 推荐航班弹层中更改航班 'focusin input:not([type=tel])': 'adjustInputPosition', // iphone5/5s ios8搜狗输入法遮住input 'click .js_addr,#js_addr_div': 'editDeliverAddress',//报销凭证，详细地址编辑 'click .js_showUserInfo': 'showUserInfo', // add by hkhu v2.5.9 'click #logout': 'logout', // add by hkhu v2.5.9 'click #gotoMyOrder': 'gotoMyOrder', // add by hkhu v2.5.9 'touchstart #logout': function (e) { $(e.currentTarget).addClass('current'); }, 'touchstart #gotoMyOrder': function (e) { $(e.currentTarget).addClass('current'); }, 'click .js_buddypayConfirm': 'buddypayConfirmed', 'click .js_pickupTicket': 'viewPickUp', //261接送机券说明 'click .flt-bking-logintips': 'closelogintips'//关闭接送机券提示 }, |
就这种体量的页面，如果需要迭代需求、打BUG补丁的话，我敢肯定的说，一个BUG的修复很容易引起其它BUG，而上面还仅仅是其中一个业务页面，后面还有强大而复杂的前端框架呢！如此复杂的前端代码维护工作可不是开玩笑的！
PS：说道此处，不得不为携程的前端水平点个赞，业内少有的单页应用，一套代码H5&Hybrid同时运行不说，还解决了SEO问题，嗯，很赞。
如何维护这种页面，如何设计这种页面是我们今天讨论的重点，而上述是携程合并后的代码，他们两个团队的设计思路不便在此处展开。
今天，我这里提供一个思路，认真阅读此文可能在以下方面对你有所帮助：
|
1 2 3 4 |
① 如何将一个复杂的页面拆分为一个个独立的页面组件模块 ② 如何将分拆后的业务组件模块重新合为一个完整的页面 ③ 从重构角度看组件化开发带来的好处 ④ 从前端优化的角度看待组件化开发 |
文中是我个人的一些框架&业务开发经验，希望对各位有用，也希望各位多多支持讨论，指出文中不足以及提出您的一些建议。
由于该项目涉及到了项目拆分与合并，基本属于一个完整的前端工程化案例了，所以将之放到了github上：https://github.com/yexiaochai/mvc
其中工程化一块的代码，后续会由另一位小伙伴持续更新，如果该文对各 /mw690/0064cTs2gw1ex28ubdglhj30q00gxn2n.jpg" width="690" height="449">
然后看看稍微复杂的酒店业务逻辑：
机票一个页面的代码量达到了5000行代码，而酒店的代码竟然超过了8000行，这里还不包括模板（html）文件！！！
然后初略看了机票的代码，就该页面可能发生的接口请求有19个之多！！！而酒店的的交互DOM事件基本多到了令人发指的地步：
当然，机票团队的交互DOM事件已经多到了我笔记本不能截图了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
events: { 'click .js_check_invoice_type': 'checkInvoiceType', //切换发票类型 'click .flight-hxtipshd': 'huiXuanDesc', //惠选说明 'click .js_ListReload': 'hideNetError', 'click #js_return': 'backAction', //返回列表页 'click div[data-rbtType]': 'showRebate', //插烂返现说明 'click #paybtn .j_btn': 'beforePayAction', //提交订单 //flightDetailsStore, passengerQueryStore, mdStore, postAddressStorage, userStore, flightDeliveryStore 'click .flight-loginbtn2': 'bookLogin', //登录 'input #linkTel': 'setContact', //保存用户输入的联系人 'click #addPassenger .flight-labq': 'readmeAction',//姓名帮助 'click .jsDelivery': 'selDelivery', //选择配送方式 'click #jsViewCoupons': 'viewCoupons', //查看消费券使用说明 //flightDetailsStore // 'click .j_refundPolicy': 'fanBoxAction', //查看返现信息 //'click .flight-bkinfo-tgq .f-r': 'tgBoxAction', //查看退改签 'click .js_del_tab': 'showDelListUI', //配送方式 // 'click .js_del_cost .flight-psf i': 'selectPaymentType', // 选择快递费用方式 'click #js_addrList': 'AddrListAction', //选择地址 'click #date-picker': 'calendarAction', //取票日期 //airportDeliveryStore 'click #done-address': 'zqinairselect', //取票柜台 'click #selectCity': 'selectCityAction', //选择城市 'click #date-zqtime': 'showZqTimeUI', //取票时间 //airportDeliveryStore 'click #jsinsure': 'viewInsure', //保险说明 'click #js_invoice_title': 'inTitleChangeWrp', //发票抬头更改 // userStore, flightOrderInfoInviceStore, flightOrderStore //don't move outside 'click #js_invoice_title_div': 'inTitleChangeWrp', 'click .flight-icon-arrrht': 'showinTitleList', //‘+’号，跳转发票抬头列表 //userStore, invoiceURLStore 'focusin #linkTel': 'telInput', 'focusout #linkTel': 'telInputFinish', 'touchstart input': 'touchStartAction', // 处理Android手机上点击不灵敏问题 'click #package .flight-arrrht': 'packageSelect', 'focusin input': 'hideErrorTips', 'click #dist_text_div': 'hideErrorTips', 'click .j_PackageNotice': 'toggletips', 'click .j_AnnouncementNotice': 'toggleNotice', 'click #travalPackageDesc': 'forwardToTravalPackage', //don't move into child modules 'click #airInsureDesc': 'showAirInsureDesc', 'click #paybtn': 'orderDetailAction',//价格明细 'click .J_retriveVerifyCodeBtn': 'getVerifyCode', 'click .J_toPay': 'toPayAction', 'click .J_closeVerifyCode': 'closeVerifyCodePopup', 'keyup .J_verifyCodePopup input': 'setToPayBtnStatus', 'click .js_flight_seat': 'selectRecommendCabin', // 选择推荐仓位 'click .j_changeFlight': 'changeFlightAction', // 推荐航班弹层中更改航班 'focusin input:not([type=tel])': 'adjustInputPosition', // iphone5/5s ios8搜狗输入法遮住input 'click .js_addr,#js_addr_div': 'editDeliverAddress',//报销凭证，详细地址编辑 'click .js_showUserInfo': 'showUserInfo', // add by hkhu v2.5.9 'click #logout': 'logout', // add by hkhu v2.5.9 'click #gotoMyOrder': 'gotoMyOrder', // add by hkhu v2.5.9 'touchstart #logout': function (e) { $(e.currentTarget).addClass('current'); }, 'touchstart #gotoMyOrder': function (e) { $(e.currentTarget).addClass('current'); }, 'click .js_buddypayConfirm': 'buddypayConfirmed', 'click .js_pickupTicket': 'viewPickUp', //261接送机券说明 'click .flt-bking-logintips': 'closelogintips'//关闭接送机券提示 }, |
就这种体量的页面，如果需要迭代需求、打BUG补丁的话，我敢肯定的说，一个BUG的修复很容易引起其它BUG，而上面还仅仅是其中一个业务页面，后面还有强大而复杂的前端框架呢！如此复杂的前端代码维护工作可不是开玩笑的！
PS：说道此处，不得不为携程的前端水平点个赞，业内少有的单页应用，一套代码H5&Hybrid同时运行不说，还解决了SEO问题，嗯，很赞。
如何维护这种页面，如何设计这种页面是我们今天讨论的重点，而上述是携程合并后的代码，他们两个团队的设计思路不便在此处展开。
今天，我这里提供一个思路，认真阅读此文可能在以下方面对你有所帮助：
|
1 2 3 4 |
① 如何将一个复杂的页面拆分为一个个独立的页面组件模块 ② 如何将分拆后的业务组件模块重新合为一个完整的页面 ③ 从重构角度看组件化开发带来的好处 ④ 从前端优化的角度看待组件化开发 |
文中是我个人的一些框架&业务开发经验，希望对各位有用，也希望各位多多支持讨论，指出文中不足以及提出您的一些建议。
由于该项目涉及到了项目拆分与合并，基本属于一个完整的前端工程化案例了，所以将之放到了github上：https://github.com/yexiaochai/mvc
其中工程化一块的代码，后续会由另一位小伙伴持续更新，如果该文对各 ݍ有所帮助的话请各位给项目点个赞、加颗星：）
我相信如果是中级水平的前端，认真阅读此文一定会对你有一点帮助滴。
一个实际的场景
演示地址
http://yexiaochai.github.io/mvc/webapp/bus/list.html
代码仓促，可能会有BUG哦：）
代码地址：https://github.com/yexiaochai/mvc/
页面基本构成
因为订单填写页一般有密度，我这里挑选相对复杂而又没有密度的产品列表页来做说明，其中框架以及业务代码已经做过抽离，不会包含敏感信息，一些优化后续会同步到开源blade框架中去。
我们这里列表页的首屏页面如下：
