起因

刚进公司那会儿,接的是一个微信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

快速构建SPA框架SalutJS--项目工程目录 一的更多相关文章

  1. 快速构建SPA框架SalutJS--项目工程目录 二

    目录结构 上面这张图是salut的目录文档,从github上将其下载后直接运行node run和 node json 可以直接启动项目.下面逐个介绍每个目录的存放的文件和作用. constructio ...

  2. 快速构建SPA框架SalutJS--项目工程目录 三

    配置文件 在开始我们的第一个界面之前,我们需要把初始的html和config文件配置好.html非常简单,只需要一个div作为最外部的容器包裹着所有界面即可: <!DOCTYPE html> ...

  3. 使用 Spring Boot 快速构建 Spring 框架应用--转

    原文地址:https://www.ibm.com/developerworks/cn/java/j-lo-spring-boot/ Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2 ...

  4. 使用 Spring Boot 快速构建 Spring 框架应用,PropertyPlaceholderConfigurer

    Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...

  5. 使用 Spring Boot 快速构建 Spring 框架应用

    Spring 框架对于很多 Java 开发人员来说都不陌生.自从 2002 年发布以来,Spring 框架已经成为企业应用开发领域非常流行的基础框架.有大量的企业应用基于 Spring 框架来开发.S ...

  6. Myeclipse项目工程目录中各种Libraries的含义

    MyEclipse工程目录下一般会有以下几类Libraries,如图: 各种Libraries的含义如下: JRE System Library:Java SE 的常用库文件集合,构建任何Java项目 ...

  7. Maven项目工程目录

    maven工程目录规范: src/main/java   存放项目的.java文件 src/main/resources   存放项目的资源文件,如spring.hibernate配置文件 src/t ...

  8. maven项目工程目录约定

    使用maven创建的工程我们称它为maven工程,maven工程具有一定的目录规范,如下: src/main/java —— 存放项目的.java文件 src/main/resources —— 存放 ...

  9. 快速构建hibernate框架

    手动配置Hibernate框架的配置,极易出现问题,在Eclipse的web项目中,我们可以快速配置,方便快捷 一.导入Hibernate框架所需要的jar文件 二. 窗口—Perspective—打 ...

随机推荐

  1. ubuntukylin18.04Lts和deepin15.5与win10 1803双系统安装

    我首先安装的是ubuntu kylin(中文名优麒麟) 1.计算机右键选择管理磁盘,压缩卷设置空闲空间(第7步分区用) 2.重启时fn+f1进入bios设置界面. 3.关闭安全模式和快速启动,将boo ...

  2. Git协作流程

    Git 作为一个源码管理系统,不可避免涉及到多人协作. 协作必须有一个规范的流程,让大家有效地合作,使得项目井井有条地发展下去."协作流程"在英语里,叫做"workflo ...

  3. spring MVC(十)---spring MVC整合mybatis

    spring mvc可以通过整合hibernate来实现与数据库的数据交互,也可以通过mybatis来实现,这篇文章是总结一下怎么在springmvc中整合mybatis. 首先mybatis需要用到 ...

  4. IntelliJ IDEA(十) :常用操作

    IDEA功能详细,快捷键繁多,但是实际开发时不是所有都能用上,如果我们熟悉一些常用的也足够满足我们日常开发了,多的也只是提高我们的B格. 1.自定义主题 IDEA默认的主题有三款,分别是Intelli ...

  5. Elasticsearch笔记七之setting,mapping,分片查询方式

    Elasticsearch笔记七之setting,mapping,分片查询方式 setting 通过setting可以更改es配置可以用来修改副本数和分片数. 1:查看,通过curl或浏览器可以看到副 ...

  6. BZOJ_1407_[Noi2002]Savage_EXGCD

    BZOJ_1407_[Noi2002]Savage_EXGCD Description Input 第1行为一个整数N(1<=N<=15),即野人的数目. 第2行到第N+1每行为三个整数C ...

  7. 虚拟机console基础环境部署——系统基础环境

    1. 概述2. 工具类安装2.1 安装vim2.2 安装tree2.3 安装expect2.4 安装lsof3. 编译环境类安装 1. 概述 本系列博客是在最小化安装CentOS6.5的基础上,通过配 ...

  8. sublime text3简体中文版汉化教程

    今天突然想到好像还有一个强大的编译器sublime text 3可是这个是外国的编译器,不过各位不用担心 这个编译器,已经支持中文编译了: 下面就是我关于汉化为中文方面的一些了解以及汉化方式(由于我的 ...

  9. String去重方法

    思路:利用集合的contains方法将某个字符串中的集合中没有的单个字符添加到集合中,然后再将集合中每个元素做拼接 @Test public void aa5(){ String aa="a ...

  10. 从壹开始微服务 [ DDD ] 之十一 ║ 基于源码分析,命令分发的过程(二)

    缘起 哈喽小伙伴周三好,老张又来啦,DDD领域驱动设计的第二个D也快说完了,下一个系列我也在考虑之中,是 Id4 还是 Dockers 还没有想好,甚至昨天我还想,下一步是不是可以写一个简单的Angu ...