deep-fish-pixel / eBase

h5 webapp/spa framework

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

eBase

该框架用于移动web应用开发(spa),移动web应用于2个方向,一是依赖客户端嵌入二是移动浏览器直接打开。 但是在体验上,移动浏览器跟客户端的嵌入效果比是较差的。基于此点,足够移动端的前端工程师们去付出努力, 打造一款既能跟应用类似体验且在初次加载等性能上有较大提升的框架,此外,对开发者也较为简单和人性化的框架

效果见index.html

eBase开发架构实现的几个要素如下:

一. 首先是支持刷新操作

1.要求在某个页面刷新,不会强制跳转到首页或类似等较差体验

2.页面刷新后,可继续操作,包含该页面资源的获取、历史数据恢复、提交数据后正常跳转、返回操作等

二. 使页面所需的资源按需加载,不必等待全部资源加载完成

页面定义的mvc实现的js文件、css文件、页面模板、页面模板数据、页面中调用的某个功能模块的js文件等

三. 在hash中传参问题。

应使用get方式导致问题1使用get方式导致问题1.url长度有限2.信息暴露3.较丑

此时应使用sesstionStorage/localStorage缓存,如取到正常操作,否则跳转首页来解决

四. 使用下一个页面的预取功能,可包含页面js文件、css文件、页面模板等

五. 某个页面提交需要用户登录。则在重定向到登录页登录后,再返回该页面,页面需保证能继续使用。

1.使用/保存页面fragment路径,但有缺陷,如不方便开发等问题

2.推荐使用参数方式保存,path=xx1,xx2

3.要求保存现场,以减少用户重新输入

六. 页面刷新或新开页,当页面跳转到父页面或下一个页面,仍然保持客户端的体验效果

打开ios的客户端体验就是,不必细讲,尽量实现就是

七. 页面切换时,需保证2个切换页面scroll初始位置正确,且无抖动(绝大部分浏览器兼容亦可)

连续切换的过程和结果正常

八. 最重要一点:在当前页面切换结束后,当前页面应保持无任何css3的动画

开始:

根据examples中test的demo,只有简单的几步:

  1. index.html中appConfig主要配置页面模板数据的地址

  2. config.js中,router.resources中配置每个router对应的资源路径,包含css和js文件

  3. openPath是控制使用#还是使用path名称,看项目需要,均可使用

    member用于认证失效用,可区分多个会员名称

  4. 下面开始页面的生成, 分别在

    data/html 增加模板页

    style/css/page 增加页面css

    scripts/app/page 增加页面js

  5. 页面js中包含view service router,只需要在其pageConfig变量中配置三项

    route 路径名称

    templateName 模板名称

    pageDataUrl 模板数据名称(无模板数据可删)

  6. 如上面配置有误,控制台会有相关错误提示/提醒

About

h5 webapp/spa framework