simple-spa 一个简单的单页应用实例

我会带着你远行 2022-07-12 10:28 221阅读 0赞

上两篇文章说过要写一个简单的单页应用例子的， 迟迟没有兑诺， 实在有愧 哈哈。这篇写给小白用户哈。

正好趁今天风和日丽，事情不多， 把从项目里的代码扣取了一下， 整理了一个简单的例子。  
因为我们生产项目用到es6 还有构建工具，为了让例子足够简单和原生，除了一个zepto，连require都是我之前写的文章里的实现的，很简单70行代码。

# 事例地址 #

github：https://github.com/skyweaver213/simple-spa

demo： https://skyweaver213.github.io/simple-spa/example/demo/index.html

# 单页应用 #

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

# 如何实现 #

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

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

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

![613236-20170215160147675-302357029.png][]

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

例如这样。

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

1、单页的核心实现

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

没了解过这个属性的 可以看看 张鑫旭的 ：http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

流程大概是这样

![613236-20170215164123769-884418026.png][]

拉取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 <div class="main-viewport">
     2     <div class="viewport index-viewport" data-no-init="true">
     3         <style>
     4             .index-viewport {
        
     5                 background: cornflowerblue;
     6             }
     7         </style>
     8 
     9         <div class="viewport-content">
    10             index
    11 
    12             <button class="js_tolist"> to list </button>
    13         </div>
    14 
    15 
    16         <script type="text/fscript" data-src="./js/index.js" ></script>
    17     </div>
    18 </div>

注意 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         //设置当前view
    13         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': htmlPath
    23             }, "页面标题", 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 out
    14 
    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

![613236-20170215201415144-246599335.png][]

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

![613236-20170215201553816-962006226.png][]

[613236-20170215160147675-302357029.png]: /images/20220710/04351263fd354c32b6e9c3adf34c22be.png
[613236-20170215164123769-884418026.png]: /images/20220710/d404bfe55e8c457d964d47f24d5eb819.png
[613236-20170215201415144-246599335.png]: /images/20220710/b179abd92ae84e1790baea2dcad74a14.png
[613236-20170215201553816-962006226.png]: /images/20220710/ceca4e536bd44ee299e5f052aa1f91ea.png