快速构建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