快速构建SPA框架SalutJS--项目工程目录 一

起因

刚进公司那会儿,接的是一个微信APP应用,SPA是前人搭起来的,用到的技术主要是backbone和zepto。后来那人走了,就卤煮一个人把项目接了下来。项目越是到后面,越发觉了诸多弊端,不停的增加界面和业务使得整个应用看起来臃肿不堪。于是觉得是时候重构了。那时也巧是正好认识requireJS,认为界面嘛,总可像那模块一样,异步加载进来。于是就在旧瓶子里装了新酒,除了界面,代码结构就完全重写了。后来私底下又接了别人的活,也是微信APP应用,觉着跟咱之前的差不多,也就把重构后的代码一并用上,发现效果很不错。完成后渐渐的生出自己写框架的想法,于是便抽出代码,修改,优化。积累起来一个基于backbone的快速开发的代码库。用来开发html的单界面应用。

简介

目前就将它命名为SalutJS吧。它的作用主要是让开发人员关注具体的业务,快速的搭建基础框架。如果你使用了Salut,你可以在两分钟内搭建起来一个简单的单页应用。当然,所谓的单页是指不刷新界面的情况下切换视图界面,是用户感觉整个应用的界面是流程的,无刷新的。我们是利用浏览器的hash变化值和div隐藏切换实现的这个功能。通过检测浏览器的hash值变化,从而改变div(一个完整的界面)的显示和隐藏,从而达到无刷新切换界面的效果。一开始有个疑问,那就是如果界面越来越多,会不会影响加载性能呢?我想这是每个做移动开发的人员都回去考虑的问题。SalutJS为你解决了这个问题。界面是可以拆分,组合,并且是异步加载的。你可以在一开始只load出第一个界面,然后再需要的时候异步load其他界面。资源文件(js,template)都是异步加载到客户端的。这样就解决了业务提示从而导致首屏加载速度慢的问题了。其次,SalutJS的所有节目几乎是只需要几行配置就可以展示出来,等于是将界面开发配置化了,你需要做的事建的业务需求和界面css代码的编写。通过它的简单的API,你可以快速简介地串联起各个界面。

示例

卤煮将在以后几篇博文中陆续介绍SalutJs。通过制作一个简单的单页应用,展示它的具体用法。下面是实例部分的截图。可以改变地址栏改变了hash值推动界面变化。

结语

SalutJS只为快速开发SPA这个简单的目的。当然,里面的错误和欠考虑之处在所难免。你可以去github上fork一下,通过阅读代码,发现问题并且@我提出你的宝贵意见,一起完善它,将其造福于广大的程序员。另外,虽然现在用的是requireJS,然而异步模块加载的模块卤煮已经重写一次,用起来虽然差强人意,单比起requireJS,确实没有其成熟,不过体积却只有它的四分之一,为了精简代码,卤煮后续会替换掉之。还有,卤煮到最后也是希望替换掉backbone的,真正实现自己的一套原生框架。这项工程较大,需要花很多时间。也需要诸位的慷慨相助。

源码地址

https://github.com/constantince/Salut

原文地址:https://www.cnblogs.com/constantince/p/5583264.html