事例地址

github：

demo：

单页应用

单页应用是指在浏览器中运行的应用，它们在使用期间不会重新加载页面。像所有的应用一样，它旨在帮助用户完成任务，比如“编写文档”或者“管理Web服务器”。可以认为单页应用是一种从Web服务器加载的富客户端。（摘自：）

如何实现

单页应用说白了就是不用刷新页面，例如首页点击查询到列表页，一般给一个过场动画，从而优化用户的体验。但是往往单页应用首次加载时间比较长，因为很多人往往把代码都打进首屏里了。

然后能不能做到既要极速打开首屏体验，也要保留单页的流程用户体验呢？

这时候极致的按需，能把这个问题迎刃而解。

截图为例，例如绿色的其实就是用户打开这个页面首先最关心的部分，我们把这部分归入到首屏里，然后待首屏渲染成功后，再异步 require 其他首屏之额的模块，例如我蓝色框住的信息和操作。

例如这样。

//航班卡片渲染        flightInfo.render(orderDetail, orderDetailInfo);        //价格render        pricetotal.render(orderDetail, orderDetailInfo);            //异步模块加载          this.loadAsynModules();        this.loadAsynXprdModules();

1、单页的核心实现

利用了浏览器支持历史记录操作，pushState 和popstate (如果不支持这个属性的浏览器可以用hashchange这个事件代替，移动端基本都支持了)

没了解过这个属性的可以看看张鑫旭的：

流程大概是这样

拉取html：

1                 var me = this; 2                 //获取html 3                 $.ajax({ 4                     url: htmlPath, 5                     type: 'get', 6                     success: function (data) { 7                         //console.log('ss data ', data); 8                         getScript(data, me); 9                     },10                     error: function (e) {11                         console.log('error ', e);12                     }13 14                 });

html 内容：

1 
     
       2     
      
        3         
        8  9         
       
        10             index11 12             
        13         
       
14 15 16         
       17     
      
18

注意 script是 data-src ，因为是单页代码动态引入,然后拉取html成功后会自动关联viewport下的script，再读取data-src的内容，然后动态引入script资源。

动态引入js：

1                 //取scripts的绝对路径 如果不是绝对路径 ，需要动态计算 2                 var script_path = scripts[0].getAttribute('data-src') || ''; 3  4                 require([script_path], function (exports) { 5  6                     var view = cloneObj(exports.view); 7  8                     view.htmlPath = htmlPath; 9                     view.viewPort = $("[page-path='" + htmlPath + "']");10                     view.$ = function (selector) {11                         return view.viewPort.find(selector);12                     };13                     //每创建一个view 把引用存起来14                     DF.VIEWREF[htmlPath] = view;15 16                     //如果上一个view存在17                     scope.preView && scope.preView.onHide.apply(scope.preView);18 19                     //加载页面完成后20                     scope.fishLoad(htmlPath, pushState, search);21 22 23                     view && view.onCreate.apply(view);24                     //绑定事件25                     if (view && view.events) {26                         DF.bindEventAction.call(view, view.events);27                     }28 29 30                     view && view.onShow.apply(view);31                     if (view.onAppear) {32                         DF.onAppear = view.onAppear;33                     }34                     scope.updatePageid(view);35 36 37                 });

js动态引入成功后，再执行单页的生命周期。

分别是

onCreate 页面创建的时候执行，只执行一次

onShow 页面创建后会执行，每次切换下一个页面会执行

onHide 页面切换的时候，上一个页面隐藏的时候会执行

然后资源加载成功，页面渲染成功后，会pushSate，修改浏览器地址

1     //fishLoad 2     fishLoad: function (htmlPath, pushState, search) { 3         //记录上一个页面 4         if (this.curView) { 5             this.preView = this.curView; 6         } else { 7             this.preView = DF.VIEWREF[htmlPath]; 8         } 9 10         search = search || '';11 12         //设置当前view13         this.curView = DF.VIEWREF[htmlPath];14 15         //console.log('curview ', this.curView.htmlPath, ' preView ', this.preView.htmlPath)16 17         //渲染成功18         if (pushState) {19             history.pushState({20                 'viewPath': htmlPath,21                 'pro': 'spa',22                 'url': htmlPath23             }, "页面标题", htmlPath + search);24         }25 26     },

back回退的：

1        back: function () { 2            history.back(); 3        }, 4  5         //history.back 会触发 popstate，然后会重新走loadView逻辑 6         $(window).bind("popstate.pageview", function (e) { 7  8             //是单页spa操作  才触发 9             if (this.getViewPath(location.href) != this.curView.htmlPath) {10                 /*11                  * 该干嘛干嘛12                  */13                 var pat = new RegExp(FHYBRID.appPath, 'i');14                 DF.loadView(location.pathname.replace(pat, ''), false, false, true);15             }16 17         }.bind(this));

动画过渡：

1     //动画执行方法 2     /** 3      * @param animInitClass  动画初始化时候的class 4      * @param animBeforeClass  动画执行前的class 5      * @param animEndClass  动画执行后的class 6      */ 7     viewAnimation: function (opt) { 8         var $static_el = opt.staticView; 9         var $anim_el = opt.animView;10         var $anim_init_class = opt.animInitClass;11         var $anim_before_class = opt.animBeforeClass;12         var $anim_end_rmclass = opt.animEndClass;13         var anim_type = opt.animType || 'in';  //动画是进入 还是  出  ;  in  or out14 15         $anim_el.addClass($anim_init_class);16 17         //进入 动画节点 显示， 出， 对上一个页面显示18         (anim_type == 'in') ? $anim_el.show() : $static_el.show();19 20 21         setTimeout(function () {22             $anim_el.addClass($anim_before_class);23 24             $anim_el.on('webkitTransitionEnd', function () {25                 //进入 对上一个页面隐藏；  出 动画节点 隐藏，26                 (anim_type == 'in') ? $static_el.hide() : $anim_el.hide();27 28                 $anim_el.removeClass($anim_end_rmclass);29                 $anim_el.off('webkitTransitionEnd');30             });31         }, 0);32 33 34     },

调用：

1                     //切换动画2                     this.viewAnimation({3                         staticView: this.preView.viewPort,4                         animView: this.curView.viewPort,5                         animType: 'in',6                         animInitClass: 'ui-page-right ui-transition',7                         animBeforeClass: 'ui-page-center-i',8                         animEndClass: 'ui-page-right ui-transition ui-page-center-i'9                     });

最后请看我上面的事例,一共三个页面：

index.html

list.html

booking.html

首先执行 index onCreate -> 然后执行 index onShow ；点击tolist；执行 index onHide 然后执行 list onCreate-> list onShow;

转载于:https://www.cnblogs.com/skyweaver/p/6402565.html

你可能感兴趣的文章