站点 spa [单页面] 应用改造计划

原创 嗯,我知道了 随笔 原创 195阅读 2017-06-30 16:13:08 举报

最近要做 h5 站点,同时,想尝试一下单页面应用,于是就开始研究网上已有的单页面框架。
其中研究的对象有:

[ol]
[li]1. turbolinks,资料 [/li]
[li]2. jQuery.pjax,资料[/li]
[li]3. vue-router,资料[/li]
[li]4. 个人设计方案,资料使用例子[/li]
[/ol]

分别说说各自的优劣吧:

一、turbolinks
代码片段:
html 代码

优点:
[ol]
[li]代码可按页面分离,比较容易维护[/li]
[li]不用配置路由,全部本域名的链接,默认采用 pajax 形式访问[/li]
[li]多页面的开发形式,单页面的使用[/li]
[li]有默认的进度条[/li]
[li]跟任何框架,都可配合使用[/li]
[li]有完善的声明周期,兼容现代浏览器[/li]
[/ol]

缺点:
[ol]
[li]如果走缓存的模式,页面加载外部脚本时,及其不友好[/li]
[li]脚本的加载,变更为异步,脚本的依赖关系,会变得混乱。需要脚本加载器,进行管理[/li]
[li]页面切换,比较难做动画效果[/li]
[li]整页面替换,整页面替换,整页面替换[/li]
[/ol]

二、jQuery.pjax
代码片段:
html 代码

优点:
[ol]
[li]与jquery严密贴合,使用简单[/li]
[li]灵活定制的单页面规则[/li]
[li]链接很友好[/li]
[li]脚本没有加载顺序等问题[/li]
[/ol]

缺点:
[ol]
[li]没有预置的动画机制[/li]
[li]历史回退,是有长度限制的[/li]
[li]需要服务端读取 header 字段,用于区分生成 ajax 内容,还是正常页面内容,如上述例子中的 if 判断[/li]
[li]新页面的脚本和样式,必须放在规定位置[/li]
[/ol]

三、vue-router
代码片段:
javascript 代码

优点:
[ol]
[li]与 vue 完全贴合[/li]
[li]配置简单,支持参数传递[/li]
[li]能与vue动画结合,做出不错的翻页[/li]
[li]支持路由嵌套[/li]
[li]支持路由切换监控[/li]
[li]有独立的后退,前进页面方法[/li]
[/ol]

缺点:
[ol]
[li]须预先定义所有路由规则,代码不绕点圈子的话,必须都放在同一个文件内[/li]
[li]链接如果没有服务端配合,只能走 hash 的丑陋形式[/li]
[li]不能区分是前进,还是后退[/li]
[/ol]

===================================================================

思来想去,上面的框架都不能很好的满足懒人的需求,
如果有一个框架,类似 turbolinks 那样简单使用,又想 vue-router 那样支持切换动画,而且前端使用上,又如 jQuery.pjax 那么灵活,那就赞了。

与其受制于人,不如拿起键盘,happy coding 吧。
于是,又一个坑,正在展开了,设计自己的单页面框架吧~~

设想一下,如果引用框架后,只需要设置一个标志,即可完成单页面的构建,那该多么美好啊?
html 代码

仅需在代码中,设置一个标志,就能把页面构建为 spa 应用,自动管理样式、脚本,是一件多没美好的事啊,
妈妈再也不担心制作单页面了~

于是围绕这一核心的懒惰目标,设计了这个框架: SPA
当然,浏览器必须支持 history api,才能使用。
直至本文编写以来,已经更新到第5版了,
现在已有:
完全贴合前端使用的 默认资源加载规则,同时支持自定义资源加载规则
完善的事件系统,完善的动画钩子
灵活的代码控制,完全的前端控制
完全懒人的使用,对已有站点,只需调整一点点代码,即可完美接入,已尝试在个人博客上使用,整站改造,花费了不到1小时。
完全可以继续“压榨”服务端同学,编写多页面的站点,好省事啊,有木有?
可以和任何框架配合使用
理论上,支持多应用嵌套,这点没有测试,求同学测试之
有如浏览器一般的历史回退、前进,对浏览器的回退、前进按钮,支持也友好

说了这么多,还不心动吗?【我是来干传销的吧?】
欢迎各位同学反馈任何问题~

AND 代码持续更新中.....

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复