老实交代，我是来推广框架的。

是的，我实现了一个 SPA 框架，她非常简洁，没有融入或实现诸如 Templates、View binding、Animation 等技术或特性，因为我相信诸如这些技术有很多成熟方案供你选择，且萝卜白菜各有所爱，且前辈们已经做的很好，我没必要重复发明轮子，如果你也跟我一样喜欢简洁的东西，欢迎尝试。

特性

低侵入性;
页面生命周期 Callback 支持(refer Android、iOS);
SEO 友好(当然这需要您 Server-side render);
简单 Logic Expression 支持(下文有示例)；
代码 Lazy load;
Page 多实例，如：detail 页面;
支持简单的触发器;
LRU Histories 的维护机制;
Single page 重新载入支持(按需);
可以更方便的访问 Query strings;
代码约 15KB，如果您启用 gzip 会更理想;

开始尝试？

1: 准备你的环境

Server:

Ngingx OR Apache

Zepto 基础库需要引入

2: 定义 page model

重要提示:

Page 的根级 DOM 都要添加 "page-ui" class。
如果你没有明确调用 render 方法在 onCreateView() 中，那么框架会发起 XHR 请求去获取 Page view 基于当前的 path。

$Page.define('you.path.name', {

    title: 'You first page',

    // 这里可以预定义 Page 的 View
    html: '<div class="page-ui">' +
            '<h1>Hello</h1>' +
            '<a class="xfly-page__nav" href="you/other/page">Go to the Next page</a>' +
          '</div>',

    onCreateView: function() {
        // 调用 rander 方法可以灵活组织你的 Page view
        // this.render( { url / html: '' } ); 
    },

    onRendering: function() {

    },

    onRendered: function() {
        // 通过更简便的方式访问 Query strings
        var args = this.getArgs();
        
        console.log( 'The key value is ' + args[ 'key' ] );
    },
    
    onResume: function () {
        console.log( this.id + ' be resumed.' );
    },

    onPause: function () {
        console.log( this.id + ' be paused.' );
    }
});

2: 导航

前进:

<a class="xfly-page__nav" href="you/other/page">下一个页面</a>'

前进配合 Logic Express 使用:

比如以下场景，根据用户登录的状态，要用到两个页面，现在通过 Logic Expression 来配置便可达到预期的目的；
语法是: <a data-if="condition" href="target_1" data-else-href="target_2">Link</a>, 对就是 if () {} else {};

<a class="xfly-page__nav" data-if="hasMember" href="member/engagement" data-else-href="member/not/engagement">查看会员状态</a>

go( 'you.other.page' );

后退:

<a class="xfly-page__back" href="">上一个页面</a>'

back();

3: 差不多了

是否简洁？欢迎各位专家吐槽。

Demo

在线 c-ong.github.io 或示例代码目录.

源码

github.com/c-ong/xfly

License

Licensed under the MIT license.

SPA 可以更轻便

特性

开始尝试？

Demo

源码

License